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.
zhangolve
All 21 comments
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
daeschwed
on 8 Sep 2016
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!
gaearon
on 8 Sep 2016
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?
zhangolve
on 8 Sep 2016
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:
1) 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.
2) 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.
gaearon
on 8 Sep 2016
@gaearon thank you so much.
According to your tutorial 锛宖inally I succeed to do it.
just for test
http://hktkdy.com/docs/
LOL.
zhangolve
on 8 Sep 2016
@gaearon your quick tutorial just helped a fresh react-developer deploy her portfolio site.
THANK YOU.
Shreiya
on 28 Nov 2016
@Shreiya You鈥檙e welcome! If you have any problems with this setup please feel free to file issues.
gaearon
on 28 Nov 2016
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.
BrianNW
on 1 Mar 2017
@BrianNW anywhere in the top-level object of package.json
Timer
on 1 Mar 2017
@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 1 Mar 2017
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
linweili1201
on 27 Mar 2017
@linweili1201 This is not enough information to help you. Please see Deployment section in User Guide.
gaearon
on 27 Mar 2017
@linweili1201 we have the same problem, just empty screen after app deployed on tomcat :(
shabetya
on 30 Mar 2017
@shabetya Have you fully read and followed this section? Most problems happen when people miss a few things there.
gaearon
on 30 Mar 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 25 Sep 2017
@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.
dvcarter
on 2 Oct 2017
How can I deploy with nginx? It needs a static file, like index.html, to show when I access my url.
gabrielmirandat
on 9 May 2018
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!
matthewjwhitney
on 7 Jun 2018
@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
melitus
on 20 Sep 2018
@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
daeschwed
on 20 Sep 2018
@daeschwed I have tried replacing the protocol with https but still got the same result as before.It couldn't resolve the issue
melitus
on 20 Sep 2018
Related issues
rdamian3
路
3Comments
alleroux
路
3Comments
onelson
路
3Comments
jnachtigall
路
3Comments
alleroux
路
3Comments
Most helpful comment
When you run
npm run buildit displays instructions on how to run the server: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!