npm run build problem #604

zhangolve · 2016-09-08T07:51:43Z

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.

The text was updated successfully, but these errors were encountered:

daeschwed · 2016-09-08T08:06:48Z

you will need to use some kind of local server to get the app running.
see issue #432 for details

npm install -g pushstate-server && pushstate-server build

cheers

gaearon · 2016-09-08T08:08:07Z

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!

zhangolve · 2016-09-08T11:26:07Z

I still can not understand .
For example,I want to put the build project to my github pages and the url maybe like this: zhangolve.github.io/my-app

I have seen the user guide,but not fully understand what the part about deploying means.the part is:

After I run the npm run build command and create the build folder.where should I put the build folder ?I have put the folder to my github pages repo but I don't know if it is true.

And where should I executive the sequence of commands? the github pages repo root folder?

gaearon · 2016-09-08T12:17:35Z

The sequence of commands already pushes build folder to gh-pages branch (which is one of the ways to publish GH Pages, you don't need a separate repo).

Have you tried running it in your project folder?

There are two more alternatives:

If you use GH Pages as a separate repo, put the contents of the build folder in it, and that'll work. But it's easier to work with just one repo instead of two.
Recently GH added a new option. Just build your project normally, but then rename build folder to docs and add it to source control. Then make sure you enabled that option in GitHub UI: https://github.com/blog/2228-simpler-github-pages-publishing.

Does this help? In either case don't forget to set homepage in package.json.

zhangolve · 2016-09-08T13:20:32Z

@gaearon thank you so much.
According to your tutorial ，finally I succeed to do it.
just for test
http://hktkdy.com/docs/
LOL.

Shreiya · 2016-11-28T20:03:36Z

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

gaearon · 2016-11-28T20:09:36Z

@Shreiya You’re welcome! If you have any problems with this setup please feel free to file issues.

BrianNW · 2017-03-01T05:15:44Z

Hi. I'm having the same blank page problem when trying to deploy my app on GH pages. I've tried the aforementioned steps but to no avail. Question, where do you put
"homepage": "https://github.com/BrianNW/musicMaster",
exactly in the package.json file?
I've tried deploying to Heroku and am getting an application error but a successful build. I also deployed it to Netlify and all that is coming up is a blank page but successful build.

Timer · 2017-03-01T05:25:19Z

@BrianNW anywhere in the top-level object of package.json

gaearon · 2017-03-01T13:02:21Z

@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.

linweili1201 · 2017-03-27T02:34:19Z

I run the build file on apache serve but it display an empty page ,but the build js and css are sure loaded to the index.html. How can I solve the problem

gaearon · 2017-03-27T02:42:41Z

@linweili1201 This is not enough information to help you. Please see Deployment section in User Guide.

shabetya · 2017-03-30T14:44:19Z

@linweili1201 we have the same problem, just empty screen after app deployed on tomcat :(

gaearon · 2017-03-30T15:10:57Z

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

ahowe29 · 2017-09-24T22:45:20Z

@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

dvcarter · 2017-10-02T13:18:42Z

@BrianNW
Are you still having this issue with netlify?
If you use the netlify-cli, you must first run "npm run build" and then you can run "netlify deploy".
you will be prompted to choose a path to deploy. If you choose the "build" directory created by "npm run build", you should be able to access your site via the link provided at the end of the "netlify deploy" process.

gabrielmirandat · 2018-05-09T15:40:25Z

How can I deploy with nginx? It needs a static file, like index.html, to show when I access my url.

matthewjwhitney · 2018-06-07T01:32:13Z

I'm getting a blank page when i go to my URL. I had the same issue on another create-react-app but got it working by updating the homepage in the package.json file. I tried the same remedy with this create-react-app and its still not working.

this is the package.json code:

{ "homepage": "http://www.matthewjwhitney.com/myreads-react-app/", "dependencies": { "create-react-app": "^1.5.2", "prop-types": "^15.6.1", "react": "^16.3.2", "react-dom": "^16.3.2", "react-router-dom": "^4.2.2" }, "devDependencies": { "react-scripts": "1.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

I'm using godaddy cpanel file manager. The directory is correct there. Like I said I got the other one to work. not sure why this one isn't. not sure if you need more information to help troubleshoot. let me know. Thanks!

melitus · 2018-09-20T14:47:17Z

@gaearon I built a site with create-react-app. After following some instructions to host it on heroku, i lost some of the css features.What i have when run on localhost is quite different with what i have on heroku. This is the site : https://vanhack-success.herokuapp.com/ Please what may be the cause.Thanks for your help

daeschwed · 2018-09-20T15:08:29Z

@melitus you are apparently referencing the bootstrap base stylesheet with http, thus the browser is blocking the request for that particular stylesheet.
Try to replace the protocol with https, that should fix the issue you are experiencing:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

If that doesn't cut it, or you have any further questions, please consider opening a new issue as this one has been closed for quite a while.
Feel free to mention me in the new issue and we'll take it from there.

Cheers

melitus · 2018-09-20T17:35:57Z

@daeschwed I have tried replacing the protocol with https but still got the same result as before.It couldn't resolve the issue

gaearon closed this as completed Sep 8, 2016

lock bot locked and limited conversation to collaborators Jan 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

npm run build problem #604

npm run build problem #604

zhangolve commented Sep 8, 2016

daeschwed commented Sep 8, 2016 •

edited

Loading

gaearon commented Sep 8, 2016

zhangolve commented Sep 8, 2016

gaearon commented Sep 8, 2016

zhangolve commented Sep 8, 2016

Shreiya commented Nov 28, 2016

gaearon commented Nov 28, 2016

BrianNW commented Mar 1, 2017

Timer commented Mar 1, 2017

gaearon commented Mar 1, 2017 •

edited

Loading

linweili1201 commented Mar 27, 2017

gaearon commented Mar 27, 2017

shabetya commented Mar 30, 2017

gaearon commented Mar 30, 2017

ahowe29 commented Sep 24, 2017 •

edited

Loading

dvcarter commented Oct 2, 2017

gabrielmirandat commented May 9, 2018

matthewjwhitney commented Jun 7, 2018

melitus commented Sep 20, 2018 •

edited

Loading

daeschwed commented Sep 20, 2018

melitus commented Sep 20, 2018

npm run build problem #604

npm run build problem #604

Comments

zhangolve commented Sep 8, 2016

daeschwed commented Sep 8, 2016 • edited Loading

gaearon commented Sep 8, 2016

zhangolve commented Sep 8, 2016

gaearon commented Sep 8, 2016

zhangolve commented Sep 8, 2016

Shreiya commented Nov 28, 2016

gaearon commented Nov 28, 2016

BrianNW commented Mar 1, 2017

Timer commented Mar 1, 2017

gaearon commented Mar 1, 2017 • edited Loading

linweili1201 commented Mar 27, 2017

gaearon commented Mar 27, 2017

shabetya commented Mar 30, 2017

gaearon commented Mar 30, 2017

ahowe29 commented Sep 24, 2017 • edited Loading

dvcarter commented Oct 2, 2017

gabrielmirandat commented May 9, 2018

matthewjwhitney commented Jun 7, 2018

melitus commented Sep 20, 2018 • edited Loading

daeschwed commented Sep 20, 2018

melitus commented Sep 20, 2018

daeschwed commented Sep 8, 2016 •

edited

Loading

gaearon commented Mar 1, 2017 •

edited

Loading

ahowe29 commented Sep 24, 2017 •

edited

Loading

melitus commented Sep 20, 2018 •

edited

Loading