How to setup React App

reactjs
workspace
nodejs
npm

#1

Install react on a cloud 9 workspace.

First of all you need to make sure you have the latest version of the following scripts.

nvm, node, and npm

The order in which you run these commands matters!!!

start in workspace

I install node version manager, also known as nvm first.

install latest version of node

  1. curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
  2. nvm install v6.11.

original instructions Upgrading NVM

install latest version of npm

  1. `npm cache clean -f``
  2. npm install -g n
  3. sudo n stable

original instructions Upgrading NPM

install react app space

  1. npm install -g create-react-app
  2. create-react-app my-app
  3. cd my-app
  4. npm start

original instructions found on react’s offical install documentations, due to link limitations I can not post it :frowning:

As for whether this post will continue to be support. The answer is maybe. Hopefully you found this article useful in your programming endeavors.


Setting process.env.PORT process.env.IP for REACT app
Support for react-native
#2

Hey ty for the post. I have just gone through this process and created my first react app. Do you know if this process automatically creates a running server on which you can see your app? My best guess was to click run on the boilerplate App.js file and then follow the link https://workspace-name-alexandros84.c9users.io… that produced the disappointing “no app is running here” default screen of c9. I think I am missing something ultra obvious… but what (starting up a node - how?) Can you help?


#3

Most likely, React is running on the wrong IP and port. I’m not sure how to change those settings, but they should be set to process.env.IP (0.0.0.0) for the IP and process.env.PORT (8080) for the port.


#4

I dont know how to do that either, and I think this is what causing the issue, since I get this message from Idle:

Important: use process.env.PORT as the port and process.env.IP as the host in your scripts!

I am getting this issue to a seperate question.

Ty


#5

So this is not an answer yet it hopefully will set you in the right direction. I am using npm start to start the rendering server yet their is a command that uses IP and PORT to start the server at the correct port. I will do some digging later today to find out where I put that console command. I think I originally found the command on stack exchange. Though I will need to update the tutorial to adjust for the lack of this command.


#6

yes this was my first thought because when I used to start the webserver on a rails cloud 9 app, the bash command I was using was rails server -b $IP -p $PORT.

I was busy with work but I am about to do some experimenting on the issue today. I like cloud 9 and I hope I will make this work.

If you find out something (now or in the following days) pls share it here.

Kudos


#7

I followed these instructions from Mazam1212 and it has installed in a bit of time but then I did Preview > Preview running app and it worked straight away! Thank you Mazam1212!


#8

Great tutorial on installing React! If you need to learn React, check out these React tutorials.


#9

The tutorial works and you can preview. What’s different from the Angular apps I’ve created is that I was either running a server.js file or a webpack dev server buried in node modules. So the start script has got to be somewhere. package.json contains a directive for which ‘js’ file to use to start the server. Just the beginning of the hurdles I’m experiencing as you then have to address TypeScript (if you are using it) and webpack (if your are using it). Its a node app so I am thinking I’d like to run things like I did with my Angular apps with the obvious differences being the base React libraries and additional unique installs for language features.


#10

nice tutorial dude:grinning::grinning::grinning:


#11

Hi,

I ended up here while trying to get a react native app running in C9. Not sure if that is what everyone is trying to do, but thought I would share an alternative way that worked for me.

Basically, instead of trying to use C9 to preview your app. Use Expo. I followed these instructions from @taranda, and had my app running on my phone in about 5 minutes. Very happy.


#12

Hi,

I could use all these commands and get my react app running very well. But, I’m struggling with one thing. The Syntax of Javascript Babel (ES6). Like the imagem below, my syntax highlighting is a bit different between c9 and vscode. Can someone explain to me why? Or I’m crazy and its supose to be like this? :laughing::laughing: