Anyone here got webpack-dev-server to work on Cloud 9?

[YarivGilad]

Hi, since webpack-dev-server has a dependency on node-gyp ( see issue #229 ) we tried using it with cloud 9 which runs an online editor on a Linux machine. The installations of webpack-dev-server on cloud 9 goes smoothly but requests to it were not successful. I suspect it has something to do with a different networking paradigm.
All the tutorials I've found on webpack-dev-server show the index.html will have a script tag with the source of the output bundle.js coming from the webpack-dev-server at localhost:8080 which is the default... when you run on your local machine it make sense to access the server via localhost, but when you run the webpack-dev-server on cloud 9 it should be something else. a normal express app could be accessible via their scheme - https:// + your username + / + your workspace name - serving as if you would run localhost, so I tried that scheme and it didn't work, I tried using 0.0.0.0:8080 and it didn't work. I also noticed that c9 runs on https and the webpack-dev-server must assume plain http when communicating with the client via socket.io...
In short - I'd appreciate any help from someone who managed to get the webpack-dev-server to run on c9...
Thanks
Ajar

[manavsehgal]

This might help. Assuming you want to use react-hot-loader.

webpack-dev-server  --host $IP --port $PORT  --hot --inline

Browse at https://workspace-user.c9.io/webpack-dev-server/

[mvhenten]

webpack-dev-server --port $PORT --host $IP  --content-base build/

works for me

[tsongas]

Hot reloading isn't working for me. My site comes up at https://react-tsongas.c9.io/ however in the browser console I'm getting repeated errors that make it look like hot reload is trying to happen over http rather than https and getting blocked:

abstract-xhr.js?96d9:128 Mixed Content: The page at 'https://react-tsongas.c9.io/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://react-tsongas.c9.io:8080/sockjs-node/info?t=1461778636613'. This request has been blocked; the content must be served over HTTPS.

Any ideas how to solve this? I wonder if it's related to this webpack-dev-server bug? https://community.c9.io/t/mixed-content-with-webpack-dev-server/3053

[joonhyublee]

As per https://community.c9.io/t/mixed-content-with-webpack-dev-server/3053/4
you can go to your node_modules/webpack-dev-server/client/index.js and replace line 62
protocol: urlParts.protocol,
with
protocol: (window.location.protocol == 'https:') ? 'https:' : urlParts.protocol,

After this, you should be able to run dev server with cli, without the --https flag. (I couldn't get it to work with the flag, I get 'ECONNRESET: Request could not be proxied!' and 'There was an error proxying the request.')

I don't know enough to judge whether this applies to C9 or other https servers in general, and I wonder if anyone should do a pull request on this..?

[tsongas]

There's an open pull request #470 maybe someone can rattle the chain of the maintainer?

[emckay]

I was having this problem too on cloud9. After playing around with it for awhile, I got hot reloading on cloud9 to work with webpack-dev-server 1.14.1 without any patches.

The key change I made was creating webpack-dev-server/client?https://0.0.0.0:8080 as an entry point.

Running webpack-dev-server --host $IP --port $PORT runs my application with hot reloading.

Here's the full webpack.config.js:

var webpack = require('webpack');

const path = require('path');

module.exports = {
    "entry": [
        'webpack-dev-server/client?https://0.0.0.0:8080',
        'webpack/hot/only-dev-server',
        './app/index.js'
    ],
    "output": {
        "path": path.join(__dirname, 'build'),
        "filename": "bundle.js"
    },
    devtool: "source-map",
    "module": {
        "loaders": [
            {
                "test": /.js?$/,
                "loader": 'react-hot!babel-loader',
                "exclude": /node_modules/
            },
            {
                "test": /\.scss$/,
                "loaders": ["style", "css?sourceMap", "sass?sourceMap"]
            } 
        ]
    },
    devServer: {
        contentBase: './build',
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

[teamgroove]

Can't get it working as described. Works only for me in c9 with patching as mentioned by @joonhyublee

[emckay]

For a working example, you can clone this bare-bones react boilerplate repository: https://github.com/eloquently/react-boilerplate .

npm install and npm run webpack-dev-server should run the application (master branch is configured for Cloud9).

Change something in the App component, and you should see the HMR working.

[teamgroove]

Ok. i will try again tomorrow. i will get back. Thank you.

[teamgroove]

You are right, this configuration works in cloud9 without any mods to: client.js. I'm investigation what the difference actually is.

[teamgroove]

It was completely my fault. I had some overrides in the webpack.config.babel.js for the entry-point, ENV-vars and mcuh more. After fixing my errors - everything runs smoothely. Thanks for the helpful hint!

[emckay]

Glad you got it working!

[slmoore]

Hey here's another option if just looking for the essentials: blank-merrn-c9. Check out the webpack.dev.config.js and package.json to see what it's using.

[SpaceK33z]

Closing because it seems to be working :).

[cifren]

@emckay thanks, it works for me :)

[AndrewNgKF]

1.In order to get it working, I went into the file that the npm start script calls, "./node_modules/webpack-dev-server/bin/webpack-dev-server.js"

2. go to node_modules/webpack-dev-server/bin/webpack-dev-server.js file. Line 209, the listen method

3. change options.host and options.port to process.env.IP and process.env.PORT. Now u can run it. YAY!

[codersc]

@AndrewNgKF That worked for me thanks a bunch!

[emacreative]

i did all of the things posted here included the last one (modifcation of webpack-dev-server.js) and i cant make work , i got on browser console [WDS] Disconnected! , i will appreciate you help .

Thanks

[adleviton]

In webpack.config.js:

devServer: {
historyApiFallback: true,
contentBase: './',
host: process.env.IP,
//https: true,
port: process.env.PORT,
"public": "your-project.c9users.io" //no trailing slash
}

[pelx]

i did all of the things posted here too... does not work!

[nagarajasr]

webpack-dev-server --history-api-fallback --inline --progress --public myproject.c9users.io --host $IP --port $PORT
``` worked for me

[auz1111]

Thank you @adleviton ! That worked for me.

[ngustavo]

Adding this --host $IP --port $PORT --public $C9_HOSTNAME
after this cross-env NODE_ENV=development webpack-dev-server --open --hot
works fine for me with hot reloading.

[pelx]

GET http://0.0.0.0:8080/packs/application.js net::ERR_EMPTY_RESPONSE
It works on its own but not with Rails server running.

[x5engine]

webpack-dev-server --public your-project.c9users.io --host $IP --port $PORT --hot --inline --

[podenborg]

I struggled for so long until trying @x5engine's suggestions.

THANK YOU! I finally got it to work.

[Johnzy916]

If anyone comes across this, I wanted to share my solution because I know how frustrating this can be (for the new AWS Cloud 9):

EDIT (thanks @jakewatton95) {
You'll need to add an inbound rule for port 8080 to your EC2 instance:

1. Open the Amazon EC2 console at https://console.aws.amazon.com/ec2/.

2. In the navigation pane, choose Security Groups. Select the security group for your instance.

3. Choose Inbound, Edit, Add Rule.

4. Add 8080, and give it the name "dev-server"

}

Create a script in your package.json:
"dev-server-c9": "webpack-dev-server --host 0.0.0.0 --port 8080"

Then open the terminal in AWS Cloud 9, and run the script:
npm run dev-server-c9

The terminal should output "Project is running at http://0.0.0.0:8080/"

Just click on the address, and choose "open," it will open a new browser window pointing to the page.

[jakewatton95]

@Johnzy916 Solution works, but you need to make sure you're allowing inbound connections on port 8080 from the IP that you are trying to see the page from.

[ppbntl19]

Try below config and make sure to set https: false

devServer: {
host: process.env.IP,
public : "https://*****.vfs.cloud9.us-east-2.amazonaws.com",
https: false,
disableHostCheck: true,
historyApiFallback: true,
port: 8080,
},

[x5engine]

this is related to the glory days of c9, not the new weird aws c9