Deploy Vite React project with React router without 404 on Github pages

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.

1. vite.config.ts (which I was already doing following the articles)
2. 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-name hereafter.

• npm install gh-pages --save-dev

• add 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.