Create-react-app: 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 buildstaticcssmain.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

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

"homepage": "."

1. link css in index.html

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

1. 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).

[Timer]

Hi there! react-scripts v0.9.0 was just released which adds support for building for relative paths. You may read how to do so here.

Please test it and don't hesitate to reach out if this doesn't solve your specific use case!

[kellyrmilligan]

@Timer I have what I think is an interesting use case. i'm running my dev environment in vagrant, and proxying create react app running locally on my host os(os x). I would like to have the local paths be relative as well, so something like if homepage was set to http://www.example.com/cra, and for builds this sets the path to /cra/static/bundle.[hash].js.

is there a way to have it set the path this way when developing locally as well? I may end up having multiple CRA based apps, and want them all under sub paths running locally.

is there a way to do this?

[gaearon]

is there a way to have it set the path this way when developing locally as well? I may end up having multiple CRA based apps, and want them all under sub paths running locally.

You probably want https://github.com/facebookincubator/create-react-app/issues/1582, although even that wouldn't let you run multiple servers on one port I think.

[ferezoz]

@Timer Hello i just changed to "homepage": "." as suggested in the docs you shared and it worked for everything except asset-manifest.json, my assets are still serving as absolute paths, do i have to do something else?

[robinvdvleuten]

@Timer I've created a PR for this issue mentioned by @fernando-gl

[ferezoz]

@Timer @robinvdvleuten I am not sure how asset-manifest.json is used to load the assets but in static/css/main.XXXXXX.css my fonts have wrong relative paths.

[gaearon]

@fernando-gl Please file a new issue with instructions to reproduce and a demo. This is the kind of issue that is very hard to discuss without an example. Thanks!

[lennartj]

This is still a problem, which I have had to fix with a rewrite rule in the web server serving the production build. Example below, and a small recipe for the rewrite rule required as well.

Description

Given a CSS file ("global.css") which links to a font placed within the static folder public/fonts:

[project] / src / styles / global.css
[project] / public / fonts / Fondamento-Regular.ttf

In order to work in development mode, the entry in global.css must contain the entry url(/fonts/Fondamento-Regular.ttf):

@font-face {
font-family: 'Fondamento';
font-style: normal;
font-weight: 400;
src: local('Fondamento Regular'), local('Fondamento-Regular'), url(/fonts/Fondamento-Regular.ttf) format('truetype');

Assuming that the context path of the production build should be /mithlond, the package.json entry should be "homepage" : "https://[someServerName]/mithlond",.

However, running the npm run build to generate a production build, the links inscribed within the static/css/main.[hash].css do not contain the context path, but are copied verbatim:

url(/fonts/Fondamento-Regular.ttf)

(Somewhat clunky) Workaround recipe

1. Ensure that your static resources do not reside within directories "public/js" or "public/css". I chose "public/font" for the fonts in the case per above.

2. Create a text substitution ("rewrite") rule within the server, on the context path of the application. For nginx, the rule is as follows (and repeat the sub_filter bit for all directories of static paths you include in your application:

   location /mithlond/ {
   # Prepend the /mithlond/ path to outbound font links
   sub_filter "/fonts/" "/mithlond/fonts/";
   sub_filter_once off;
   sub_filter_types *;
   }

The sub_filter above effectively replaces the malformed URLs embedded in the compiled CSS resource so that the outbound links work for clients.

[JarLowrey]

Dec 2017 update: Just put the imgs folder in the public folder and set the paths to /imgs/img1.png.

[srbin25]

I have problem when build my react app and then do command npm i -g serve , then serve -s build -p 80, because wish first looking my app on wamp widrh apche server on port 80.
And in this case I don't see picture on my web page. Why?? May be some is wrong in webpack.config.js file?? I can see only picture Base64??

[AmitUmrikar]

I wanted to change default url for create-react-app from " localhost:3000 " to "localhost:3000/something" in development env and i don't want to run eject. Being a newbie to create-react-app am unable to do so. please give me solution if anyone have . Thanks in advance

[bugzpodder]

Hi @srbin25 @AmitUmrikar please open an new issue if you have a new question, thanks!