Project deployment with React.js and Vite.js in GitHub Pages
Tags: github, vite, react, npm
Published: 2023-04-22 21:30:36

_In this article, we will cover the practical deployment of a frontend application on GitHub Pages, step by step. It is mainly focused for personal purposes such as creating a web portfolio. Well, let's get started..._

## Initial installation
> First, we install [node.js LTS](https://nodejs.org/es), the recommended version.

We go to a folder where we will create the project and execute the command to create a project with [vite.js](https://vitejs.dev/guide/):

```bash
npm create vite@latest
```
It will show us options for creating the project:
- Project name
- Package name
- Framework selection -> React
- JavaScript variant selection -> JavaScript

Then we go to the created folder and install the dependencies:

```bash
npm install
```
## Etapa de configuración y publicación en GitHub Page

First, we create a git repository and add the remote repository. Then we create a branch in git called `gh-pages`, which we can do with `git checkout -b gh-pages`. Then we go to the `main` branch.

Next, we install the dependency called [gh-pages](https://www.npmjs.com/package/gh-pages), but as a development dependency:

```bash
npm install gh-pages --save-dev
```

Now we configure the package.json file:

Add "homepage", which will be the link to the page on GitHub Pages, following the format `http://[username].github.io/[name_repository_remote]/` example: `"homepage": "https://luiszapatayamo.github.io/Test-Publish-GHPages/"`
In the scripts section, we include `"predeploy": "npm run build"` and `"deploy": "gh-pages -d dist"`.

```json
{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "homepage": "https://luiszapatayamo.github.io/Test-Publish-GHPages/",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0-beta.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "gh-pages": "^5.0.0",
    "vite": "^4.3.0"
  }
}
```

We also modify the vite.config.js file to set the base URL. In this case, it will follow this format /name_repository_remote/:
```jsx
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  base: '/Test-Publish-GHPages/'
})
```

We confirm all the changes and send them to the remote repository, then run npm run deploy. This will create a folder named dist and publish your application on GitHub Pages.

## Note: Adjustments for react-router-dom

If we use react-router-dom, we need to add the `basename="/[name_repository_remote]"` attribute to the `BrowserRouter` component in your `Routing.jsx` file. Then, we confirm the changes, push them to the remote repository, and run `npm run deploy`.

```jsx
<BrowserRouter basename="/Test-Publish-GHPages">
      <Routes>
        <Route index path='/' element={<Component/>}/>
      </Routes>
</BrowserRouter>
```

That's it! You have successfully deployed your frontend application on GitHub Pages using Vite.js.
**Software**: vite==4.3 , react==18.2, gh-page==5.0, node.js==18.16