DEV Community

Cover image for How to Deploy a Vite + React App to GitHub Pages
Pedro Henrique Machado
Pedro Henrique Machado

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode
  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"
     }
   }
Enter fullscreen mode Exit fullscreen mode

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()]
   })
Enter fullscreen mode Exit fullscreen mode
  1. Build and Deploy Run:
   npm run deploy
Enter fullscreen mode Exit fullscreen mode

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>/
Enter fullscreen mode Exit fullscreen mode

Done!

Your Vite React app is now live on GitHub Pages.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay