Codeanywhere中的Webpack-dev-server实时更新

Question

I'd love to speed up my dev / test process on Codeanywhere.

Codeanywhere's dev boxes give you some random URL to use for your host "application" (ie: index.html) like this:

http://preview.[really-long-hash].box.codeanywhere.com/build/

Not sure how to get from there to the webpack-dev-server if it is running. Is there a basic configuration that I'm missing?

In all the Webpack tutorials, if you're running it locally, you would access the running dev server like this : http://localhost:8080 but http://preview.[really-long-hash].box.codeanywhere.com:8080 just shows an error message from Codeanywhere.

Answer 1

When launching the dev-server, you must configure its host IP to 0.0.0.0 using the host option. Then, on codeanywhere, you can access it from http://preview.[really-long-hash].box.codeanywhere.com:8080 .

One additional note is that if your build folder is anything other than the root of the folder on which you invoke webpack-dev-server, you should also specify it using the content-base option.

Example:

webpack-dev-server --devtool eval --host 0.0.0.0 --progress --colors --hot --content-base build

Note that if you get sick of typing this every time, configure an npm script by editing your package.json file and adding an entry into scripts , eg:

 "main": "main.js",
  "scripts": {
    "test" : "echo \"Error: no test specified\" && exit 1",

    "build" : "webpack --progress -colors",
    "dev-server" : "webpack-dev-server --devtool eval --host 0.0.0.0 --progress --colors --hot --content-base build"
  },
  "repository": {
    "type": "git",

etc...

Answer 2

All web servers on codeanywhere should be set to respond to 0.0.0.0:Port (0.0.0.0:8080 in your case). You may need to configure your webapp so it doesn't point to localhost instead.

After you start your webapp, you can view your web at http://preview.[really-long-hash].box.codeanywhere.com:8080