Cannot reach page error when trying to open react app after running npm start in a create-react-app on cloud 9 - create-react-app

So, I'm following an online tutorial on learning react, in the tutorial we are just creating a simple react app on cloud 9 and running the application, however, I cannot access the website after running npm start.
I used the following commands:
mkdir react
cd react
npm install -g create-react-app
create-react-app helloworld
cd helloworld
npm start
The terminal output by cloud9 says the following:
(https://i.stack.imgur.com/3sKce.png)
If I try to open http://localhost:8080 I get the following page:
(https://i.stack.imgur.com/V7Zu1.png)
Not entirely sure why this error is happening, I have deleted node modules and package-lock.json file and re done the npm install command but I'm getting the same error.

Related

RN Expo issue - Something when wrong installing JavaScript dependencies. Check your npm logs. Continuing to initialize the app

I am using react native and Expo. I am unable to build new app because after I use expo init appName it shows the following error.
Heres the full message:
📦 Using npm to install packages. You can pass --yarn to use Yarn instead.
√ Downloaded and extracted project files.
× Something when wrong installing JavaScript dependencies. Check your npm logs. Continuing to initialize the app.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd Scanner
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
I tried multiple times to create a blank project, also tried npm install to install failed/not downloaded libraries and continue after failure but it showed another error:
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file
also tried npm cache verify that showed cache is ok Content verified: 3562 (252580364 bytes).
So, How can I solve this issue?
Problems related to npm installation are very common If you do any mistake in early installation, but is avoided. Learn more about npm tree.
Steps worked for me are :
npm cache clean --force
npm cache verify
npm -g uninstall expo-cli --save
npm install expo-cli --global
expo init app-name
cd app-name
npm start
Always run as administrator if working on Windows and in root directory.
The solutions above didn't work for me but if you use 'npm install' in the directory of the app you get a clue that you shuold try 'npm install --force'
err message
You should have all these files folders and files at the start of the project otherwise not all the dependencies have been installed which is why we were getting the problem.folder structure
After you have added --force to npm install you have all the dependencies installed. Now you can run the app with npm start.
Unfortunately, all the solutions described above didn't work on my machine...
Here is my latest solution for this problem...
This worked 100% on my machine...
Use npm i -g expo-cli
This will automatically add the required packages and also remove the unnecessary ones.
Yes, surely, you don't need to uninstall and re-install it again.
Just follow my steps.
And, you can create your expo project using expo init.
I hope my solution will help you out from this annoying problem....
I just did npm install and it worked for me, but I had do that every time I create a new expo project.
I also encountered this problem, and finally found that it was the problem of react native cli,I installed the latest version of react native cli,Expo is back to normal
This Error is regarding to the git account. expos need a git account to setup react native project
If you are using windows you need to install git in your local PC
after that open your Terminal and type this command
git config --global user.name "your_username"
git config --global user.email "your_email_address#example.com"
after that clone any github project to your local computer. it will ask to login to Github
after all these steps try expo init <projectname>
The simple way to settle that error is by using "expo-cli init app-name" instead of "expo init app-name".
I tried and worked perfectly for me. Hope it will help you guys.
i have faced a similar problem and running yarn set version 1.22.1 fix it
Run the Command Prompt as an administrator. And run the following command:
npx create-expo-app AwesomeProject

npm Module to React Native

I’m trying to install the npm module wallet-address-validator in a React Native application. I am using expo for my development environment.
First I install wallet-address-validator
npm install wallet-address-validator
Then I run
expo start
And I get these errors
Expo Developer Tools is disconnected from Expo CLI. Use the expo start command to start the CLI again.
[14:23:00] Opening DevTools in the browser... (press shift-d to disable)
[14:23:02] Error: React native is not installed. Please run npm install in your project directory.
[14:23:02] Couldn't start project. Please fix the errors and restart the project.
[14:23:02] Set EXPO_DEBUG=true in your env to view the stack trace.
So I ran
npm install
Then I ran
expo start again
and I get this error
14:26
Recrawled this watch 1 times, most recently because: /home/dale/Desktop/Rails/TestApps/testApp: dir missing from internal state To resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: watchman watch-del /home/dale/Desktop/Rails/TestApps/testApp ; watchman watch-project /home/dale/Desktop/Rails/TestApps/testApp
1) yarn add wallet-address-validator
2) npm install -g browserify
3) Create a file wav-in.js that imports the wallet-address-validator module and simply exports it:
var WAValidator = require('wallet-address-validator');
module.exports = WAValidator;
4) Then in the terminal in the project
browserify cwav-in.js -o wav.js
5) This will result in an error if you put in the test code below from Wallet-Address-validator in App.js
var WAValidator = require('wallet-address-validator');
var valid = WAValidator.validate('1KFzzGtDdnq5hrwxXGjwVnKzRbvf8WVxck', 'BTC');
if(valid)
console.log('This is a valid address');
else
console.log('Address INVALID');
6) You will however, get an error along the lines “… is not a function”
7) On line 3837 of wav.js change “var WAValidator = require('wallet-address-validator');” to “WAValidator = require('wallet-address-validator');”
8) On the very last line in of wav.js add “module.exports = WAValidator;”
everything should be working now
This article is also on point https://hackernoon.com/using-core-node-js-modules-in-react-native-apps-64acd4d07140

The development server returned response error code: 500 in basic application in react native

I am Android Developer, I am new to react native development. For this, I followed bellow React Native Document
https://facebook.github.io/react-native/docs/getting-started.html
I did the following steps
1, I have installed node
2, I Have already installed JDK
3, I have installed Android studio
4, set the ANDROID_HOME path in environment variables
And in command prompt, I did run the following commands
npm install -g react-native-cli
Then create a new application, for this
react-native init AwesomeProject
Then successfully created the application, then go to that folder and run the application.
cd AwesomeProject
react-native run-android
Then getting the following error
And this is the node js error
So please help me, Thanks In Advance.
Try to follow the workarounds here : https://github.com/facebook/react-native/issues/4968.
Kill the bundler process, delete your modules folder, run npm install, rm -rf $TMPDIR/metro-cache-*, also rebuild your android project.
If this doesn't work, you can as well try to create your app using create-react-app toolchain which should be working fine : https://github.com/facebook/create-react-app .
This is a bug within Windows environment for React Native 0.56 you may need to upgrade/downgrade your React Native version. I encountered it, made even worse when I tried to use Typescript.
What I would is run a new project using the latest version 0.57 and just build, if it doesn't build straight away - then use 0.55 until the issue is resolved.
Try this solution, it was worked for me.
Steps to create New React Native project:
react-native init projectName (ProjectName: eg.HelloWorld)
cd HelloWorld
npm start
Open another node command prompt and goto the project path and then run your project with below given command.
react-native run-android
I think you missed 3rd step i.e to start npm.
And if you are again getting same error, follow these steps:
rm -rf node_modules && npm install
rm -rf /tmp/metro-bundler-cache-*
rm -rf /tmp/haste-map-react-native-packager-*
react-native run-android

Getting error while creating a new Project

I'm new to reactnative. I have followed steps to install reactnative properly but, while creating a new project, I'm getting an error. I'm using Windows 7 64 bit with i3 processor.
c:\ReactNativeProjects>react-native init AwesomeProject
Command npm install --save --save-exact react-native failed.
My Folder contains only one file
Since you are starting to use React Native, consider using Expo, I've used it and it makes developing, debugging, testing and deploying to the apple store and google play easier.
According to the official docs:
Expo is the easiest way to start building a new React Native
application. It allows you to start a project without installing or
configuring any tools to build native code - no Xcode or Android
Studio installation required (see Caveats).
Assuming that you have Node installed, you can use npm to install the
Expo CLI command line utility:
npm install -g expo-cli
Then run the following commands to create a
new React Native project called "AwesomeProject":
expo init AwesomeProject
cd AwesomeProject
npm start
This will start a development server for
you.
I've answered a question in SO for the steps and what happens when you build your .apk and .ipa files using Expo, have a look at that as well.
These are my steps to get rid of this error:
Please upgrade your npm
npm install -g npm#latest
Run npm cache clean command in Command prompt ( With some element of doubt for cache presence)
3.Ran react-native init in command prompt as Administrator (on Windows OS), hoping works well with sudo react-native init on Mac OS
If still problem persist make sure that you have followed each and every step mentioned in Documentation i.e. installed JDK, PYTHON, NODE.
Refer to this link For windows

Babel Errors in Cloud 9 IDE

Getting a bunch of babel errors when running npm run dev with the Vue cli.
This only happens in Cloud9.
Any thoughts on what could be the issue or how to disable errors like this before running npm run dev?
All babel related it looks like.
I couldn't re-create the babel error messages but it's possible that it could be caused if npm/node is not up-to-date. (Vue-cli wasn't starting dev server before the installation below)
Is your repository public where you're getting the error messages? Then I could have a look at the errors.
If removing node_modules folder is not helping,
here is how you can create a new IDE workspace for vue.js ($ for commands in bash terminal):
Create a blank Ubuntu workspace
Check that nvm is installed & up-to-date with (check version of install script here):
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
$ nvm install node 6
$ npm i vue-cli -g
$ vue init webpack yourAppName
$ cd yourAppName
$ npm install
$ npm run dev
Click preview to test that Vue server is running as expected
Here is a link to a HelloWorld Vue app in cloud9 ide.
If you have an existing app you can also use git to clone it into your new workspace instead of creating a new app.