Custom Domain with github pages doesn't work on refresh

Hi,
I just added a custom domain for the first time and it may have gone wrong. When I go to the environment and view deployment it goes to my custom domain and it works great. But if I type my custom domain in the browser (asianerasure.com) and I refresh it doesn’t work.
Does anyone have any ideas as to why?(It could be my code but that feels weird)

As a side question, is there a way that when I run npm run deploy it doesn’t revert back to the myusername.github.io domain? (I have my package.json set up with my custom domain)

Thank you for any help

Hello!

The main issue here is that you change the URL to /home on the client side (in your app). This is not a path that actually exists on the server (you only have an index.html file at the root) hence, when you do a page reload, you are getting a 404 error.

In order not to revert your custom domain, you need to make sure the CNAME files remain in your tracked branch (gh-pages).

Hope that helps,

Hi,
I see, would Next.js be a solution since react router is only client side?
For CNAME, it seems like every time I run npm run deploy it gets deleted. Which I’m not sure why, is there a way so it doesn’t automatically delete it?

Thank you!

@Oceanestars GitHub Pages does not support SPA (single-page app).

There are two ways you can make it work for you:

  • Change your router to the HashRouter (here is an article talking about it). Basically that means you will need to change your URLs from https://www.asianerasure.com/home to https://www.asianerasure.com/#home

  • Another “hacky” way is to duplicate your index.html file into a new 404.html file. When a 404.html file is defined, GitHub Pages will use it in place of our default 404 error page. If that file is a copy of your index.html, it will have all its routing logic (the client side React one) that will work as expected. Only drawback (if that’s a drawback for you) is that you now need to implement 404 yourself. I am sure it is straightforward with a React router.

Re CNAME file, I did not look at your package.json, but I suggest you edit your deploy script so it explicitly copy or create the CNAME file for you.