create react app - npm run build issues

Question

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 ?

Answer 1

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

Answer 2

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.