Project deployment with React.js and Vite.js in GitHub Pages

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, 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:

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:

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, but as a development dependency:

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".

{
  "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/:

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.

<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