Unable to run project on port 8080


#1

Hello all. I am following a VueJS tutorial located here:

https://www.youtube.com/watch?v=O7SkRITQTyE

I am new to both VueJS and Cloud 9 but understand why I am not able to preview the project when accessing via http://localhost:8080. I am not certain, but I do not think that running this command was going to help either npm run dev.

I tried using my workspace URL https://vuejs-myc9username.c9users.iobut:8080 but that did not make a difference.

Your time and assistance would be greatly appreciated. Peter


#2

I’m sorry, can you clarify what the URL you tried is? http://localhost:8080 is the address of your own computer, so you won’t find anything there, but the URL you should use is https://workspacename-username.c9users.io:8080, was what you wrote just a typo?


#3

Hello dannytech. Thank you so much for the prompt reply. I tried using the URL that I found when accessing the share menu. I basically did a copy / paste then appended :8080 to that URL. So that would have been: https://vuejs-username.c9users.io:8080/

Should I execute this command in a terminal npm run dev

or should I be clicking the the Run button in the C9 IDE

Your assistance is greatly appreciated. Peter
BTW I see what you meant when you asked about the typo. Yes it was a typo.


#4

Try using the Run button, and also npm start and npm run dev in case that doesn’t work. If it still doesn’t work, I would be happy to take a look at your code and setup and help.


#5

I did try using the Run button and entering npm run dev in the terminal.

I should have mentioned that my workspace was setup using node.js

Don’t know if that was correct or not

Thanks a bunch. I’ll keep you posted. Peter


#6

What I did last night was to spin up an Ubuntu Virtual Box image. I then proceeded to enter the commands from that tutorial that I have been following. In the Terminal I entered:

  1. npm install -g vue-cli
  2. vue init webpack-simple
  3. npm install
  4. npm run dev

At this point a browser opens up and displays a VueJS page just as seen in the Youtube tutorial.

However, going to this URL https://peter-username.c9users.io:8080/ in my C9 IDE results in a blank page. The contents of View page source is the same.

I hope that I am explaining myself properly


#7

So it sounds like you are previewing inside the IDE tab, can you click the Pop out button at the top right of that and then checking what happens?


#8

Same result. Blank page. If I view page source I can see that the index.html code is there. But does not seem to be rendering properly at the browser. Yes, I tried all browsers. I see that the “npm run dev” command won’t work because when I try visiting the URL I see “No application seems to be running here!”

So when I right click on index.html and select run then enter the URL ending in :8080 into my browser I get that blank page.

Thanks again for taking the time to help me out. I appreciate it.

Here is that code:


#9

Can you press Ctrl+Shift+i and tell me any errors you find there, it may be a problem with a script not running to display your HTML. Also, if you want, you can PM the workspace and I’ll take a look.


#10

Hello again. My apologies for being such a bother. Ctrl+Shift+i does nothing for me. I am on a Windows machine. Not sure if that makes a difference. I did browse through the Keybindings but did not find that command https://docs.c9.io/docs/keybindings

I did share the IDE link with you via workspace / share / invite.

If you have 05:16 to kill, you can always try it yourself while following devlob’s youtube video found here:

https://www.youtube.com/watch?v=O7SkRITQTyE

Let me know if you have trouble accessing my workspace… Thank you. Peter


#11

Unfortunately, I’m out of town right now, but as soon as I get home I’ll try to help. Ctrl+Shift+i is a built in keybind in Chrome to open the developer tools. And it’s no problem, don’t worry.


#12

Not to worry. Please don’t go out of your way. It is not a matter of national security!

Have a wonderful day.

Peter


#13

I’ve just posted a question - “Unable to do HTTPS on c9users.io” - that sounds roughly similar to yours.

I would note that I find the ‘curl’ utility to be very useful in a situation like this, so I’m trying stuff like:

curl -v -k -H “Content-type: application/json; charset=UTF-8” -X POST --data “{ ‘blah’ : ‘inblah’ }” https://******.c9users.io:8081/

The ‘-v’ is for verbose, the ‘-k’ tells it to ignore security issues, and the -X and --data (redundent I think) are because I’m trying to do a POST in this particular case but you can just get rid of those to do gets.


#14

Thank you Tom. Your input is much appreciated. Have a great day. Peter


#15

I’m having the exact same issue as you peter. I can get the Vue.js CLI to work perfectly locally, but I can’t get it to work on cloud 9. I’ve tried all kinds of combination of the app link based on the document: https://docs.c9.io/docs/multiple-ports. I also have re-created the workspace twice in two different templates (HTML5, Node.js) with the same result.

If anyone out there has actually got the vue-cli to work on this platform it would be great to hear from you.


#16

Thank you for chiming in. I haven’t managed to get it going as yet. Until then, I will have to continue working locally.


#17

@peterbata, specify the host and port parameters in the package.json dev script:

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --host $IP --port $PORT"
  }

#18

@bwobst Thank you for the reply. What Host and Port parameters are you referring to?


#19

Scroll to the right in my code above.


#20

I did see your code and have appended it to my package.json file. It now looks like this:

{
“name”: “workspace”,
“description”: “A Vue.js project”,
“version”: “1.0.0”,
“author”: “Peter”,
“private”: true,
“scripts”: {
“dev”: “cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --host $IP --port $PORT”,
“build”: “cross-env NODE_ENV=production webpack --progress --hide-modules”
},
“dependencies”: {
“vue”: “^2.1.0”
},
“devDependencies”: {
“babel-core”: “^6.0.0”,
“babel-loader”: “^6.0.0”,
“babel-preset-es2015”: “^6.0.0”,
“cross-env”: “^3.0.0”,
“css-loader”: “^0.25.0”,
“file-loader”: “^0.9.0”,
“vue-loader”: “^10.0.0”,
“vue-template-compiler”: “^2.1.0”,
“webpack”: “^2.1.0-beta.25”,
“webpack-dev-server”: “^2.1.0-beta.0”
}
}

When running index.html I am still presented with a blank page.

https://vuejs-peterbatah.c9users.io/index.html

Unless I am completely missing something.