Geek Answers Handbook

CSS and JS path to create-reaction-application

After running Create React App npm run build 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 master / must be deleted, because all the generated files are in the same directory. Is this a mistake or can I somehow configure these paths?

+7
reactjs
source share
1 answer

Generated files must be serviced from a web server. When you run npm run build , you should see instructions for starting a simple local web server in this directory. If you expand this directory on a real web server and feed index.html from the root, it will also work fine.

If the generated file refers to scripts without / , your site will break as soon as you add client-side routing. For example, if the application is located at mysite.com but also processes a URL, such as mysite.com/about , relative paths will load scripts from mysite.com/about/*.js , which will be 404 error. That's why all paths start with root by default.

If you want to submit your application from a subdirectory (from the example myuser.imtqy.com/myproject ), you need to add the "homepage" field to package.json , for example:

  "homepage": "http://myuser.imtqy.com/myproject"

Create a React App will display the correct root path based on the homepage parameter . This feature is available because react-scripts@0.2.0

Read the deployment instructions for more information.

+20
source share

More articles:


All Articles