Getting webpack-dev-server to run in cloud9

reactjs

#1

Hi folks, webpack newbie but have been using cloud9 for learning node/express and i absolutely love it. now im trying to learn react and hitting a brick wall because every tutorial out there runs webpack-dev-server on localhost and of course cloud9 doesnt let you do that.

I am following this tutorial: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
and i am dying where it says to do npm start which then of course runs to localhost and its the end of the road for me.

Here is what i have reviewed so far that has not helped:

edit: this guy has obviously run in the same issue and i have no idea what he did: https://github.com/slmoore/blank-merrn-c9

please help a newbie out?


#2

I have similar problem following this book and forum:
https://forums.pragprog.com/forums/448/topics/14601
It seems Webpack does not work with Cloud 9
Please prove me wrong.
regards


#3

this guy claimed to have a solution a while ago https://forum.freecodecamp.com/t/webpack-dev-server-hot-loading-working-on-cloud9-ide/24120 but i just tried it and cant get it working (still directs to localhost when you run npm start). can anyone at cloud9 advise?


#4

You can specify the host with the --host flag when running webpack. In that repository you linked they use npm run dev to start it which runs this script: https://github.com/slmoore/blank-merrn-c9/blob/master/package.json#L7

NODE_ENV=development webpack-dev-server --host $IP --port $PORT --config webpack.dev.config.js --progress --hot

$IP is set to 0.0.0.0 and $PORT is set to 8080 in Cloud9 by default


#5

thank you. It does not help me. How can I run foreman for Rails app that uses procfile?


#6

This is the error:

_Could not load manifest from webpack-dev-server at http://localhost:3808/webpack/manifest.json - is it running, and is stats-webpack-plugin loaded? (original error Failed to open TCP connection to localhost:3808 (Connection refused - connect(2) for "localhost" port 3808)_)

procfile:

_rails: bundle exec rails server -p$PORT -b$IP_ _webpack: ./node_modules/.bin/webpack-dev-server --host $IP --port $PORT --config config/webpack.config.js --progress --hot


#7

There should be a space between the -p and $PORT in your rails command. It should be bundle exec rails server -p $PORT -b $IP


#8

hey tim, you’ve been really patient! thanks for your response. i confess I had completely given up on cloud9 and went local before i read this. I will give a try tonight and report back if success.


#9

thank you. I actually had spaces.
It did not work without
var devServerPort = process.env.PORT;
webpack.config.js.

It still does not work as it should. Application entry point application.js does not print Hello world in the console…
var config = {
entry: {
‘application’: ‘./webpack/application.js’
},
I will try to figure this out…

regards
Laura


#10

I started from a new ws…
error: GET https://rapabw-laris.c9users.io/favicon.ico 404 (Not Found)

i am not giving up yet.


#11

That error can be ignored, it just appears because browsers try to automatically download favicon.ico to show a picture in the browser tab, and your project doesn’t have one yet.


#12

Thank you. OK I can ignore this error but it does not print test message on the console and does not load root page… Instead it loads my workspace content… I used yarn to manage components. I could not find a rails app that worked with webpack.


#13

If you run the production pack (the one translates back to JavaScript), then use the native server on C9 to run the NEW html file created by webpack (like you would a non react file), you do not need the webpack dev server. I don’t know if you can debug but you can use the dev tools in your browser to see what is happening. Chrome has a react console extension.


#14

thank you. I use webpack because i am leaning… But I am not sure if I should give up webpack or c9.


#16

Hi,

thank you. I think I know what is the problem:

But I am not sure how to make it find application webpack.config.js

Error: ENOENT: no such file or directory, open ‘/home/ubuntu/workspace/shine/node_modules/webpack-dev-server/client/live.html’

instead it runs node_modules/webpack-dev-server/client/live.html’

Any ideas??

regards


#17

You can’t have the rails server and the webpack-dev-server running on the same port.

That said, I don’t know how to make this work, either.

I’m trying to use the 5.1 version with webpacker, and have tried a few things, including changing the line that sets devServerUrl to no avail.


#18

Take a look at this: http://aalvarez.me/blog/posts/using-rails-with-webpack-in-cloud-9.html

Hope it helps. Let me know if you still need help.


#19

Thanks, I’ll give it a go! Looks like it will work.


#20

Thanks for sharing your approach! But now I have another error and can’t figure it out :confused:

Webpack dev server starts without problems:

But in browser console I get error 503 (Service Unavailable):

And after each workspace restart - a line that was added with

echo “0.0.0.0 $C9_HOSTNAME” | sudo tee -a /etc/hosts

is missing and I have to run this again…

Can you point me towards right solution?


#21

i find simple solution

  1. run this command
    echo “0.0.0.0 $C9_HOSTNAME” | sudo tee -a /etc/hosts

  2. in webpacker.yml property of https must be false
    dev_server:
    host: your_domain.c9.io
    port: 8081
    https: false

  3. visit your site on http://your_domain.c9.io, not https protocol