Deploying Vite / React App to GitHub Pages

rashidshamloo

Rashid Shamloo

Posted on March 4, 2023

Deploying Vite / React App to GitHub Pages

Just follow these simple steps:

1. Install the gh-pages package (ctrl+~ to open the terminal in VS Code)

npm install gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode

2. In the package.json file add these lines before "build": "vite build",

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

3. In the vite.config.js file add this line before plugins: [react()],

base: "/YOUR_REPOSITORY_NAME",
Enter fullscreen mode Exit fullscreen mode

Change YOUR_REPOSITORY_NAME to the name of your GitHub repository.

4. In terminal type

npm run deploy
Enter fullscreen mode Exit fullscreen mode

šŸŽ‰ You now have a gh-pages branch in your repository and your app is deployed (you can check it under Settings -> Pages )

P.S. To update your app deployment, just run the npm run deploy command again.

šŸ’– šŸ’Ŗ šŸ™… šŸš©
rashidshamloo
Rashid Shamloo

Posted on March 4, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related