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.
Related
React fails to make proper build, even with default app.
I ran commands npx create-react-app my-app then npm run build.
When I open index.html in /build, the site doesn't work and I get following logs:
You can just open a React (or Angular) build by clicking on the HTML file.
What you have to do is the following:
Install any static server module (i.e. serve):
npm install -g serve
In the root directory:
serve -s build
And then your app will be served.
It would be wise to do that before you deploy to any cloud storage or even your own server, but if you are 100% your app works, you can just deploy in on Vercel, Heroku or GitHub pages, they are free.
i have a this little issue.
I have a new laptop, and I decided to do react project.
I installed the Node's stable version, installed the the npm create-react-app globally, and created a new project using this command npx create-react-app tip-calculator.
Everything was set up for me, only deleted a few files on the src folder, and kept the essentials (index.js, app.js and index.css).
My issues, is on my previous laptop, when doing projects, the webpack (is what i think it is) didn't show up in the console, and on the new laptop, it shows, and I would like it removed.
This is a freshly baked react project, so I didn't touch it's code, aside from the files I deleted.
It's not an issue, it's expected behavior by react-scripts because these logs are hardcoded in react-scripts and currently, there are no options for disabling them. You have probably had an older version of create-react-app in your previous laptop which might have not logged this information on the console.
What is really happening is that you are running react-scripts with npm start and react-scripts are logging webpack logs.
There is also this question which is similar to yours about running react-scripts silently.
If you really don't want to see the output you can redirect it to null:
Linux & Mac: npm start > /dev/null
Windows CMD: npm start > null
Windows Powershell: npm start > $null
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
We have a React application that is running on production. The app works perfectly fine locally but we are facing some problems in production mode. i.e., when we build the code locally for production, the issues are still reproducible.
Is there any way to debug production-built code locally?
Create production build
npm run build (build files into folder /bundle)
npm i -g http-server
and run
http-server bundler (your folder)
I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?
You can actually use static server to run build version of your app. It's doable with serve. You can test it with:
npm run build
npx serve -s build
Navigate inside the directory of your app first.
According to the official create-react-app website. When you run npm run build or yarn build you create a build directory with a production build of your app.
After running the command above the next thing you can do to check the build version of your app is to install serve to serve your static site on the port 5000 by default.
npm install -g serve
serve -s build
This will copy the link to your clipboard that you can paste in your browser and see the build version of your app.
You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands:
cd project-name
npm run build
npm install netlify-cli -g
netlify deploy
Follow command line prompts and choose yes for new project and ./build
as your deploy folder and voila you have a production React app!
You can host the app locally using apache, nginx, express
If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:
"homepage": ".",
Now
build your app with npm run build.
launch <your app>/build/index.html in the browser.
Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing