Configuration when using cloud9 as a dev platform

[chprome]

Hello,

I use cloud9 as a dev platform, it is a dev environment hosted on the cloud : the IDE is in the browser.

I managed to configure my electrode app to make it reachable from the outside (localhost is not an option asmy app is running on cloud9 server) :

I edited the development.json file

{
    "connections": {
        "default": {
            "port": 8081,
            "host": "<cloud 9 workskapce hostname>",
            "compression": false
        }
    }
}

and I can reach my app with http://<cloud 9 workskapce hostname>:8081.

So far, so good.
However, the static resources (css & js file) are not loaded as they are referenced as:
http://localhost:2992/js/style.css
and
http://localhost:2992/js/bundle.dev.js

From what I understood, webpack is serving those files.

Is their a way to configure the host and port of webpack as I did for my electrode server ?

Thanks in advance,
Cheers

Christophe

[jchip]

Hi, thank you for taking the time to try this out on cloud9. That is incredible.

The webpack-dev-server endpoints for the static files are only active and used when you are running with webpack-dev-server.

When you are running the server on its own, the server uses the inert plugin and the electrode-static-files decor https://github.com/electrode-io/electrode-static-paths#static-files to serve files at the port you configured in your config files.

[chprome]

Hi,

Thank you for your reply and for sharing work with the community !

In fact, I am using the dev mode.
From my cloud9 workspace, in a terminal I run :

gulp dev

And in the log I see :

[11:11:29] Using gulpfile ~/workspace/gulpfile.js
[11:11:29] Starting 'dev'...
[11:11:29] Starting '.webpack-dev'...
[11:11:29] Finished '.webpack-dev' after 145 μs
[11:11:29] Starting 'server-dev'...
[11:11:29] Starting 'server-watch-$deps$'...
[11:11:29] Starting '.init-bundle.valid.log'...
[11:11:29] Finished '.init-bundle.valid.log' after 1.63 ms
[11:11:29] Finished 'server-watch-$deps$' after 4.4 ms
[11:11:29] Starting 'server-watch'...
[11:11:29] Starting 'generate-service-worker'...
[11:11:29] Finished 'generate-service-worker' after 357 μs
[nodemon] 1.10.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: .etmp/bundle.valid.log /home/ubuntu/workspace/server/**/* /home/ubuntu/workspace/config/**/*
Entry point configuration is not found, using default entry point...
isomorphic-loader webpack plugin: removed existing config file
  0% compile http://localhost:2992/webpack-dev-server/
webpack result is served from http://localhost:2992/js/
content is served from /home/ubuntu/workspace
webpack bundle is now VALID 
webpack report is served from http://localhost:2992/reporter
[nodemon] restarting due to changes...
[nodemon] starting `node server/index.js`
staticPaths Plugin: static files path prefix "dist"

Hapi.js server running at http://<cloud9.workspace.host.name>:8081

This line in particular :

webpack result is served from http://localhost:2992/js/

I would like webpack to server the assets from http://<cloud9.workspace.host.name>:8081/js/

How can I achieve this ?

Thanks
Christophe

[jchip]

I see. At the moment the port 2992 can't be changed but I am planning to make a change to that. However, webpack-dev-server would have to listen on a different port than the main server for obvious reasons. Would that work for you?

The port is set here https://github.com/electrode-io/electrode-archetype-react-app/blob/master/config/archtype.js#L16.

Is there a reason you are running with webpack-dev-server like that?

[chprome]

It should work, thanks.
I want to use this port because cloud9 only allows ports 8080, 8081 & 8082 to be used.

Cheers,
Christophe

[jchip]

electrode-archetype-react-app 1.3.2 supports env WEBPACK_DEV_PORT, you can set that to the port you want.

[chprome]

Thanks jchip.

I had to make additional edits :

in node_modules/electrode-archetype-react-app/config/archetype.js :

webpack: {
    devHostname: "my-workspace.my-cloud9-username.c9users.io", // edit
    devPort: getInt(process.env.WEBPACK_DEV_PORT, 2992),
    testPort: getInt(process.env.WEBPACK_TEST_PORT, 3001),
    modulesDirectories: []
  },

It would be good to be able to set an env variable for the hostname aswel.

and in server/plugins/webapp/index.js :

const pluginOptionsDefaults = {
    pageTitle: "Untitled Electrode Web Application",
    webpackDev: process.env.WEBPACK_DEV === "true",
    renderJS: true,
    serverSideRendering: true,
    devServer: {
      host: "my-workspace.my-cloud9-username.c9users.io", //edit
      port: "8082" // edit
    },
    paths: {},
    stats: "dist/server/stats.json"
  };

Now webpack serves it at my-workspace.my-cloud9-username.c9users.io:8082 :

Entry point configuration is not found, using default entry point...
isomorphic-loader webpack plugin: removed existing config file
  0% compile http://localhost:8082/webpack-dev-server/
webpack result is served from http://my-workspace.my-cloud9-username.c9users.io:8082/js/
content is served from /home/ubuntu/workspace
webpack bundle is now VALID 

But the browser fail to get the resource (HTTP 503)
It think that it's on Cloud 9 side as it does not see the app running on port 8082

Cheers
Christophe

[datvong-wm]

Close due to inactivity