create-react-app CSS and JS path

Question

After running Create React App's npm run build, the created index.html looks like this:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>React App</title><link rel="shortcut icon" href="/favicon.ico"><link href="/main.e606e04b6e0092a87205a9dc4662479c.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/main.35180d284d8a2058f717.js"></script></body></html>

Both, script and link src/href-attributes, point to the wrong direction. The leading / should be removed, because all generated files are in the same directory. Is this a bug or can I configure these paths somehow?

It's not a bug. It makes sure it get those particular files on different routes aside the index's — Ademola Adegbuyi
– Ademola Adegbuyi, Commented Jul 25, 2016 at 10:48

Dan Abramov · Accepted Answer · 2016-08-03 23:50:39Z

27

The generated files are supposed to be served from a web server. When you run npm run build, you should see the instructions on starting a simple local web server in that directory. If you deploy this directory to a real web server and serve index.html from the root, it will also work fine.

If the generated file referenced scripts without /, your site would break as soon as you add client side routing. For example, if an app is located at mysite.com but also handles a URL like mysite.com/about, relative paths would cause scripts to be loaded from mysite.com/about/*.js which would be a 404 error. This is why all paths start from root by default.

If you want to serve your app from a subdirectory (from example myuser.github.io/myproject), you will need to add "homepage" field in your package.json, for example:

  "homepage": "http://myuser.github.io/myproject"

Create React App will infer the correct root path based on the homepage setting. This feature is available since [email protected]

Please read the deployment instructions for more information.

edited Aug 3, 2016 at 23:50

answered Jul 25, 2016 at 10:54

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

OoDeLally Over a year ago

I set {"homepage": "."}, and then rerun phonegap run build. The links are changed to src="./main.123456.js". Now my app works on phonegap :-)

Dan Abramov Over a year ago

We don't officially support {"homepage": "."} even though it works in some cases. It breaks in other cases.

user2875289 Over a year ago

Looks life the {"homepage": "."} feature is supported with [email protected] and higher. Source: github.com/facebookincubator/create-react-app/blob/master/…

Caio Mar · Accepted Answer · 2020-10-25 15:08:53Z

0

I know this is old, but I was having the same problem. Before I had {"homepage": "./"} and changing it to {"homepage": "/"} in package.json seems to solve my problem.

answered Oct 25, 2020 at 15:08

Caio Mar

2,6645 gold badges33 silver badges40 bronze badges

Collectives™ on Stack Overflow

create-react-app CSS and JS path

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related