Chris Chris - 1 year ago 207
React JSX Question

create-react-app CSS and JS path

After running Create React App's

npm run build
, the created
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>

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

Answer Source

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 but also handles a URL like, relative paths would cause scripts to be loaded from*.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, you will need to add "homepage" field in your package.json, for example:

  "homepage": ""

Create React App will infer the correct root path based on the homepage setting. This feature is available since react-scripts@0.2.0

Please read the deployment instructions for more information.