This content originally appeared on DEV Community and was authored by Avinash
Hello,
Yes, its pretty simple to publish a Vite React project on Github pages. You will find many articles that show how this is done. I am talking about the simple publish here and not about github actions.
I followed the exact steps mentioned, with every possible configuration that was explained, of course the project got published but I always got a blank page on the live URL with 404 errors when I inspected the console.
My URL structure was : https://<username>.github.io/<repo-name>
After some tinkering I realized that this issue was because I was using React Router in the project. The fix to this issue, I had to set up the base URL in two places.
- vite.config.ts (which I was already doing following the articles)
- BrowserRouter
Its the second point that took sometime to figure out. All that was needed to be done was <BrowserRouter basename="/repo-name">
This fixed the 404 issues I was facing when deploying to github pages.
To summarize :
Your Vite-React project repository should be committed to github.
Take a note/copy the Repository name as it is in the Settings>General tab on github, I will call this
repo-namehereafter.npm install gh-pages --save-devadd the following to your package.json
"homepage" : https://<username>.github.io/<repo-name>
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
- add the following to your vite.config.ts
export default defineConfig({
base: "/repo-name",
plugins: [react()],
});
- add the following to you BrowserRouter
<BrowserRouter basename="/repo-name">
- run command
npm run deploy
Wait for a few seconds , check the github repository Settings>Pages tab if needed.
Your website will be published to https://<username>.github.io/<repo-name>
Note : be careful with the forward slashes in the repo-name, I have used only /repo-name and not /repo-name/
This also changes the localhost URL to http://localhost:5173/repo-name
I hope this helps anyone who is stuck with a blank page and 404 asset/js files not found in console issue when publishing a Vite React project with React Router to Github pages. Thanks.
This content originally appeared on DEV Community and was authored by Avinash
Avinash | Sciencx (2025-01-09T04:48:52+00:00) Deploy Vite React project with React router without 404 on Github pages. Retrieved from https://www.scien.cx/2025/01/09/deploy-vite-react-project-with-react-router-without-404-on-github-pages/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.