ReactJS app published to Github pages with custom domain

Question

I have a reactjs application that I created using the create-react-app. I have installed gh-pages and successfully deployed it to github pages (project page) using the following command:

gh-pages -d build

However, when I add a custom domain to my github project repository my application could not load the js and css files. My browser is looking for the following files:

http://my.custom.domain/<repo name>/static/css/main.caaf9ea4.css
http://my.custom.domain/<repo name>/static/js/main.76fabd7f.js

The correct link to load these files should be:

http://my.custom.domain/static/css/main.caaf9ea4.css
http://my.custom.domain/static/js/main.76fabd7f.js

In the GitHub repo pages, I have set custom domain to be 'my.custom.domain' (root domain without www). The source is gh-pages branch.

My DNS settings are:

A record, @, value: 192.30.252.153
A record, @, value: 192.30.252.154
CNAME record, www, value: username.github.io

Any ideas how to change the settings so that repo name is not added to the domain?

Kerry Gougeon · Accepted Answer · 2018-03-30 08:43:25Z

4

Make sure your package.json have the attribute homepage. e.g.

  "homepage": "https://<git-USER>.github.io/",

That's literally what I just did with my cra projet. If you want to take a look on my project just look at the develop branch. However, I haven't use gh-pages -d build. I just built the project myself and create the branch gh-pages and put the content of my build into it. It should be the same though.

answered Mar 30, 2018 at 8:43

Kerry Gougeon

1,33712 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

silverlw Over a year ago

My GitHub page is for a project repo, so I have put the following attribute into package.json "homepage": "https://<gith-user>.github.io/<repo_name>",

Kerry Gougeon Over a year ago

And this is why your browser is looking for my.custom.domain/<repo name>/static/css/main.caaf9ea4.css

silverlw Over a year ago

after changing the homepage attribute to point to my username.github.io, the site becomes not found. I believe the "homepage" attribute should be "git-user.githbu.io/reponame", according to create-react-app doc

Kerry Gougeon Over a year ago

I know, but when I switched to a custom domain I had to change my homepage setting. Anyway, have you done the step 5 of your guide? Added the CNAME file to your project. If you look into my github project I linked on my last comment, it is a create-react-app project hosted by gh-pages with a costum domain

silverlw Over a year ago

I have finally solved this. Since I am using custom domain, I have set the homepage attribute to be https://my.custom.domain/ . I have also inadvertently deleted the CNAME file. After adding back the CNAME file, the site comes back to life. Thanks @kerrygougeon for your help.

|

David Douglas · Accepted Answer · 2020-03-09 19:06:55Z

2

Adding a copy CNAME script to my package.json scripts worked for me as it wasn't being published to gh-pages branch automatically in the React Create App build dir.

"copy": "cp ./CNAME ./build/CNAME",
"predeploy": "yarn build && yarn copy",

answered Mar 9, 2020 at 19:06

David Douglas

10.5k2 gold badges57 silver badges55 bronze badges

Collectives™ on Stack Overflow

ReactJS app published to Github pages with custom domain

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related