DEV Community

SHARKZTECH
SHARKZTECH

Posted on

Hosting vite react app to github pages

#react #github #beginners #hosting

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 (1)

Collapse
 
aleksandrpod profile image
Aleksandr Podmazko • • Edited

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