Webpacker: Making Webpacker run on Cloud 9

[aalvrz]

As previously discussed in PR #107, I am having trouble making webpack work with Rails in my development environment, which is Cloud 9.

The problem seems to be that Cloud 9 only allows the 0.0.0.0 interface and a few ports (8080, 8081, etc.).

Basically, I am experiencing the same problem as in this issue. It seems fixed they problem by adding webpack-dev-server/client?https://0.0.0.0:8080 as an entry point to webpack.config.js. However, in the setup with Rails I am not sure where to go about in adding this modification, since I do not see any webpack.config.js file. I am assuming that config/webpack/development.js would be represent something similar though.

[gauravtiwari]

@BigChief45 I think this PR will fix the problem - https://github.com/rails/webpacker/pull/153
Provides some configuration options around setting up host and port. If you want to add another entry you can do that by creating an entry option in development.server.js - https://github.com/gauravtiwari/webpacker/blob/d73ca357663c3007544d70a31e1de4de25d05fc5/lib/install/config/webpack/development.server.js

[ytbryan]

@BigChief45 are you able to test Gaurav's PR on cloud9?

You will need to run it on a fresh app with `gem 'webpacker', github: 'gauravtiwari/webpacker', branch: 'feature/static-assets' because this PR has some structural changes.

Follow the instruction here #153

After you are done, you can change the host and port at config/webpack/development.server.yml

[gauravtiwari]

The PR is now merged so, you can try this out using master - gem 'webpacker', github: 'rails/webpacker'. You probably have to re-run installers as a lot has changed.

bundle exec rails webpacker:install and if you are using react or vue or angular
bundle exec rails webpacker:install:[name]

[aalvrz]

Sorry guys, was a bit busy these past days.

I gave it a try with the new changes. I think I have the right setup now but I think C9 is not allowing the requests from Rails to Webpack if they are not through HTTPS.

[gauravtiwari]

You could set https: true in devserver config? https://webpack.js.org/configuration/dev-server/#devserver-https

[aalvrz]

I did that but it seems that I also had to add https to publicPath in configuration.js

[gauravtiwari]

right, so it seems we might need to add a configuration for protocol too.

[ytbryan]

@BigChief45 can you confirm that it works after you add https to publicPath? Some affirmation answer will be helpful.

[aalvrz]

@ytbryan I am trying to. Browser console does not show any messages anymore, but I still cannot get Vue to work.

I am running webpack dev server in 0.0.0.0 (https), port 8080. Rails is running in 0.0.0.0 port 8081.

My view code is the following:

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<div id="hello">

</div>

<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'hello_vue' %>

However, the only thing that is rendered is the default <h1> and <p> stuff.

I took a look at the requests in the console and found this:

[renchap]

You are still using 0.0.0.0 as the host, which cant work. When a daemon says it listens on 0.0.0.0, it means it listens on all IPs.

You need to put your Cloud 9 hostname as Public Path, the same one as you use for Rails (the one hidden in your screenshot) but on port 8080 (not 8081, which is the port Rails is using).

[aalvrz]

@renchap I am aware of that. But as far as I know, Cloud 9 only allows usage of the 0.0.0.0 "interface" and a few ports.

If I put the hostname hidden from the screenshot into the development.server.yml, then I get this error when trying to run the webpack server:

10% building modules 3/3 modules 0 activeevents.js:160                            
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRNOTAVAIL 104.155.135.102:8080
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Server._listen2 (net.js:1246:19)
    at listen (net.js:1295:10)
    at net.js:1405:9
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)

[gauravtiwari]

@BigChief45 Yes dev-server doesn't work with anything apart from localhost and 0.0.0.0, because it's a dev server apparently 😄

Perhaps, you may consider closing this issue, since this isn't a problem with the gem, but rather a platform specific configuration problem. The gem out-of-the box provides the features needed to make dev-server work in local environment.

[aalvrz]

@gauravtiwari Yes I was afraid of this. I think I will proceed to close this issue, but I might keep trying to find a way around this.

By the way, can you explain the difference between the webpack dev server and the watcher?

[ytbryan]

@BigChief45 you are read this https://github.com/rails/webpacker/issues/179

[aalvrz]

@gauravtiwari @ytbryan Thanks for all the help guys. I will close this issue now, hopefully I can make this work in the future.

[ssemakov]

I'm not sure if OP was able to make it work or not. I was able to make webpack-dev-server work on Cloud 9 when run it as
webpack-dev-server --host $IP --port 8081 --public my-cloud9-application-name.c9users.io:8081. But I also had to change http to https in publicPath of configuration.js to have webpack generate correct manifest.json

@gauravtiwari I see you mentioned adding configuration for protocol to accommodate https

BigChief45 commented on Mar 31
I did that but it seems that I also had to add https to publicPath in configuration.js
gauravtiwari commented on Mar 31
right, so it seems we might need to add a configuration for protocol too.

Will you accept PR with this change?

[pelx]

@ssemakov I have followed your advice but it did not work for me. I cant use webpack-dev-server in Cloudd 9. Webpack in watch mode works.
regards

[aalvrz]

@ssemakov @pelx Hello everyone

I did manage to make this work. However since webpacker has changed a lot since this issue was opened, the way about to make this work is a bit simpler now:

1. Update /etc/hosts

First add the 0.0.0.0 interface and the $C9_HOSTNAME values in /etc/hosts. You can easily do this by running the following command:

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

_If you restart your workspace, you will have to re-do the above step._

2. Webpacker Configuration

Set the host field in your webpacker.yml configuration file to $C9_HOSTNAME. Also make sure HTTPS is set to false, and that you are using port 8081:

dev_server:
  host: "your_domain.c9.io"
  port: 8081
  https: false

To find out which value you should enter for host, run the following in your terminal:

echo $C9_HOSTNAME

---

Run the webpack dev server and then run the Rails server in port 8080 in another terminal. Rails should then be able to fetch the assets from webpack.

[pelx]

@BigChief45 thank you. First of all I did not have /etc/hosts. I created the file and the folder in the application root directory and added $C9_HOSTNAME. I guess /etc/hosts is system folder and not visible.
sudo tee did not work. I tried it locally too and could not do it ('user' is not in the sudoers file)
I started webpack-dev-server in one terminal and rails server in another one.
Result is the same:

GET https://0.0.0.0:8081/packs/application.css net::ERR_EMPTY_RESPONSE
$C9_HOSTNAME/:13 GET https://0.0.0.0:8081/packs/application.js net::ERR_EMPTY_RESPONSE

If I have a host and a port parameters in webpacker.yml file why Cloud 9 complains if I run webpack-dev-server without parameters??

I am giving up on webpack-dev-server and probably on webpacker gem too. I can use webpack and Rails without a "middleman".

40 years ago I would spent 1% on configuration and 99% coding. Now I spent 99% on configuration.

regards

[aalvrz]

@pelx

/etc/hosts is not a folder, but just a simple file (meaning, a file called hosts in the /etc/ directory). You cannot access it through the IDE, but you can edit it using your terminal and a text editor.

Running echo "0.0.0.0 $C9_HOSTNAME" | sudo tee -a /etc/hosts will add the interface and your workspace host name to this file, without having to do it yourself with an editor. You can then check this by using this command:

cat /etc/hosts`

---

If you can share the contents of your config/webpacker.yml file then we might be able to help you better.

I suggest you give it one more try in a fresh new blank workspace.

[pelx]

@BigChief45 you made me smile :)
After 40 years in CP I can tell the difference between a file and a folder. I am not fluent with UNIX. I could not find /etc/folder even showing all files.
cat /etc/hosts`
shows empty prompt even after running tee command.
I am sorry I am going to the airport now. I play with this out of curiosity. I will create a fresh workspace when I am back. I have node version 8 installed. Maybe this is the problem.

this is the yml.
`default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs

extensions:
- .coffee
- .erb
- .js
- .jsx
- .ts
- .vue
- .sass
- .scss
- .css
- .png
- .svg
- .gif
- .jpeg
- .jpg

development:
<<: *default

dev_server:
host: "rapab7-laris.c9users.c9.io"
port: 8081
https: true

test:
<<: *default

public_output_path: packs-test

production:
<<: *default`

this is what I got after I added one row:

laris:~/workspace/shine (master) $ cat /etc/hosts
nanana
cat /etc/hosts bash: nanana: command not found cat: /etc/hosts172.17.0.107: No such file or directory cat: laris-rapab7-4977932: No such file or directory cat: 127.0.0.1: No such file or directory cat: localhost: No such file or directory cat: ::1: No such file or directory cat: localhost: No such file or directory cat: ip6-localhost: No such file or directory cat: ip6-loopback: No such file or directory cat: fe00::0: No such file or directory cat: ip6-localnet: No such file or directory cat: ff00::0: No such file or directory cat: ip6-mcastprefix: No such file or directory cat: ff02::1: No such file or directory cat: ip6-allnodes: No such file or directory cat: ff02::2: No such file or directory cat: ip6-allrouters: No such file or directory cat: 0.0.0.0: No such file or directory cat: rapab7-laris.c9users.io: No such file or directory cat: 0.0.0.0: No such file or directory cat: rapab7-laris.c9users.io: No such file or directory cat: 0.0.0.0: No such file or directory cat: rapab7-laris.c9users.io: No such file or directory
thank you.

[ssemakov]

@BigChief45

1. I believe you don't have to change /etc/hosts if you rundev-server with --public $C9_HOSTNAME:8081. My full command line for the dev-server looks somewhat like this webpack-dev-server --hot --progress --host $IP --port 8081 --public $C9_HOSTNAME:8081
   When done this way no need to update /etc/hosts after workspace restart.

1. You can run it via https too. For that, I had to change webpack/configuration.js:15

- const devServerUrl = `${devServer.protocol}://${devServer.host}:${devServer.port}/${paths.entry}/`
+ const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`

and add protocol key into webpack/development.server.yml

development:
  enabled: true
  host: my-c9-project-hostname
  port: 8081
  protocol: https

[oanstein]

My step by step guide for Ruby on Rails 5.1.x and webpacker (master version 265a54d81cf8)

1. application.html.haml (or erb): add to your %head
   = javascript_pack_tag 'application'
2. change in webpacker.yml (change nothing else):

development:
  <<: *default

  dev_server:
    host: '<my_app_name>.c9users.io'
    port: 8081 # Some unused port
    https: false # is FALSE!

1. Start WebPacker server with:
   bin/webpack-dev-server --public <my_app_name>.c9users.io:8081

=> You can now check if it's working under: (note: httpS)

https://.c9users.io:8081/packs/application.js

You should see some javascript

1. Start your rails server as usual

2. Unfortunately (in this case) your browser will probably block "mixed content"; in chrome you have to manually allow it on this site by clicking on the "shield" icon in your navigation bar (omnibox). Now the following should show up in your browser's console:

   Hello World from Webpacker

PLEASE comment if you've found a solution without the "mixed content" problem

[stephenhmarsh]

I was able to get this work in Rails 5.0 with @ssemakov 's initial solution combined with @BigChief45's hostname command

run:
echo "0.0.0.0 $C9_HOSTNAME" | sudo tee -a /etc/hosts

then run:
./bin/webpack-dev-server --public <app_name>.c9users.io:8081

in chrome browser:

• click the shield to 'allow unsafe scripts' to dismiss the mixed content blocking

webpacker.yml looks like:

development:
  <<: *default

  dev_server:
    host: '<app_name>.c9users.io'
    port: 8081
    https: false

thanks both

[gauravtiwari]

thanks a ton everyone for keeping this thread up to date ❤️

[fedegos]

I'm getting the following error on running ./bin/webpack-dev-server --public '$C9_HOSTNAME'.

Any ideas?

"Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.

• configuration.public should be a string."

[fedegos]

Also, echo "0.0.0.0 $C9_HOSTNAME" | sudo tee -a /etc/hosts needs to be ran on every workspace restart.

Is there a solution to this or are you changing the hosts file on every session?

[pelx]

oanstein, your solution works but the problem with Mixed content remains.
I hoped it will be fixed in the new webpacker version.
thank you.

[rbf]

Thanks to all the commenters here! I finally got this working! 😅🎉

To continue maintaining this thread with updated information, here is the tl;dr version of my approach, building up on the solutions above:

1. Change the development.dev_server entry config/webpacker.yml file into:

   dev_server:
     https: true
     host: your-workspace-name-yourusername.c9users.io
     port: 8082
     public: your-workspace-name-yourusername.c9users.io:8082
     hmr: false
     inline: false
     overlay: true
     disable_host_check: true
     use_local_ip: false
   

2. Add an entry to the /etc/hosts config file by executing:

   echo "0.0.0.0 ${C9_HOSTNAME}" | sudo tee -a /etc/hosts # execute after every restart
   

3. Make sure that you use at least version v3.0.2 of the webpacker gem and that you have the corresponding version of the ./bin/webpack-dev-server binstub.

Now running as usual ./bin/webpack-dev-server in one terminal and ./bin/rails s -b $IP -p $PORT in another should work as expected.

The full details of this solution and a slightly more involved but flexible approach ended up being a bit too long for a comment here, and I wrote them in this article for future reference.

Edit (25nov2017)

As noted by @ssemakov in https://github.com/rails/webpacker/pull/1033#discussion_r153034769, now the host can be left as localhost and so there is no need to modify the /etc/hosts file. (At least with v3.0.2+ of webpacker and the corresponding binstubs).

[gauravtiwari]

Thanks @rbf for sharing. If you have time, feel free to make a PR to add the article to docs please.

[rbf]

Thanks @gauravtiwari.

1. Do you mean creating a new .md file under docs/ or adding a link in the README.md?
2. The article is very narrowly scoped at Cloud9 and v3.0.1 vs v3.0.2 of webpacker. Do you think it worth committing it to the main repo?

[gauravtiwari]

Do you mean creating a new .md file under docs/ or adding a link in the README.md?

A new article under docs: cloud9.md please.

The article is very narrowly scoped at Cloud9 and v3.0.1 vs v3.0.2 of webpacker. Do you think it worth committing it to the main repo?

I think it's fine, just mention that this is for 3.0.2