create-react-app: Building does not set relative paths to the assets in `static` folder

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?

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!

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'}/>

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.

@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?

@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?

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

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

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.

@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!

@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.

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

@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?

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