Create-react-app: Deploying to GitHub Pages and using %PUBLIC_URL%

[ryanwiemer]

I have followed the directions in the readme to successfully set up and deploy my app to GitHub Pages for a website with a custom domain. When I run npm run deploy it runs everything smoothly and pushes it out to the correct gh-pages branch. The one question I have is related to the %PUBLIC_URL% prefix. It seems like those are being omitted or ignored and instead I see a relative path. Is that something I can add in a config other than in my package.json? As it stands now the following URL will not get output correctly:

Example:
In public/index.html
<meta property="og:image" content="%PUBLIC_URL%/example.jpg" />

this gets output as:
<meta property="og:image" content="/example.jpg" />

Obviously I can simply "hardcode" the actual URL as an easy workaround but I was just curious as to why this was happening.

Thanks,
Ryan

[Timer]

Have you added the homepage field to your package.json?

[ryanwiemer]

@Timer Yes, I have the URL in the homepage field on my package.json.

https://github.com/ryanwiemer/cal-factor/blob/master/package.json#L4

[Timer]

That is the correct path, as / will be the root-most of your domain, disregarding any sub-paths you use for client-side routing. Why do you need the full URL to be displayed?

[ryanwiemer]

Great question. I suppose it doesn't matter too much. The only thing in particular that seemed to require an absolute path was the following:

• open graph image
• twitter card summary image

I was more interested to see if something was wrong with how I was using the %PUBLIC_URL% prefix or if it was a bug.

Thanks,
Ryan

[Timer]

Nope, you're using it correctly!
If you try setting homepage to http://www.example.com/foo you'll see the path change to /foo/example.jpg.

We ask for the full URL but only the path matters.

[ryanwiemer]

Got it. I appreciate the help!

[aeciolevy]

Hi, guys.
I deployed to GitHub Pages but it can't load the static files, the js and css.

I tried a log of things but it does not work.. If a set a custom domain in Github, should I change homepage on the package.json to my custom domain?

CNAME = www.herbertviana.com

"homepage": "https://aeciolevy.github.io/HerbertBlog/"

[Timer]

Yes, your homepage should be www.herbertviana.com.

[aeciolevy]

@Timer I changed the homepage but it does not work.

I don't know what I can do.

My domain is from GoDaddy, on CNAME www I pointed to aeciolevy.github.io
I tried to change it to aeciolevy.github.io/herbertblog however it is not allowed.

I guess the the dns it is ok, because it can get the index.html file font awesome that is there too.

But never get the files inside static file.

https://github.com/aeciolevy/HerbertBlog/tree/gh-pages

[Timer]

Sorry, I didn't include the http:// portion in my comment -- make sure it's prefixed correctly (npm start should yell at you right now)!

[Timer]

Yeah, it should be because of the missing http://.

[aeciolevy]

@Timer it works, thanks a lot!!!!

[hauph]

@Timer So sorry for reopening this. I have the same issue like @aeciolevy and @ryanwiemer.

I added 'homepage' to my package.json already, which is
"homepage": "http://hauph.github.io/#/currency-converter"

I added '#' in between 'http://hauph.github.io/' and '/currency-converter' because I followed a solution in this link: https://stackoverflow.com/questions/46056414/getting-404-for-links-with-create-react-app-deployed-to-github-pages

I did so and I also have 'http://' like @Timer said, but it still can not work. Do I have to change it to 'https://'?

It only works after I have fixed the routes to my css, js and images in 'index.html' file and the static folder manually (hardcore way) on gh-pages branch (https://hauph.github.io/currency-converter/)

What must I do to make github pages understand all the routes to my css, js and image files at the first place instead of fixing them manually on gh-pages branch?

The image problem is the worst since github pages get completely wrong route. Instead of 'https://hauph.github.io/currency-converter/static/media/Loading_icon.f4404720.gif', it becomes 'https://hauph.github.io/static/media/Loading_icon.f4404720.gif', which lost the route 'currency-converter' and therefore make it unable to load the image.

I am grateful for any support out there.