I'm following the w3schools tutorial on react.
So the first thing I'm told to do is to create the create-react-app : npm install -g create-react-app
Then create a React application named myfirstreact : npx create-react-app myfirstreact
The app get created and every thing seems good at this point.
Now I'm asked to Run the React Application by doing the following: cd myfirstreact and npm start, and this is what the Terminal display
myfirstreact#0.1.0 start /root/myfirstreact
react-scripts start
Compiled successfully!
You can now view myfirstreact in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.43.128:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
No new window gets opened in Firefox, nothing happens.
So I open the link http://localhost:3000 on Firefox and all I got is "EOF", I check the page source and the only thing there is is : EOF (which is the same thing I get If I access http://localhost:3000 on Firefox without starting react )
And what I want is to get the default react app.
Edit: I just downloaded Opera browser and when tried, The app works just fine. So the problem seems to be a Firefox problem.
Here you can see all the screenshots.
Terminal 1
Terminal 2
Terminal 3
Browser "EOF"
I closed Firefox, Started the app all over again npm start. And for some reason the app is working now
After using
npm run build
to build developed application for deployment it shows white screen when opening
build/index.html
while I'm setting homepage: "." in package.json.
Console Errors Screen shots
enter image description here
I have found a way to run the project whit a npm package called serve
serve -s build
this worked for me instead of opening the file from /build/index.html directly
I am trying to deploy my react app onto to gh pages but it just shows up as a blank screen. I have tried everything, and nothing seems to work. I followed this video: https://www.youtube.com/watch?v=4NapRkCazks and everything seems to run fine except there is a blank page when I type in the url. Here is my repo: https://github.com/nupurd89/onlineshopping.git
I am super lost and nothing seems to work. Thanks for your help in advance!
The main problem in my case that I am deploying a static create react app [App-filter-review] system and my screen show blank screen too.
#Fix No 1
The first issue is the incorrect url config, for the homepage,as it is given everywhere to correct it
#Fix No 2
If you are using React-router>v4.0 in the React app the include Basename acc to defined property
Basename add this basename={process.env.PUBLIC_URL} in Browser Router
This Article really helps out if you are using another stack too.
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
#Fix No 3
If you are deploying the system on Heroku or GH-pages try to correct Case sensitive issues while directing to JS/CSS file while configuring as these systems are using Linux container that is case sensitive
Link to My Github Page that is fixed by Fix no2 is here
https://amancode27.github.io/App-Review-Filter/
Make sure you have installed the right version of gh-pages (npm install gh-pages --save-dev).
Also, add the following properties to package.json file.
"homepage": "http://{your_username}.github.io/{your_repo-name}"
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Run the following command :
npm run deploy.
Your GitHub repository > Settings > Pages
Under the Source tab, select the "gh-pages" branch.
Hopefully, that helps.
I was having a similar issue while using a custom domain I bought on namecheap, even after following the recommended set up (adding the A records/CNAME on namecheap, adding the deploy scripts in package.json, custom name on github, etc.)
The solution I found here https://github.com/gitname/react-gh-pages/issues/53 worked for me.
I had to remove my repo name from the end of my package.json homepage property, so it looks like this now:
"homepage": "https://gitname.github.io"
After redeploying and then refreshing my browser page / cache, and I'm not getting a blank page anymore. I was using create-react-app, namecheap for the custom domain, and gh pages for hosting.
I've got a problem with localhost when running yarn start. It seems that everything is okay, but my web page is blank when it opens. Should be at least the React logo. I am using windows 10.
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000/
On Your Network: http://...............:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
I'm using create-react-app.
The react application works well by npm start.
But...
I ran npm run build then index.html and main...js/main...css were create in build directory.
And moved this files into tomcat web application's home directory.
When I open the index.html in the browser, blank screen only shown.
What's the problem ?
(I added "homepage" : "." into package.json, so this isn't 404 problem)