pack_tags don't pick up custom host when running webpack-dev-server

[jeromedalbert]

Steps to reproduce

1. Clone the dummy-webpacker-app I made for this issue
2. Follow short README instructions.
   FYI, this app uses Invoker, which is like Foreman but with .dev domains and https support. Here is the content of the Procfile:

   app: bundle exec rails server -p $PORT
   webpacker: ./bin/webpack-dev-server --https --host webpacker.dev --port $PORT
   

3. Go to http://app.dev

Actual

javascript_pack_tag produces the following:

<script src="/packs/application-c5994df31b2a76c55e0a.js"></script>

The browser console complains that it cannot find http://app.dev/packs/application-c5994df31b2a76c55e0a.js. No JS is executed.

Expected

javascript_pack_tag should produce the following (assuming that Invoker chose to use port 9001 for the webpacker process):

<script src="https://webpacker.dev:9001/packs/application-c5994df31b2a76c55e0a.js"></script>

and the browser console output should read Hello World from Webpacker.

Comments

Everything works well if I don't use webpacker-dev-server and let the rails server handle everything.
Everything works well if I just run ./bin/webpack-dev-server manually without any arguments.

The issue came up with Webpacker 3. I had no issue with Webpacker 2.

[gauravtiwari]

@jeromedalbert There is a PR merged on master (to override public option) but yet to be released which consolidates all arguments into one: #843 and allows overriding using env variables instead. Previously, we kinda of had supported everything which made it difficult to manage these options internally, like if you are passing args through CLI but the ruby gem won't know about it etc.

So, if you are using master for both gem and npm module you can run it like so:

app: bundle exec rails server -p $PORT
webpacker: WEBPACKER_DEV_SERVER_HOST=0.0.0.0 WEBPACKER_DEV_SERVER_PUBLIC=webpacker.dev WEBPACKER_DEV_SERVER_PORT=$PORT WEBPACKER_DEV_SERVER_HTTPS=true ./bin/webpack-dev-server

or you could set these env vars in your .env file or something if you are using foreman (which picks up env variable when running processes)

These settings are also available inside webpacker.yml if you install from master branch i.e. bundle exec rails webpacker:install

[jeromedalbert]

I have updated the gem to the latest master, as well as the npm package with yarn add https://github.com/rails/webpacker#master (not sure this is the correct way to do it). Cf this diff in my dummy app.

When I try your suggestion code above, the webpack-dev-server process doesn't seem to pick up the WEBPACKER_DEV_SERVER_X env options, it just uses default values from webpacker.yml.

I think I am doing something wrong but I can't figure out what it is.

[gauravtiwari]

Please could you update binstubs: bundle binstubs webpacker --force

[jeromedalbert]

Thanks I was missing the binstub, now the ENV options are picked up by the webpack-dev-server process.

The original problem still persists: javascript_pack_tag doesn't point to my webpacker.dev dev server, so no javascript gets loaded.

[jeromedalbert]

Don't know if this helps, but here is my public/packs/manifest.json:

{
  "application.js": "/packs/application-646d2e5a8a7a5d6f2ecf.js"
}

And looking at the webpacker ruby source code, the pack_tags get their value from sources_from_pack_manifest / Webpacker.manifest.lookup, which looks up the manifest.json above.

Should the ruby code prepend the looked up path with the dev_server address? Or should the dev server address be directly in the manifest.json path?

[gauravtiwari]

@jeromedalbert You don't need to set host for webpack dev server:

app: bundle exec rails server -p $PORT
webpacker: ./bin/webpack-dev-server

[gauravtiwari]

BTW, forgot to mention - you won't get full urls with dev server, the internal proxy will route that for you: https://github.com/rails/webpacker/blob/master/lib/webpacker/dev_server_proxy.rb#L11

[gauravtiwari]

For HTTPS:

app: bundle exec rails server -p $PORT
webpacker: WEBPACKER_DEV_SERVER_HTTPS=true ./bin/webpack-dev-server

For custom domain for dev server:

app: bundle exec rails server -p $PORT
webpacker: WEBPACKER_DEV_SERVER_PUBLIC=app.dev:3035 WEBPACKER_DEV_SERVER_HOST=0.0.0.0 WEBPACKER_DEV_SERVER_HTTPS=true ./bin/webpack-dev-server

although you will get SSL error in your console, just open the dev server link and accept the exception.

[gauravtiwari]

Lets keep this open until a new version is released.

[jeromedalbert]

You're right, I don't need to set a webpacker particular host, I just need https through any host for one of my apps, and proxying through app.dev works just as well.

I can see that it works for you in your GIF, but for me when an https request is done to https://app.dev/packs/application-xxxxxxxxxxxxxxxxxxxx.js, I get the following stack trace:

Puma caught this error: SSL_connect SYSCALL returned=5 errno=0 state=SSLv2/v3 read server hello A (OpenSSL::SSL::SSLError)
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/2.4.0/net/protocol.rb:44:in `connect_nonblock'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/2.4.0/net/protocol.rb:44:in `ssl_socket_connect'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/2.4.0/net/http.rb:948:in `connect'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/2.4.0/net/http.rb:887:in `do_start'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/2.4.0/net/http.rb:882:in `start'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rack-proxy-0.6.2/lib/rack/http_streaming_response.rb:71:in `session'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rack-proxy-0.6.2/lib/rack/http_streaming_response.rb:60:in `response'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rack-proxy-0.6.2/lib/rack/http_streaming_response.rb:29:in `headers'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rack-proxy-0.6.2/lib/rack/proxy.rb:120:in `perform_request'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/bundler/gems/webpacker-bb6d126caa88/lib/webpacker/dev_server_proxy.rb:15:in `perform_request'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rack-proxy-0.6.2/lib/rack/proxy.rb:57:in `call'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/engine.rb:522:in `call'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/puma-3.10.0/lib/puma/configuration.rb:225:in `call'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/puma-3.10.0/lib/puma/server.rb:605:in `handle_request'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/puma-3.10.0/lib/puma/server.rb:437:in `process_client'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/puma-3.10.0/lib/puma/server.rb:301:in `block in run'
/Users/jerome/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/puma-3.10.0/lib/puma/thread_pool.rb:120:in `block in spawn_thread'

(Maybe related: I am using macOS High Sierra released yesterday, and I recently updated my ruby version to 2.4.2)

[gauravtiwari]

Does it work without https?

[jeromedalbert]

Nevermind, I must have done something wrong, it works! 👍 Thanks for your help & patience!

I ended up with your first suggestion:

app: bundle exec rails server -p $PORT
webpacker: WEBPACKER_DEV_SERVER_HTTPS=true ./bin/webpack-dev-server

and made sure to access https://app.dev through https for everything to work.

[gauravtiwari]

Awesome 👍