DEV Community

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

Posted on • Edited on

13

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more