In this repo, we explain how to deploy a Vite React application created with a CICD pipeline. A Medium article is also available.
The website is deployed on GitHub pages.
All changes pushed to main branch will automatically be built and deployed using GitHub Actions.
- Navigate to the directory where you want the repo directory to be.
- Create ssd-app using
npm create vite@latest
- Use name ssd-app, select React, and select Typescript.
- Move into folder cd ssd-app
- Install using
npm i
- To test and see the application run npm run dev and view the app in your browser
- Run
npm install gh-pages --save-dev
- Install using
npm i
- Create GitHub repo and link up with our local repo:
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
- Update vite.config.js to include our 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()],
});
- Run npm run build in your terminal.
- Add /dist folder into your repo by running
git add dist -f
- Run
git commit -m "Adding dist"
- Run
git subtree push --prefix dist origin gh-pages
- Navigate to your GH Pages live page to verify your site is live.
- To allow GitHub action to update our build go to your repo Settings > Actions > General > Workflow permisions to select Read and write permissions. Our change will allow the action to update the build in the gh-pages branch with each push.
- 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
- Make a visible change to the web app you can use to verify the update.
- Run
git add .
- Run
git commit -m "add GH Action"
- Open your GH Pages web app to veriy your change has been made.
GitHub | ||
---|---|---|
Justin Snider | @sniderjustin | @sniderj |
Chihiro Snider | @cheesehero112 | @chihiro-snider |