Project deployment with React.js and Vite 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