ReactJS app published to Github pages with custom domain

6
votes

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?

2
reactjsgithubgithub-pages

2 Answers

4
votes

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.

0
votes

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",