create-react-app: npm run build problem

I have got my project done,but when I npm run build ,I got the build folder,but when I open the index.html in build folder by chrome ,I just got a blank page,but actually I want to get it can be visual .

the index.html codes in build folder like this:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/static/media/favicon.fd73a6eb.ico"><title>React App</title><link href="/static/css/main.9a0fe4f1.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.f39a5fd1.js"></script></body></html>

what can I do to build the project? p.s I have read the USER GUIDE ,but not get a perfect answer.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 21 (7 by maintainers)

Most upvoted comments

When you run npm run build it displays instructions on how to run the server:

npm i -g pushstate-server
pushstate-server build
open http://localhost:9000

You need to run a static server for these files, just like you would need to do it in production. Opening just HTML file from file:// URL won’t work because the static paths are absolute rather than relative. And they are absolute because we want client-side routing to work (which does not work with relative asset URLs).

I hope this helps!

+10

gaearon on Sep 8, 2016

@BrianNW

  "homepage": "https://github.com/BrianNW/musicMaster",

is not the correct setting. You need to use the deployment URL as the homepage setting:

  "homepage": "https://BrianNW.github.io/musicMaster",

Additionally, you need to run npm run build after changing that setting. Please follow this guide exactly, and it will work.

If not, please file a new issue.

gaearon on Mar 1, 2017

@gaearon your quick tutorial just helped a fresh react-developer deploy her portfolio site. THANK YOU.

Shreiya on Nov 28, 2016

@shabetya Have you fully read and followed this section? Most problems happen when people miss a few things there.

gaearon on Mar 30, 2017

@gaearon I’m trying to deploy a react app for the first time. I have it running on localhost:3000 but want to move it to my website https:www.alliehowe.tech/hauntedHouse. When I run npm build run it successfully creates a build folder and I put the contents of the build folder in my host’s file manager in the https:www.alliehowe.tech/hauntedHouse directory. However when I go to that url it’s a blank white page.

This is my package.json { “name”: “hauntedhouse”, “version”: “1.0.0”, “description”: “smith haunted house”, “main”: “index.js”, “scripts”: { “build-css”: “node-sass-chokidar src/ -o src/”, “watch-css”: “npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive”, “start-js”: “react-scripts start”, “start”: “npm-run-all -p watch-css start-js”, “build”: “npm run build-css && react-scripts build”, “test”: “echo "Error: no test specified" && exit 1”, “eject”: “react-scripts eject” }, “repository”: { “type”: “git”, “url”: “git+https://github.com/ahowe29/hauntedHouse.git” }, “author”: “ahowe”, “license”: “ISC”, “bugs”: { “url”: “https://github.com/ahowe29/hauntedHouse/issues” }, “homepage”: “https://alliehowe.tech/hauntedHouse”, “dependencies”: { “react”: “^15.6.1”, “react-bootstrap”: “^0.31.3”, “react-dom”: “^15.6.1”, “react-redux”: “^5.0.6”, “react-router-dom”: “^4.2.2”, “redux”: “^3.7.2” }, “devDependencies”: { “babel-core”: “^6.26.0”, “babel-loader”: “^7.1.2”, “react-scripts”: “1.0.10”, “babel-preset-es2016”: “^6.24.1”, “babel-preset-react”: “^6.24.1” } }

This is my created html file in the newly created build folder. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Haunted House</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"></head><body><div id="root"></div><script src="bundle.js"></script><script type="text/javascript" src="/hauntedHouse/static/js/main.0e1d734f.js"></script></body></html>

It also may be worth noting that there is no bundle.js file in the build folder. Any ideas? Thanks in advance

ahowe29 on Sep 24, 2017