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

Steps to reproduce

Clone the dummy-webpacker-app I made for this issue
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
```
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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 26 (18 by maintainers)

Most upvoted comments

Solved here as well.

docker-compose.yml

version: '3'

services:
  webpacker:
    build: .
    command: bundle exec bin/webpack-dev-server
    environment:
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
    volumes:
      - .:/app
    ports:
      - 8080:8080

  app:
    build: .
    command: /bin/sh -c "rm -f /app/tmp/pids/server.pid && rails server -b 0.0.0.0"
    working_dir: /app 
    environment:
      - RAILS_ENV=development
      - BUNDLE_JOBS=15
      - BUNDLE_RETRY=3
      - WEBPACKER_DEV_SERVER_HOST=webpacker
    volumes:
      - .:/app
    ports:
      - 3000:3000
    links:
      - postgres
    depends_on:
      - webpacker
      
  postgres:
    image: postgres:9.4
    volumes:
      - /var/lib/postgresql/data
    ports:
      - 5432:5432

webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # resolved_paths: ['app/assets']

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

development:
  <<: *default

  dev_server:
    https: false
    host: 0.0.0.0
    port: 8080
    public: 0.0.0.0:8080
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    disable_host_check: true
    use_local_ip: false

test:
  <<: *default

  public_output_path: packs-test

production:
  <<: *default

Thanks guys

thadeu on Dec 21, 2017

Thanks, that worked. I’ve also had to edit webpack settings:

  dev_server:
    https: false
    host: 0.0.0.0
    port: 3035
    public: 0.0.0.0:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    disable_host_check: true
    use_local_ip: false

My docker looks like this, now:

version: '3'
services:
  db:
    image: postgres
  webpacker:
    build: .
    environment:
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    command: bundle exec bin/webpack-dev-server
    volumes:
      - .:/app
    ports:
      - "3035:3035"
  web:
    build: .
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpacker
    command: bash -c "rm -rf ./tmp/pids/server.pid && bundle exec rails s -p 4000 -b '0.0.0.0'"
    volumes:
      - .:/app
    ports:
      - "4000:4000"
    depends_on:
      - db

hovancik on Nov 22, 2017

@hovancik Try to add WEBPACKER_DEV_SERVER_HOST: webpacker to your web service

evserykh on Nov 21, 2017

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 on Sep 26, 2017

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

gauravtiwari on Sep 26, 2017