How to Deploy a Vite + React App to GitHub Pages

If you want to watch this in video form:

Deploying your React app built with Vite to GitHub Pages is quick and easy. Follow these steps:

Prerequisites

• A GitHub account.
• Node.js and npm installed.
• A React project created with Vite.

Steps

1. Install gh-pages From your project directory, run:

   npm install --save-dev gh-pages

1. Update package.json Add a homepage field and deploy script:

   {
     "name": "my-vite-react-app",
     "homepage": "https://<your-username>.github.io/<repo-name>/",
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "predeploy": "npm run build",
       "deploy": "gh-pages -d dist"
     }
   }

Replace <your-username> and <repo-name> with your actual GitHub username and repository name.

1. Configure Vite Base URL In vite.config.js, set the base to match your repo’s path:

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'

   export default defineConfig({
     base: '/<repo-name>/', // Add this line
     plugins: [react()]
   })

1. Build and Deploy Run:

   npm run deploy

This command builds your app and pushes the dist folder to the gh-pages branch of your repo.

1. Access Your Deployed Site Go to:

   https://<your-username>.github.io/<repo-name>/

Done!

Your Vite React app is now live on GitHub Pages.