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

Avinash — Thu, 09 Jan 2025 04:48:52 +0000

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

A simple meme generator using ReactJS + FireStore

Avinash — Sun, 22 May 2022 06:20:41 +0000

This was my first ever ReactJS competition/hackathon, I did not win but I sincerely spent around 1 week coding for it and I was pretty happy with the outcome.

The challenge : To create a ReactJS app that can generate a meme in the following way, a left panel with left heading and image and a right panel with the right heading and image. The heading can be on top of the image or the bottom.

Github repo : https://github.com/avithe1/memegenerator

Demo : https://memegen-4c017.web.app/ (Read-only, create a firebase project to see 'Save Meme' functionality)

Although memegenerator is a very small project, the following code could be useful for beginners:

Use of TypeScript with ReactJS
Use of ContextApi for data sharing among components
Use of FireStore to store and retrieve meme data

I also wanted to make the web app responsive but it's a long way to go.

The website is hosted on Firebase hosting and now firebase also provides option for CI/CD github integration.

Development
The code is bootstrapped using
npx create-react-app memegen --template typescript

The application layout has two parts the header and the main section. The main section can toggle between CREATE and BROWSE.

All components that require props follow the following TypeScript convention:

interface Props {
    appmode: MenuOptions,
    menuSelect: (option: MenuOptions) => void
}

const Header: React.FC<Props> = ({ appmode, menuSelect }) => {
}

Hope the project helps someone trying to learn ReactJS and TypeScript.

P.S. I am not a pro with TypeScript in fact this was my first attempt with TypeScript. Looking for some feedback. Thanks.

Forem: Avinash

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

A simple meme generator using ReactJS + FireStore