日本語Japan Flag
英語Great Britain Flag
Deploying Vite / React App to GitHub Pages

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.