DEV Community

SHARKZTECH
SHARKZTECH

Posted on

Hosting vite react app to github pages

Hosting a Vite-powered React app on GitHub Pages is a great way to quickly and easily deploy your app to the web. Below is a guide of how to do that:
step 1: install "gh-pages"

npm i gh-pages or yarn install gh-pages
Enter fullscreen mode Exit fullscreen mode

Github pages will help you automate the process of deployment
step 2: add the following in your 'package.json' to configure it to use "gh-pages" in deployment

...
  "scripts": {
...
    "build": "vite build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
...
  },
...
Enter fullscreen mode Exit fullscreen mode

step 3:add base in "vite.config.js" with github repository name as the value within slashes

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

export default defineConfig({
  base:"/repository_name/",
  plugins: [react()],
})
Enter fullscreen mode Exit fullscreen mode

step 4: run npn run build
step 5: run npm run deploy

Please note that, the above steps are for static hosting. If you have a dynamic web application then you need to look for other hosting options such as AWS Amplify, Firebase Hosting, Heroku, etc.

Top comments (0)

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.