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
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",
...
},
...
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()],
})
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 (1)
Gosh I had millions of variation but still without result.
My repo has "dist" folder but gh-page not using it for deploy. On the page I see partials of "handlebars" but not a builded page.
And I set up "gh-page" branch for building in settings>pages - no result