The "npm run build" command is not working

Question

My problem is the following when executing the command (To prepare the files for production):

npm run build

He doesn’t make any mistakes, apparently everything worked out:

c:\bin\node-v8.9.2-win-x64\teste_novo_projeto\my-app>npm run build

> [email protected] build c:\bin\node-v8.9.2-win-x64\teste_novo_projeto\my-app
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  35.81 KB  build\static\js\main.ffeb9945.js
  420 B     build\static\css\main.8b8d5523.css

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:

  npm install -g serve
  serve -s build


c:\bin\node-v8.9.2-win-x64\teste_novo_projeto\my-app>

Although it does not present any error, when executing the page, on the screen it presents all blank, as if there was nothing on the page:

But when I execute the command:

npm start

It works normally:

To da o build she presents this message, which is vague for me:

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:

Do I have to give a "build" for each specific host I use? Because of this message I tried to run the page on an apache server but continued the blank page.

This application does not consume any webservice it simply converts the Base64 input to a string or image.

There is something I have to set up as "package.json" before "build"?

Update

If I edit the file "index.html" the path

src="/static/js/main.ffeb9945.js" 

for

src="static/js/main.ffeb9945.js"

It works, but I wanted to know the correct way to make this change, even before giving the build.

Update

package json.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "homepage": "http://localhost/react_build/",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Update - Response of the answer of "Jan Cassio"

The problem is that the path is initialized with "/", so it will only work if the project is at the root of the host, I have already done tests using an apache server and also local in both cases the problem happens, but if I’m in the build created and manually edit the index.html and remove this bar, it works normally, it solves the problem, but I wanted to do it the right way, I’m starting now with React know very little, not to say anything, but I believe that there is a way of configuration that it 'Compile'(build) working, I strongly believe that I am doing something wrong at the time of build, what I need is to create a project and run on an apache server.

Answer 1

This happens because when you run your index.html prefixed file://, it will try to load the dependencies relative to this path and as it has no application in http:// serving these Aces, you won’t really find.

Another thing, some browsers have security policy that prevents script execution in file://. Soon your page will probably give a Exception and it won’t work either.

Always run the project in an application that serves it in http, because it’s the right way and you probably won’t have any problems.

If you want to see your project compiled in the folder build running, you can run a http server pointing the root to it.

On mac or linux, you can run this command inside the folder build:

python -m SimpleHTTPServer

That will raise one http server in localhost:80.