Building does not set relative paths to the assets in `static` folder

[vgrafe]

This leads to problems when adding the built react app in a subfolder of a static website (my github.io page is a good example of the use case, the folder /react-range-progress contains a react app built with create-react-app, but does not find the assets if I do not change

<script type="text/javascript" src="/static/js/main.36dfbdaf.js">

to:

<script type="text/javascript" src="static/js/main.36dfbdaf.js">

in the first case, the browser will look for the js file in the root folder.

[gaearon]

Did you get a chance to read the instructions posted in the console when the build finishes? I believe they should explain how to fix the problem. If not can you please show a screenshot of npm run build output?

[vgrafe]

Sorry about that. I just found out about "homepage" in the code. I'll close.

[gaearon]

No worries, I just want to verify the build outputs instructions correctly.

[vgrafe]

I confirm that now I ejected/reverted then npm i-ed my codebase, I can see the instructions after building. I don't know how I did miss that output before - it is exactly on point.

Thanks for your time!

[gaearon]

Got it, thanks for explaining. It was added relatively recently so if you ejected, you might have used an earlier version at the time.

[iRoachie]

@gaearon What if I want to have the site at multiple places? Would I have to keep changing the homepage and run build??

Is there a way I can heave the links in the build/index to not have the leading slash?

[gaearon]

The problem with what you're suggesting is that this breaks client sure routing. The vast majority of newly built React apps have client side routing. Many people new to that idea get confused when their JS stops working because they loaded localhost:3000/todos/active and the JS is requested from localhost:3000/todos/active/static/js/bundle.js. This obviously won't work but this is exactly what you get it paths in the HTML are relative so that's why we opted to make them absolute by default.

I think as a workaround you can specify ./ as the homepage if you really intend to host your app at different paths, some at the root and some not. I understand this is confusing, but this project is optimized for single-page apps, and most of them have client side routing and are served from a consistent location.

[iRoachie]

@gaearon Thanks for the tip. A good set of people also use it for parts of an application and not necessarily the entire application or in subfolders. Just to float everyone's boat I think we can put that workaround './' in the README so that they know.

[gaearon]

If it works, sure, feel free to send a PR to usage guide!

[new-xd]

./ not worked for me.
my dir tree

src
    assets
        css
            style.css
        images
            topBg.jpg

style.css

.titleBar {background: #cc000c url(../images/topBg.jpg) no-repeat right;}

the final build\static\css\main.cfecb7b9.css

.titleBar{background:#cc000c url(./static/media/topBg.5c47a7a8.jpg) no-repeat 100%}

then the browser will fail to get the jpg

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///storage/emulated/0/build/static/css/static/media/topBg.5c47a7a8.jpg

I develop app for mobile, and we need put build folder to anywhere on mobile.
Any advice?

[new-xd]

I make it work with the blow steps

1. move css and image to public

src
    ...
public
    index.html
    favicon.ico
    assets
        css
            style.css
        images
            topBg.jpg

2. specify . as homepage ( ./ not work)

"homepage": "."

3. link css in index.html

<link rel="stylesheet" href="%PUBLIC_URL%/assets/css/style.css">

4. change img src like this

<img src={process.env.PUBLIC_URL + '/assets/images/topBg.jpg'}/>

[gaearon]

Going to reopen this and tag as a bug so we come back to this later.
The workaround with ./ is buggy (and in general annoying).