Deploy to GitHub Pages

🧱 Build your app

When you run npm run dev, Vite serves your app in development mode. That's perfect for working locally, but it's not what you upload to the internet.

To create a production-ready version, you build the project:

npm run build

This transforms all your React components, JSX, and imports into plain HTML, CSS, and JavaScript that any browser can understand. It's exactly the concept we described in lesson 6: bundling!

The output of the build command goes into a dist/ folder. That's the folder we'll upload to GitHub Pages. Go ahead! Run the build and check the contents of the new dist folder.

Watch me do this!

🚀 Deploy to GitHub Pages

Prefer watching? Jump to the video.

We'll use GitHub Pages to host our app, almost like we did in Module A.

But this time, we need a couple of extra steps because the built files live in the dist folder!

1️⃣ Push your project to GitHub

If you haven't already, create a GitHub repository and push your code. You learned how to do this in the Git & GitHub lesson.

It's exactly the same process. We did it using GitHub Desktop. You can do the same or use the command line instead:

git init
  git add .
  git commit -m "first commit"
  git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
  git push -u origin main

2️⃣ Set the base path

GitHub Pages serves your site at https://username.github.io/repo-name/. For your deploy to work properly, you need to tell Vite about this path.

Open vite.config.js and add the base option:

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

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

Replace YOUR_REPO_NAME with the actual name of your GitHub repository.

3️⃣ Install gh-pages

We'll use a small package called gh-pages that handles the deployment for us. Install it as follows: