CODEWITHSUNDEEP
reactjsecmascript-6reduxcreate-react-app
FE_Addict
FE_Addict

Reputation: 677

create react app - npm run build issues

I am using create-react-app to build an application and when I run npm run build it creates a build folder with static folder inside it which is expected.

build--> static

But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static which is why the page does not load properly as it is missing the assets .

Is there any config setting I can do to fix this problem ?

Upvotes: 10

Views: 34912

Answers (3)

Milton Castro
Milton Castro

Reputation: 1807

If all you want is to run your app, all that you have to do is run the command: npm start

But, if you are really trying to prefix the static references to upload your code on an specific subdirectory you should add on your package.json the homepage you want to use on your create-react-app.

So, if you want your react app to use /build in the beginning of each reference you should add the following line to your package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/build",  
  ...
}

The following message is displayed when you generate your build without the homepage in the configurations:

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build```

Upvotes: 16

Dan Abramov
Dan Abramov

Reputation: 268265

But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static

This behaviour is expected.

You're supposed to deploy the build folder and serve the application from it. Since index.html is inside build, it would be served for /, and files in build/static/* will be served for /static/*.

For more specific instructions for this, please read the Deployment section of the User Guide.

Upvotes: 2

Joe C
Joe C

Reputation: 3546

It sounds like you're trying to use unimported assets.

I prefer to create an assets folder and place these sort of files here, and then import/use them accordingly.

From the documentation:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

If you really want to use the public folder, you can use the PUBLIC_URL variable.

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Upvotes: 1

Related Questions