I just started working on new reactjs app for learning purpose.
I installed app using this command: npx create-react-app reactnotes.
Then I am trying to start the app using this command: yarn start.
But in the browser it's been 2 minutes and the app is still loading but not opening on port http://localhost:3000/ default by React app. In the terminal
react-app-start only that is shown their and code is error-free.
I had the same issue and realized that it's happening while the network tab is open for the developer tool, so after I found the network throttling was enabled for "Fast 3G", just changed it to "No Throttling", so the issue was solved
Related
I've recently built a project using create-react-app. Everything is fine until today.
I run npm start as usual and try to visit http://localhost:3000. But I got LOCALHOST REFUSED CONNECTION error. And I got this on terminal's output in vscode.
Local: http://localhost:3000
On Your Network: http://172.24.194.157:3000
I made a small test: using vite to create a react app and npm run dev. And it's just fine to visit http://localhost:5173.
At first I thought it might be a problem with port. But turns out not. Because http://172.24.194.157:3000 is ok to develop my react-app.
So I guess, my browser resolute localhost to 127.0.0.1, but 127.0.0.1:3000 is not available due to react-scripts start serve the app on 172.24.194.157:3000.
But WHY is that happen? I made no changes to any config.(though I didn't open this project for about 2 weeks). It would be a great help if anyone can answer this. Thanks!
ENV INFO:
wsl1 in windows 11 (Ubuntu 20.04)
node: v16.9.0
npm: 8.19.3
I configured Metro to run React Native packager/bundler on a different port as 8081 is being used by McAfee service and I can't kill this process on my Mac.
I changed the default port to different one in Xcode script/files etc. But the react metro server(packager/bundler) i had to manually start every time before running the App. However with following edit in your MetroConfig.js file, if you run the App, then Metro server will automatically run on a different port specified in this file
const { getDefaultConfig } = require('expo/metro-config');
const portConfig = getDefaultConfig(__dirname);
portConfig.server.port = 8088;
module.exports = portConfig;
Thank you!
Sorry! My code is correct... it wasn't working yesterday because of some other issue. Once i fixed that, this config is working fine :)
Before customizing Metro file, I had to manually start Metro Packager(from the terminal) whenever I was launching the React Native App from Xcode. However once I configured the Metro, the Packager/bundler is starting automatically when I run the App from Xcode... so all good now!
Please help fix I ran into this error after deploying my webpage to git-pages,
now after running my React app it compiles successfully but does not display anything in the browser when you refresh the page this error pops up on the console.
link to the React app
Please follow the steps given on this repo - Deploy React to GithubPages
Alternative - React Deployment pages also explains how you can deploy to github pages Create-react-app deploy to githubpages
When following an article entitled, "Debugging React apps created with Create React App in WebStorm", the Debugger says it's connected to the JetBrains IDE Chrome Extension, but I can't get breakpoints to execute when using port 3000 and when I try to use the default debug port 63342 a 404 error is shown.
Here is a recording of my settings in Chrome and Webstorm 2016.2 IDE when trying to debug: http://recordit.co/MQ3LICuUIc
Steps Taken:
I've created a new JS debug configuration with the name 'ERS React Debug', the browser set to Chrome, and I've tried using the following URLs in the configuration:
http://localhost:3000/
http://localhost:3000/ers_react/public/index.html
http://localhost:63342/ers_react/public/index.html
(YT video I watched used the debug port, which is what is in my recording)
I also setup the mapping to webpack:///src as recommend in the article.
Default ReactJS app created with create-react-app is designed to be hosted on webpack server started with react-scripts start, that builds the application and starts the server. You won't be able to open this application on the simple built-in webserver (localhost:63342).
To be able to debug modern React app, you need upgrading Webstorm to the most recent version - debugging will work out of the box. Fot Webstorm 2016.2, you can try specifying URL mappings... For "react-scripts": "1.0.17", it should be http://localhost:3000/static/js/full/path to project, like http://localhost:3000/static/js/C:/WebstormProjects/untitled if the project path is C:/WebstormProjects/untitled should work:
Note that you would need to refresh the browser page to get breakpoints in code executed on pagfe loading hit
I am using react native
react-native-cli: 2.0.1 react-native: 0.55.3
I was running via react-native run-android
The screen is always loading the app (Debugger Mode)
127.0.0.1:8081 responding React Native packager is running.
NOTE: It was sudden issue, it was working fine till yesterday. *PC is Restarted several time and also JS server using kill -9 PID
It may be due to you have start endabling Debug JS Remotely while running your project.
You can Stop Debug JS Remotely and reload again. It will work.
It could be related to Watchman. I had a similar problem, where "react-native run-android" would run successfully, but the app would be stuck on loading in the emulator. After trying a myriad of things, what has worked for me is to disable watchman in the project directory (or uninstall) and refresh the app manually. If the app loads, then the issue is with Watchman.