I’ve started work on one of the React projects (the Camp Leaderboard) on Cloud9 using Node.js. However, when I start the server (using npm start) and try to open the preview on localhost:8080, I get “This site could not be reached”, even though the server is running. Does anyone know how to fix this?
No experience with cloud9, but just to be sure you did use
Yes, I did. When I started the server, they had an link with an http address. I clicked it, which led me to the “could not be reached” page.
It’s hard to know without seeing it, could be any number of things. How did you set the server up? Using express like in the API projects? Perhaps since you are not doing back-end yet you should use something pre-packed like the npm package http-server. That should serve an
index.html file in your current directory for you. It may need some configuring to force it to use port 8080, but it might be smart enough to do that for you as well.
EDIT: I’d actually recommend live-server for development. I’m doing stuff that needs to be managed with npm these days so i almost forgot about it, but it’s great!
I started the server by installing npm and then using npm start. Also, I know that React projects don’t need to be made on Cloud9, but it’s a work environment that I like to use and it makes things a little easier for me. And even so, I want to know how to get around this for when I do need to use Cloud9 for a Back End project and I run into this same problem.
Ah. npm doesn’t work like that out of the box, it’s just the node package manager. Node is what will let you run a server, but you would still have to set it up. Even in the back-end section the lessons have you using a framework called
express to do this. If you want to know more, you can skip ahead to back-end for just a second to do the npm and node lessons to wrap your head around them. They don’t require knowledge of anything from Data Vis.
But if you just want to get up and running, just type this in the console:
npm install -g live-server then
live-server from your project’s directory. If that doesn’t work on cloud9, then try
live-server --port=8080 but I don’t think that’s necessary.
EDIT: clarified a small thing, spelling
Actually scratch all that about
live-server since you will need to use
npm to manage your project due to React. So if you want to get going right away, look into some boilerplates like react-boilerplate and check out the back-end npm and node tutorials if you want to understand what’s going on.
Okay, thank you for your help. I’ll try looking into what you’ve suggested. If I have any other issues, I’ll come back here.
Are you saying that you tried to access server running on your cloud9 environment via localhost? Like typing localhost:8080 in your browser address tab? Then, obviously, you won’t reach it because your local machine isn’t running any web server.
If you want to access content hosted on your cloud9 environment, you need to do few things.
- Your server should be running at 0.0.0.0, which can be found in IP environment variable.
- C9 only opens port 8080, 8081, 8082. So your server should be listening on one of three.
- C9_HOSTNAME environment variable yields domain name for your project.
After you configure your server to listen to 0.0.0.0:8080 you should be able to access your content by accessing your project domain, which can be found in C9_HOSTNAME environment variable.