Deploy a React Vite app using GitHub Actions and GitHub Pages

4 min readMar 14, 2023

Hello & welcome! We are Chihiro & Justin, a software engineer couple who enjoy creating applications and learning together. Chihiro is a frontend specialist and Justin is an AI expert.

In this article, Chihiro will answer Justin’s questions about how to build React applications with a CICD pipeline with a detailed step-by-step guide.

Justin: I have to deploy quite a few React/ TypeScript applications. I’d like to use a CICD pipeline. What do you recommend?

Chihiro: There are many ways to achieve that, but I’ve been enjoying using Vite to set up my React application, instead of using Webpack or CRA (Create React App) because it’s a lot faster to set up my project.

As far as creating a CICD pipeline, if you are creating static sites only, I recommend using GitHub Actions and GitHub pages. It is free for standard GitHub-hosted runners in public repositories, and for self-hosted runners. (more about that here)

Justin: That sounds great, can you walk me through how to get started?

Chihiro: Sure thing! Get your VS Code (or code editor of your choice) & terminal ready!

Implementation Steps

1) Setup Web App Locally

Navigate to the directory where you want the repo directory to be.
Create vite-to-gh-pages (or your project name) using npm create vite@latest (read Vite documents for more information)
Use the name vite-to-gh-pages, select React, and select Typescript.
Move into folder cd vite-to-gh-pages
Install using npm i or npm install
To test and see the application run npm run dev and view the app in your browser

2) Setup GH Pages Deployment

Run npm install gh-pages --save-dev
Install using npm i
Create a GitHub repo and link up with our local repo:

*replace the URL below with your GitHub username and your project name

git init
git add .
git commit -m "first-commit"
git branch -M main
git remote add origin https://github.com/username/vite-to-gh-pages.git
git push -u origin main

4. Update vite.config.js to include your repo name:

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

// https://vitejs.dev/config/
export default defineConfig({
  base: '/vite-to-gh-pages/',
  plugins: [react()],
})

5. Run npm run build in your terminal.

6. Add /dist folder into your repo by running git add dist -f

7. Run git commit -m "Adding dist"

8. Run git subtree push --prefix dist origin gh-pages

9. Navigate to your GH Pages live page to verify your site is live. (Go to settings of your repo, and find “Pages” on the left side panel)

3) Setup GitHub Actions to rebuild your site on commit to the main branch

To allow GitHub action to update our build go to your repo Settings > Actions > General > Workflow permissions to select Read and write permissionsand click “Save”. Our change will allow the action to update the build in the gh-pages branch with each push to the main branch.

2. Add .github/workflows/node.js.yml the root project folder. Populate the file with the following text:

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - run: npm install
      - run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

3. Make a visible change to the web app you can use to verify the update.

4. Run git add .

5. Run git commit -m "add GH Action"

6. Run git push

7. Open your GitHub Pages web app to verify your change has been made. You can monitor the progress by clicking the “Actions” tab at the top navigation.

*Admire & celebrate your newly deployed app! 🎉

Chihiro: How did that work out for you?

Justin: It was very easy to deploy and keep updating the site using a CICD pipeline! Now I can spend more time working on solving real problems. Thank you!

4) Resources

See the deployed page here
vite-to-gh-pages repo on GitHub

5) Contributors

Justin Snider // GitHub: @sniderjustin LinkedIn: @sniderj
Chihiro Snider// GitHub: @cheesehero112 LinkedIn: @chihiro-snider

Thank you for reading. Please feel free to contact us with any questions or suggestions on topics for future articles.

email: chihiro.and.justin@gmail.com