Create, Run, Build and Deploy React on GitHub Pages

1. What we are building

We will create a React app, run it locally, build it automatically on GitHub, and publish it on GitHub Pages using a custom domain.

Final URL: https://react.learnwithchampak.live/

2. Create the React app with Vite

Open Command Prompt or PowerShell and run:

D:
npm create vite@latest react

When npm asks to install create-vite, type y and press Enter.

3. Run the React app locally

After installation, Vite starts a local development server. Open the URL shown in the terminal.

To stop the server, press Ctrl + C, then type y.

cd react
npm install
npm run dev

4. Add the custom domain file

For GitHub Pages custom domain support, create a CNAME file inside the public folder.

echo react.learnwithchampak.live > public/CNAME

Vite config for custom domain

For a custom domain, keep base: '/' in vite.config.js.

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

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

5. Create the GitHub Actions deploy workflow

Create the workflow folder:

mkdir -p .github/workflows

Create this file:

.github/workflows/deploy.yml

Use this complete workflow:

name: Deploy React site to GitHub Pages

on:
  push:
    branches:
      - main

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: github-pages
  cancel-in-progress: false

jobs:
  build:
    name: Build React app
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build with Vite
        run: npm run build

      - name: Upload dist folder
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    name: Deploy to GitHub Pages
    needs: build
    runs-on: ubuntu-latest

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy site
        id: deployment
        uses: actions/deploy-pages@v4

6. Commit and push to GitHub

git init
git add .
git commit -m "Initial React app for GitHub Pages"
git branch -M main
git remote add origin https://github.com/programmer-s-picnic/react.git
git push -u origin main

If you later modify only the workflow, commit and push again:

git add .github/workflows/deploy.yml
git commit -m "Add GitHub Pages deploy workflow"
git push

7. Configure GitHub Pages correctly

Open the repository on GitHub:

Repository → Settings → Pages

Set the source to:

Source: GitHub Actions

Add the custom domain:

react.learnwithchampak.live

Then enable:

Enforce HTTPS

In DNS, add:

Type: CNAME
Name: react
Value: programmer-s-picnic.github.io

8. Fix the MIME type text/jsx error

The common error is:

Failed to load module script:
Expected a JavaScript-or-Wasm module script
but the server responded with a MIME type of "text/jsx".

This means GitHub Pages is serving the raw file:

/src/main.jsx

The fix is to use:

Settings → Pages → Source → GitHub Actions

9. Screenshot recap

Here is the whole process as a visual recap.

10. Final checklist