Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

create-react-app CSS and JS path

Tags:

reactjs

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?

like image 208
Chris Avatar asked Jul 25 '16 10:07

Chris


People also ask

How do I add CSS to a react app?

How to add CSS in Reactjs App 1 Starting with the CSS Stylesheet. This is quite straight forward as you should be familiar with it while working with HTML file. ... 2 Inline styling. ... 3 Styling React App with CSS Modules. ... 4 Adding Styles when any of the todos items is completed. ... 5 Using Destructuring. ...

How to use React create app with backend?

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them. When you’re ready to deploy to production, running npm run build will create an optimized build ...

What is react JSX?

React.js is the most popular front-end JavaScript framework. Developers use JSX, a combination of HTML and JavaScript, to create views in a natural way. Developers can also create components for blocks that can be reused across their applications. This module introduces React and the core skills developers need to use this powerful framework.

What is the best way to build a website with react?

The React team primarily recommends these solutions: If you’re learning React or creating a new single-page app, use Create React App. If you’re building a server-rendered website with Node.js, try Next.js.


1 Answers

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.

like image 188
Dan Abramov Avatar answered Sep 30 '22 03:09

Dan Abramov