React project compile successfully can't view from the browser - node.js

I did several react projects before but it is the first time I encountered this problem.
After I ran
npx create-react-app myapp
cd myapp
I created a react project, then I ran
npm start
It looks very fine:
However, the project did not show in the browser, when I go to the localhost:3000 it reminds me "This site can’t be reached":
I tried to change the port but no matter what I do, this situation still lasts. The environment is good, the computer is good, the nodejs is good, anyone has encountered this kind of situation before can give me some advice? Thanks!

Related

react project compiled successfully but dont show on browser

I did several react projects before but it is the first time I
encountered this problem.
After I ran
npx create-react-app myapp
cd myapp
I created a react project, then I ran
npm start
It looks very fine:
enter image description here
However, the project did not show in the browser, when I go to the localhost:3000 it reminds me "This site can’t be reached":
enter image description here
I tried to change the port but no matter what I do, this situation still lasts. The environment is good, the computer is good, the nodejs is good, anyone has encountered this kind of situation before can give me some advice? Thanks!
This is happening because of the env variable HOST.
To fix that you need to add HOST="localhost" to your ~.bash_profile file, and then reload the env variables using source ~/.bash_profile. (don't forget to restart your server)
This should fix your problem.

Uncaught TypeError: Cannot read property 'id' of undefined at registerNgModuleType

I have a problem that when I clone my repository of the app in angular, after installing the node_module and executing the ng serve it throws me this error and I have already looked for a thousand and one answers but none are correct, the app is from angular 8.1 and my angular global is 11 I do not know if it can influence, but it is with the only angular project that happens to me, at times the ng serve lifts the project and it can be seen but I barely make a modification and I give it save this error appears, I need help that advice me give?
enter image description here
I had the same problem.
I solved the problem by disabled the Angular Language Service for that workspace.
I hope this solves your problem
I could find the error, it turns out that VS code as editor every time I ran the npm install and then the ng serve ran perfect, one time I make a modification and give it ctrl + s it bugea my project and when I run the ng serve me again I get the error, so I had to clone my repository again and work with sublime text and it did not give me the error. It must have been some vscode plugin that makes this happen but it is with very few projects.

Issues running React app on Windows environement

I have a working react app that I had hosted on a linux environment, but the client has switched their hosting provider and now I have to run the app on a Windows environment. I personally am unfamiliar with Windows and having some serious issues getting my app to work now.
After loads of debugging and testing I now can get my app to run, but when I start it, it will throw some errors which will results in a broken app in the browser.
So when I run npm start it will start up the app and spit out this error:
Screenshot of the terminal error 1/2
Screenshot of the terminal error 2/2
It seems to spit out some complaints when using npm run watchJS which runs this command babel src --watch --out-dir lib.
I am completely lost at this point and have no idea where to go from here.
I can provide as much detail as anyone needs after looking at the question, I just don't know what else to add to this issue and don't want to fill up this question with irrelevant info.
Thanks in advance for any help
It is likely a bug with the version of npm you are using.
See this thread:
https://github.com/npm/npm/issues/18380
Try rolling back your version of npm to 5.3
The issue appears to be exclusive to windows with babel packages.

Heroku cannot find ./node_modules/.bin/forever in Procfile of Yeoman MEAN app

I've been trying to get a Yeoman generated MEAN.js app deployed to Heroku for the best part of a day without much luck.
I've carefully gone through all the steps and am pretty sure I've done everything correctly according to documentation.
After several times going through and ensuring the database is configured correctly with heroku config, removing the public/dist folder from the .gitignore, running grunt build, setting NODE_ENV=production, and running a successful Heroku build the app just continuously shows the very unhelpful Heroku Application Error page.
Upon checking the heroku logs the only thing I can find is this:
bash: ./node_modules/.bin/forever: No such file or directory
Process exited with status 127
Which clearly refers to the Procfile that contains this single line and is where the app is supposed to start from.
web: ./node_modules/.bin/forever -m 5 server.js
There is a server.jsin the root of the project so I tried modifying the Procfile to a standard web: node server.js but that doesn't fix it and I am not comfortable messing with the default Yeoman configuration.
The ./node_modules/.bin/forever is of course there where it is supposed to be. But it obviously isn't showing up or cannot be located in the live Heroku build. If anyone knows what the problem is here and how to fix it I'd much appreciate the help! Cheers!
This happened to me after I upgraded my nodejs, I can't figure out why exactly it is happening, but here is my fix for it asap,
When I ran heroku run ls node_modules/.bin/
I could not find forever there. So I installed and save it to my dependencies by running npm install forever --save
On running heroku run ls node_modules/.bin/ again, it was there and my app runs fine.
I'll sure update this soon, once I figure what exactly led to it.

heroku running gulp build

i am trying to install a node app onto heroku. My application requires both gulp build and gulp install to be called on the server upon instillation, however i am having troubles doing this.
I have tried writing this inside of the package.json:
"scripts":"gulp build && gulp install"
which works at first, but after about an hour the server must restart and recall the script causing for the contents of the server to be rebuilt. this removes all of my content such as newly written blogs or changes.
I have also tried using the heroku toolbelt
heroku run gulp build
heroku run gulp install
However, even though it produces the correct console write lines and looks asif it has made the necessary changes, it hasn't, the server produces an error which proves that the resources haven't been built meaning that the console command didnt make any changes to the actual server files.
Am i missing something out here? Thanks in advance.
So i have figured out that the problem lies with the fact that i have tried to use a LevelDB database on heroku. Apparently, heroku uses no-writable dynos, meaning that the levelDB database is unable to save.

Resources