Unable to run project on port 8080

peterbata · 2016-12-08 15:47:36 UTC

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

dannytech · 2016-12-08 16:17:33 UTC

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?

peterbata · 2016-12-08 19:17:00 UTC

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.

dannytech · 2016-12-08 20:30:35 UTC

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.

peterbata · 2016-12-08 23:20:55 UTC

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

peterbata · 2016-12-09 15:27:41 UTC

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:

npm install -g vue-cli
vue init webpack-simple
npm install
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

dannytech · 2016-12-09 22:08:12 UTC

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?

peterbata · 2016-12-10 01:21:52 UTC

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:

dannytech · 2016-12-10 03:30:52 UTC

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.

peterbata · 2016-12-10 15:02:09 UTC

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

dannytech · 2016-12-11 18:26:03 UTC

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.

peterbata · 2016-12-11 20:05:55 UTC

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

Have a wonderful day.

Peter

Tom · 2016-12-11 23:43:11 UTC

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.

peterbata · 2016-12-12 13:01:45 UTC

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

blurredhorizon · 2016-12-18 00:12:30 UTC

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.

peterbata · 2016-12-18 14:39:18 UTC

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

bwobst · 2017-01-20 04:22:43 UTC

@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"
  }

peterbata · 2017-01-20 14:50:27 UTC

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

bwobst · 2017-01-20 15:32:35 UTC

Scroll to the right in my code above.

peterbata · 2017-01-20 16:14:16 UTC

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.