Deploy a React Vite App to GitHub Pages

Description

Step-by-step guide to deploying your React Vite application to GitHub Pages.

How to Deploy a React Vite App to GitHub Pages

In this tutorial, you’ll learn how to deploy your React Vite application to GitHub Pages. This is a straightforward process that allows you to host your app for free and share it with the world.

Watch the Full Tutorial

Prefer to watch the tutorial? Check out the full video on my YouTube channel:

Visit my channel for more React tutorials: PedroTech YouTube Channel.

Prerequisites

Before you begin, make sure you have the following:

• Node.js installed
• A GitHub account
• Basic knowledge of React and Git

Step 1: Create a React Vite App

If you haven’t already created a React Vite app, run the following command:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Step 2: Install gh-pages Package

You’ll need the gh-pages package to deploy your app to GitHub Pages.

npm install gh-pages --save-dev

Step 3: Update vite.config.js

Modify your vite.config.js file to include the base property. This is important for GitHub Pages to serve your app correctly.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  base: "/REPO_NAME/",
});

Replace REPO_NAME with the name of your GitHub repository.

Step 4: Add Deployment Scripts to package.json

Update your package.json to include the predeploy and deploy scripts.

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

Step 5: Initialize Git Repository

Initialize a git repository and commit your code.

git init
git add .
git commit -m "Initial commit"

Step 6: Create a GitHub Repository

1. Go to GitHub and create a new repository.
2. Do not initialize it with a README or any gitignore files.

Step 7: Add Remote Origin and Push Code

Link your local repository to GitHub and push your code.

git remote add origin https://github.com/USERNAME/REPO_NAME.git
git branch -M main
git push -u origin main

Replace USERNAME and REPO_NAME with your GitHub username and repository name.

Step 8: Deploy to GitHub Pages

Run the deploy script to build your app and deploy it to GitHub Pages.

npm run deploy

Step 9: Enable GitHub Pages in Repository Settings

1. Go to your GitHub repository.
2. Click on Settings.
3. Navigate to the Pages section.
4. Under Source, select the gh-pages branch and click Save.

Step 10: Access Your Deployed App

After a few minutes, your app will be available at:

https://USERNAME.github.io/REPO_NAME/

Troubleshooting Tips

• 404 Errors: Ensure the base property in vite.config.js matches your repository name.
• Caching Issues: Try clearing your browser cache if you don’t see the latest changes.

Additional Resources

• Vite Documentation
• GitHub Pages Documentation
• gh-pages Package

By following this guide, you’ve successfully deployed your React Vite app to GitHub Pages! This is a great way to share your projects and get them live quickly. For more tutorials like this, subscribe to my YouTube channel.