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
2. In the package.json file add these lines before "build": "vite build",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
3. In the vite.config.js file add this line before plugins: [react()],
base: "/YOUR_REPOSITORY_NAME",
Change YOUR_REPOSITORY_NAME to the name of your GitHub repository.
4. In terminal type
npm run deploy
🎉 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.
Top comments (18)
Clear, informative, and straight to the point.
Thanks for this article it helps a lot :)
Hey man, I just want to say thank you very much. This worked for me very easily and I am very thankful for your help!
Glad you like it😇
Thank you for your article, it worked for me.
You're welcome, glad to be of help.
Thanks a lot, it worked
You're welcome.
Thank you. Recently I have a trouble in deployment of my vite project to github.
Thanks again.
You're welcome. glad it could help with deployment of your project.
it not work for me :((
Please be more specific. what happens after following the steps and running the
npm run deploycommand?it worked , i had to wait more than 15 minutes and check again , thanks bro
the page deployed successfully but showing the error page . the image on the error page is also not loaded and the app is routed
here is the page link : motiurrafi.github.io/reactAPP/
I cant's say without access to the source code but sometimes adding/dropping the "/" at the start of image paths could fix the problem (if you're using the public folder for your images)
I did everything, after "npm run deploy" when I go to the app's url I see white screen and in the console: "Failed to load resource: the server responded with a status of 404 () index-d526a0c5.css"
I can't really tell without knowing your code, but that sounds like the css path in your built "index.html" is not correct.
In "index.html" in your dist folder check this line:
<link rel="stylesheet" href="/YOUR_REPOSITORY_NAME/assets/index-SOMETHING.css">
and see if it reflects your repository name or not.
Also double check you have set the correct "base" in "vite.config.js":
base: "/YOUR_REPOSITORY_NAME",I'm getting this error : Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).
What the error is saying is that Git/GitHub is not set up properly in your project.
Check this link to see how to connect your local files to your GitHub repo.
If it still doesn't work, try cloning your repo to another directory and try again.