Deploy Vite App to Github Pages

Github Pages

Github-pages is a free hosting platform which you can use to showcase your projects, host your portfolio, a blog or even share your resume with your employers. You can as well add a custom domain to your github page, isn't that amazing. This post will guide you on how to host a vite.js app on Github-pages.

If you are looking for some other hosting platforms which you can use to deploy your single page apps, kindly refer to this post Top 6 Free Hosting Platforms for Deploying Your React App where I share a complete guide on how to deploy your to each of them.

Deploying a vite.js app to GitHub Pages is a straightforward process that can be completed in just a few steps.

Step 1: Vite Configuration

To configure your vite.js app, kindly create a file vite.config.js in the root directory of your app folder. The newly created confige file should contain the below code snippet:

copy 
import { defineConfig } from "vite";

export default defineConfig({
  base: '/<REPO>/'
})

Now to set the correct base in vite.config.js, you need to change /<REPO>/ to the name of the repository where you are pushing your code. Eg: https://github.com/<USERNAME>/techcoach-clone then base should be set as /techcoach-clone/.

Step 2: Push code to repository

You need to push your current code to github. If this is a new project and git hasn't been initialized then you need to run this code in your project terminal:

copy 
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<USERNAME>/<repo>
git push -u origin main

Kindly replace and with your username and the repository of your project. if git has been initialized in it and you haven't pushed your code before, then run the following:

copy 
git remote add origin https://github.com/<USERNAME>/<repo>
git branch -M main
git push -u origin main

Step 3: Github Actions workflow

To setup the workflow for your vite app deployment, you need to head over to the settings on the github repo where your code is living, then go to Pages, under Build and deployment and choose the source as GitHub Actions, this will lead you to create a workflow that builds and deploy your project automatically. Kindly choose "Static HTML" and configure the workflow. Replace the code in there with this code snippet:

copy 
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

After replacing the entire code, then use the Start commit button to commit your workflow and Commit new file to the repository. You now have your website live like visit https://<USERNAME>.github.io/<REPO>/ to view your app.

Conclusion

Deploying a vite app to github page is a very simple task which can be done in few minutes without going to the hassel of doing a lot of configurations to get your app up and running. With this you can deploy your clients app for demo purposes or your portforlio projects which uses vite under the hood.

Happy coding!