DEV Community

Cover image for Deploy Vite React App on Github
Hidayt Rahman
Hidayt Rahman

Posted on • Edited on

Deploy Vite React App on Github

Follow two step to publish

Step: 1

Configure repo in vite.config.js

Set the base in vite.config.js.

If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to "/".

If you are deploying to https://<USERNAME>.github.io/<YOUR_REPO_NAME>/, for example your repository is at https://github.com/hidaytrahman/chepo, then set base to "/chepo/".

Example:

export default defineConfig({
  base: "/<YOUR_REPO_NAME>/", // add the base as repo name as "/yourRepoName/"
  plugins: [react()],
});
Enter fullscreen mode Exit fullscreen mode

Step: 2

Install and setup gh-pages

Now, Install the gh-pages package

yarn add -D gh-pages or npm install gh-pages --save-dev

Add below line in the package.json file

 "homepage": "https://<USERNAME>.github.io/<YOUR_REPO_NAME>/",
Enter fullscreen mode Exit fullscreen mode

Also add these beautiful scripts

 "predeploy": "npm run build",
 "deploy": "gh-pages -d dist"
Enter fullscreen mode Exit fullscreen mode

we are done with the configuration, let's run the command to deploy.

yarn run deploy

Or

npm run deploy

Yayyy!!! see it in action in 2-3 minutes.

Top comments (4)

Collapse
 
lico profile image
SeongKuk Han

Easy to step, thank you for the article! Here is just my one of opinions, I think that would be good to mention Github in the title.

Collapse
 
hidaytrahman profile image
Hidayt Rahman

Thank you! Great suggestion I will update the title

Collapse
 
martydevs profile image
Andre Marti

Nice article, i"ll try it, only works for static data right?

Collapse
 
hidaytrahman profile image
Hidayt Rahman

Thank you! Yes but you can use API for dynamic stuff.