How to Deploy a Vite React App to GitHub Pages in 2024

Vite is a modern build tool that includes hot module replacement (HMR), fast builds, and much more. In this tutorial, I will guide you through deploying a Vite React app to GitHub Pages. This will allow you to showcase your project to the world with ease.

Before we start, make sure you have the following prerequisites:

1. Node.js and npm installed on your machine.
2. Basic knowledge of React and GitHub.
3. A GitHub account.

Let’s get started!

Step 1: Create a Vite React app
First, let’s create a new Vite React app using the following command:

npm init @vitejs/app my-react-app --template react

Replace my-react-app with the name of your app. This command will create a new directory with all the necessary files for your Vite React app.

Step 2: Set up GitHub repository
Next, navigate to your GitHub account and create a new repository for your Vite React app. Make sure to copy the repository link as we will need it in the next steps.

Step 3: Configure deployment settings
To deploy your app to GitHub Pages, we need to configure the deployment settings in the package.json file. Add the following lines to the scripts section:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist",
}

This will build your app before deploying it to GitHub Pages using the gh-pages package.

Step 4: Install necessary packages
Run the following command to install the required packages:

npm install gh-pages --save-dev

This will install the gh-pages package, which we will use to deploy our app to GitHub Pages.

Step 5: Update vite.config.js
In the vite.config.js file, add the following lines to specify the base URL for your app:

export default defineConfig({
  base: '/my-react-app/',
  plugins: [react()]
})

Replace /my-react-app/ with the name of your app.

Step 6: Deploy your app
To deploy your Vite React app to GitHub Pages, run the following command:

npm run deploy

This command will build your app and deploy it to GitHub Pages using the settings we configured earlier.

Step 7: Check your deployed app
Finally, navigate to https://<your-github-username>.github.io/my-react-app/ to see your deployed Vite React app in action.

Congratulations! You have successfully deployed your Vite React app to GitHub Pages. You can now share your project with others and showcase your skills as a developer.