New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Packs not generated when using docker #1019

Closed
kairon-v opened this Issue Nov 17, 2017 · 19 comments

Comments

Projects
None yet
7 participants
@kairon-v
Copy link

kairon-v commented Nov 17, 2017

I have a rails 5.1.4 app with webpacker and react on rails gem.

The terminal shows that all files were compiled successfully webpack: Compiled successfully.. When I try to visit some page that uses a pack, it throws an error 404 for the pack files.

No files are created in the public/packs folder, except manifest.json.

I also tried putting the webpacker command ./bin/webpack-dev-server --host 0.0.0.0 in the docker-compose, but it didn't worked as well.

@kairon-v

This comment has been minimized.

Copy link
Author

kairon-v commented Nov 18, 2017

Update: I reinstalled webpacker and changed the host to 0.0.0.0 at the webpacker.yml

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

This is what is get:

web_1        | Started GET "/hello_world" for 172.19.0.1 at 2017-11-18 03:42:45 +0000
web_1        | Cannot render console from 172.19.0.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
web_1        |    (0.9ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
web_1        | Processing by HelloWorldController#index as HTML
web_1        |   Rendering hello_world/index.html.erb within layouts/hello_world
web_1        |   Rendered hello_world/index.html.erb within layouts/hello_world (2.9ms)
web_1        | Completed 200 OK in 112ms (Views: 101.9ms | ActiveRecord: 0.0ms)
web_1        | 
web_1        | 
web_1        | Started GET "/packs/hello-world-bundle-4079a991d9ff87ef0347.js" for 172.19.0.1 at 2017-11-18 03:42:45 +0000
web_1        | Cannot render console from 172.19.0.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
web_1        |   
web_1        | ActionController::RoutingError (No route matches [GET] "/packs/hello-world-bundle-4079a991d9ff87ef0347.js"):
web_1        |   
web_1        | actionpack (5.1.4) lib/action_dispatch/middleware/debug_exceptions.rb:63:in `call'
web_1        | web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
web_1        | web-console (3.5.1) lib/web_console/middleware.rb:20:in `block in call'
web_1        | web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch'
web_1        | web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
web_1        | actionpack (5.1.4) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
web_1        | railties (5.1.4) lib/rails/rack/logger.rb:36:in `call_app'
web_1        | railties (5.1.4) lib/rails/rack/logger.rb:24:in `block in call'
web_1        | activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `block in tagged'
web_1        | activesupport (5.1.4) lib/active_support/tagged_logging.rb:26:in `tagged'
web_1        | activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `tagged'
web_1        | railties (5.1.4) lib/rails/rack/logger.rb:24:in `call'
web_1        | sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in `call'
web_1        | actionpack (5.1.4) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
web_1        | actionpack (5.1.4) lib/action_dispatch/middleware/request_id.rb:25:in `call'
web_1        | rack (2.0.3) lib/rack/method_override.rb:22:in `call'
web_1        | rack (2.0.3) lib/rack/runtime.rb:22:in `call'
web_1        | activesupport (5.1.4) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
web_1        | actionpack (5.1.4) lib/action_dispatch/middleware/executor.rb:12:in `call'
web_1        | actionpack (5.1.4) lib/action_dispatch/middleware/static.rb:125:in `call'
web_1        | rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
web_1        | /usr/local/bundle/bundler/gems/webpacker-3b09f788ec7f/lib/webpacker/dev_server_proxy.rb:17:in `perform_request'
web_1        | rack-proxy (0.6.2) lib/rack/proxy.rb:57:in `call'
web_1        | railties (5.1.4) lib/rails/engine.rb:522:in `call'
web_1        | puma (3.10.0) lib/puma/configuration.rb:225:in `call'
web_1        | puma (3.10.0) lib/puma/server.rb:605:in `handle_request'
web_1        | puma (3.10.0) lib/puma/server.rb:437:in `process_client'
web_1        | puma (3.10.0) lib/puma/server.rb:301:in `block in run'
web_1        | puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'
@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

gauravtiwari commented Nov 18, 2017

@kairon-v Are you sure webpack dev server is also running along side rails server?

@kairon-v

This comment has been minimized.

Copy link
Author

kairon-v commented Nov 18, 2017

@gauravtiwari Sure. You can see the log below.

When I disable the webpack-dev-server and use the lazy compilation, the packs are created without problems.

Starting acars_app_db_1 ... 
Starting acars_app_db_1
Starting acars_app_webpacker_1 ... 
Starting acars_app_webpacker_1 ... done
Starting acars_app_web_1 ... 
Starting acars_app_web_1 ... done
Attaching to acars_app_db_1, acars_app_webpacker_1, acars_app_web_1
db_1         | 2017-11-18 15:01:45.829 UTC [1] LOG:  listening on IPv4 address "0.0.0.0", port 5432
db_1         | 2017-11-18 15:01:45.829 UTC [1] LOG:  listening on IPv6 address "::", port 5432
db_1         | 2017-11-18 15:01:45.974 UTC [1] LOG:  listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
db_1         | 2017-11-18 15:01:46.199 UTC [23] LOG:  database system was shut down at 2017-11-18 15:00:16 UTC
db_1         | 2017-11-18 15:01:46.258 UTC [1] LOG:  database system is ready to accept connections
webpacker_1  | Using rake 12.1.0
webpacker_1  | Using concurrent-ruby 1.0.5
webpacker_1  | Using i18n 0.9.0
webpacker_1  | Using minitest 5.10.3
webpacker_1  | Using thread_safe 0.3.6
webpacker_1  | Using tzinfo 1.2.3
webpacker_1  | Using activesupport 5.1.4
webpacker_1  | Using builder 3.2.3
webpacker_1  | Using erubi 1.7.0
webpacker_1  | Using mini_portile2 2.3.0
webpacker_1  | Using nokogiri 1.8.1
webpacker_1  | Using rails-dom-testing 2.0.3
webpacker_1  | Using crass 1.0.2
webpacker_1  | Using loofah 2.1.1
webpacker_1  | Using rails-html-sanitizer 1.0.3
webpacker_1  | Using actionview 5.1.4
webpacker_1  | Using rack 2.0.3
webpacker_1  | Using rack-test 0.7.0
webpacker_1  | Using actionpack 5.1.4
webpacker_1  | Using nio4r 2.1.0
webpacker_1  | Using websocket-extensions 0.1.2
webpacker_1  | Using websocket-driver 0.6.5
webpacker_1  | Using actioncable 5.1.4
webpacker_1  | Using globalid 0.4.0
webpacker_1  | Using activejob 5.1.4
webpacker_1  | Using mime-types-data 3.2016.0521
webpacker_1  | Using mime-types 3.1
webpacker_1  | Using mail 2.6.6
webpacker_1  | Using actionmailer 5.1.4
webpacker_1  | Using activemodel 5.1.4
webpacker_1  | Using arel 8.0.0
webpacker_1  | Using activerecord 5.1.4
webpacker_1  | Using public_suffix 3.0.0
webpacker_1  | Using addressable 2.5.2
webpacker_1  | Using bcrypt 3.1.11
webpacker_1  | Using bindex 0.5.0
webpacker_1  | Using bundler 1.16.0
webpacker_1  | Using byebug 9.1.0
webpacker_1  | Using mini_mime 0.1.4
webpacker_1  | Using xpath 2.1.0
webpacker_1  | Using capybara 2.15.4
webpacker_1  | Using ffi 1.9.18
webpacker_1  | Using childprocess 0.8.0
webpacker_1  | Using coffee-script-source 1.12.2
webpacker_1  | Using execjs 2.7.0
webpacker_1  | Using coffee-script 2.4.1
webpacker_1  | Using method_source 0.9.0
webpacker_1  | Using thor 0.20.0
webpacker_1  | Using railties 5.1.4
webpacker_1  | Using coffee-rails 4.2.2
webpacker_1  | Using connection_pool 2.2.1
webpacker_1  | Using orm_adapter 0.5.0
webpacker_1  | Using responders 2.4.0
webpacker_1  | Using warden 1.2.7
webpacker_1  | Using devise 4.3.0
webpacker_1  | Using multi_json 1.12.2
webpacker_1  | Using jbuilder 2.7.0
webpacker_1  | Using libv8 5.9.211.38.1 (x86_64-linux)
webpacker_1  | Using rb-fsevent 0.10.2
webpacker_1  | Using rb-inotify 0.9.10
webpacker_1  | Using ruby_dep 1.5.0
webpacker_1  | Using listen 3.1.5
webpacker_1  | Using mini_racer 0.1.14
webpacker_1  | Using pg 0.18.4
webpacker_1  | Using puma 3.10.0
webpacker_1  | Using rack-proxy 0.6.2
webpacker_1  | Using sprockets 3.7.1
webpacker_1  | Using sprockets-rails 3.2.1
webpacker_1  | Using rails 5.1.4
webpacker_1  | Using rainbow 2.2.2
webpacker_1  | Using react_on_rails 10.0.2
webpacker_1  | Using rubyzip 1.2.1
webpacker_1  | Using sass-listen 4.0.0
webpacker_1  | Using sass 3.5.2
webpacker_1  | Using tilt 2.0.8
webpacker_1  | Using sass-rails 5.0.6
webpacker_1  | Using selenium-webdriver 3.6.0
webpacker_1  | Using spring 2.0.2
webpacker_1  | Using spring-watcher-listen 2.0.1
webpacker_1  | Using time_of_day_attr 2.0.1
webpacker_1  | Using turbolinks-source 5.0.3
webpacker_1  | Using turbolinks 5.0.1
webpacker_1  | Using uglifier 3.2.0
webpacker_1  | Using web-console 3.5.1
webpacker_1  | Using webpacker 3.0.2 from https://github.com/rails/webpacker.git (at master@3b09f78)
webpacker_1  | Bundle complete! 21 Gemfile dependencies, 85 gems now installed.
webpacker_1  | Bundled gems are installed into `/usr/local/bundle`
webpacker_1  |  10% building modules 2/2 modules 0 active                                         
webpacker_1  | Project is running at http://localhost:3035/
webpacker_1  | webpack output is served from /packs/
webpacker_1  | Content not from webpack is served from /acars_app/public/packs
webpacker_1  | 404s will fallback to /index.html
web_1        | => Booting Puma
web_1        | => Rails 5.1.4 application starting in development 
web_1        | => Run `rails server -h` for more startup options
web_1        | yarn check v1.2.1
Hash: ddc5fb58386591d58de0                                                              
webpacker_1  | Version: webpack 3.8.1
webpacker_1  | Time: 2922ms
webpacker_1  |                                      Asset       Size  Chunks                    Chunk Names
webpacker_1  | hello-world-bundle-87b027416329aa94d3f2.js    3.06 MB       0  [emitted]  [big]  hello-world-bundle
webpacker_1  |        hello_react-65595c9693971be388fa.js    2.53 MB       1  [emitted]  [big]  hello_react
webpacker_1  |                              manifest.json  148 bytes          [emitted]         
webpacker_1  |    [5] ./node_modules/react/index.js 190 bytes {0} {1} [built]
webpacker_1  |   [24] ./node_modules/react-dom/index.js 1.36 kB {0} {1} [built]
webpacker_1  |   [30] (webpack)-dev-server/client?http://localhost:3035 7.95 kB {0} {1} [built]
webpacker_1  |   [31] ./node_modules/url/url.js 23.3 kB {0} {1} [built]
webpacker_1  |   [38] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]
webpacker_1  |   [40] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0} {1} [built]
webpacker_1  |   [41] (webpack)-dev-server/client/socket.js 1.05 kB {0} {1} [built]
webpacker_1  |   [43] (webpack)-dev-server/client/overlay.js 3.73 kB {0} {1} [built]
webpacker_1  |   [48] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} {1} [built]
webpacker_1  |  [102] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_react.jsx 40 bytes {1} [built]
webpacker_1  |  [103] ./app/javascript/packs/hello_react.jsx 739 bytes {1} [built]
webpacker_1  |  [104] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello-world-bundle.js 40 bytes {0} [built]
webpacker_1  |  [105] ./app/javascript/packs/hello-world-bundle.js 236 bytes {0} [built]
webpacker_1  |  [106] ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js 9.15 kB {0} [built]
webpacker_1  |  [162] ./app/javascript/bundles/HelloWorld/components/HelloWorld.jsx 3.34 kB {0} [built]
webpacker_1  |     + 148 hidden modules
webpacker_1  | webpack: Compiled successfully.
web_1        | success Folder in sync.
web_1        | Done in 0.29s.
web_1        | ReactOnRails: Set generated_assets_dir to default: public/webpack/development
web_1        | Puma starting in single mode...
web_1        | * Version 3.10.0 (ruby 2.3.3-p222), codename: Russell's Teapot
web_1        | * Min threads: 5, max threads: 5
web_1        | * Environment: development
web_1        | * Listening on tcp://0.0.0.0:3000
web_1        | Use Ctrl-C to stop
@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

gauravtiwari commented Nov 18, 2017

Could you change public to public: 0.0.0.0:3035 as well please in webpacker.yml?

@kairon-v

This comment has been minimized.

Copy link
Author

kairon-v commented Nov 18, 2017

I changed inline to inline: false and it worked, for the first compilation.
Current working configuration:

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

With the following configuration it does not work:

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

Even if I change host to host: 0.0.0.0 and public to public: 0.0.0.0.

I would like to use hmr, but it's better than nothing.

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

gauravtiwari commented Nov 18, 2017

public should be: 0.0.0.0:3035 i.e host:port

@kairon-v

This comment has been minimized.

Copy link
Author

kairon-v commented Nov 18, 2017

I'm sorry. I meant 0.0.0.0:3035

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

gauravtiwari commented Nov 18, 2017

Ahh right, have tried lately with Docker but this seemed to have worked last time. Will test it out and post an example.

@kairon-v

This comment has been minimized.

Copy link
Author

kairon-v commented Nov 19, 2017

I appreciate your help very much

@Congrammers

This comment has been minimized.

Copy link

Congrammers commented Nov 21, 2017

I had the same exact problems,
this is the main cause I presume, #804

rm -rf public/packs does convince me webpack-dev-server is the problem.

so I simply put

webpacker:
    ...
    command: bash -c "rm -rf /app/public/packs; /app/bin/webpack-dev-server"
    volumes:
      - .:/app

as a workaround.

@kairon-v

This comment has been minimized.

Copy link
Author

kairon-v commented Nov 23, 2017

Thank you, @Congrammers!

With the suggestion of a friend, what worked for us was to remove the webpacker from docker-compose.yml and run docker-compose exec web bin/webpack-dev-server in a separated terminal tab, after the container is created running docker-compose up.

@kairon-v kairon-v closed this Nov 23, 2017

@smartygus

This comment has been minimized.

Copy link

smartygus commented Dec 12, 2017

@gauravtiwari @kairon-v I also had the same problem, in that when trying to run the webpack-dev-server from a container as part of a Docker Compose setup, I get a 404 on the application-[hash].js file.

For reference, I managed to solve it by changing the host in webpacker.yml to match that of the container in docker-compose.yml (which makes sense, because the webpack-dev-server is in this configuration no longer running on localhost with respect to the app server, but on another host).

So my docker-compose.yml looks like this:

version: '3'
services:
  webpacker:
    build: .
    command: bash -c "rm -rf /usr/src/app/public/packs; /usr/src/app/bin/webpack-dev-server"
    volumes:
      - .:/usr/src/app
    ports:
      - "3035:3035"
  postgres:
    image: postgres:9.6
    ports:
      - "5432"
  app:
    build: .
    command: bash -c "rm /usr/src/app/tmp/pids/server.pid; bundle exec rails server -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/usr/src/app
    ports:
      - "3000:3000"
    depends_on:
      - webpacker
      - postgres

And the dev_server section in my webpacker.yml looks like this:

  dev_server:
    https: false
    host: webpacker # <-- this is necessary if running webpack-dev-server from another container!
    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

Lastly, due to the new CSP stuff, I also had to update the CSP with a connect_src policy (only in development mode) in config/initializers/content_security_policy.rb to allow connections to the webpack server. I'm no expert with webpack (literally just getting started with my first project), so I'm not sure if there's a better way to get around this?

Rails.application.config.content_security_policy do |p|
  p.default_src :self, :https
  p.font_src    :self, :https, :data
  p.img_src     :self, :https, :data
  p.object_src  :none
  p.script_src  :self, :https
  p.style_src   :self, :https, :unsafe_inline
  
  # To allow connections to the webpack-dev-server running in
  # a separate docker container
  if Rails.env.development?
    p.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035', 'http://0.0.0.0:3035', 'ws://0.0.0.0:3035'
  end
  
  # Specify URI for violation reports
  # p.report_uri "/csp-violation-report-endpoint"
end

I'm guessing having some kind of example like this would be helpful for others, seeing as it's taken me (as a long-time Rails dev, but webpack newbie) quite a while to figure out :)

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

gauravtiwari commented Dec 12, 2017

Great 👍

We have documented the CSP change in the README: https://github.com/rails/webpacker#development (at the bottom of this section)

@smartygus

This comment has been minimized.

Copy link

smartygus commented Dec 12, 2017

@gauravtiwari Oh nice, good that that's documented somewhere 😉

@gauravtiwari

This comment has been minimized.

Copy link
Collaborator

gauravtiwari commented Dec 12, 2017

Thanks for sharing anyway ❤️

@casiodk

This comment has been minimized.

Copy link

casiodk commented Mar 18, 2018

I keep getting this error

Webpacker can't find organization_dropdown.js in /soundtracktor-site/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/application-6c6236bb6efd38153941.js",
  "application.js.map": "/packs/application-6c6236bb6efd38153941.js.map"
}

I have been trying to fix it for 6 hours, but I need some help

I´m running on mac + docker

Here is my setup

webpacker.yml

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

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

And my docker-compose.yml

version: '3'

services:
  app: &app
    build: .
    image: myapp-web
    depends_on:
      - box
    volumes:
      - .:/myapp
      - gem_cache:/gems
  box:
    image: busybox
    volumes:
      - gem_cache:/gems
  web:
    <<: *app
    command: bundle exec puma -C config/puma.rb -p 3000
    ports:
    - "3001:3000"
    restart: always
    environment:
    - RAILS_ENV=development
    - WEBPACKER_DEV_SERVER_HOST=webpack

  webpack:
    <<: *app
    command: ./bin/webpack-dev-server
    ports:
      - 3035:3035
    environment:
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
volumes:
  gem_cache:

And my package.json


{
  "name": "myapp",
  "private": true,
  "author": "<mail@myapp.com>",
  "engines": {
    "yarn": ">=0.25.2"
  },
  "dependencies": {
    "@rails/webpacker": "^3.3.1",
    "autoprefixer": "^7.1.2",
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.7",
    "coffeescript": "1.12.7",
    "compression-webpack-plugin": "^1.0.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "glob": "^7.1.2",
    "js-yaml": "^3.9.0",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.5",
    "precss": "^2.0.0",
    "prop-types": "^15.5.10",
    "rails-erb-loader": "^5.0.2",
    "react": "^15.6.1",
    "react-autosuggest": "^9.3.4",
    "react-dom": "^15.6.1",
    "react-dropdown": "^1.3.1",
    "react-instantsearch": "^4.1.3",
    "react-modal": "^3.3.1",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.11.1",
    "webpack-manifest-plugin": "^1.2.1",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "from": "^0.1.7"
  }
}

What am I missing here?

@dvmonroe

This comment has been minimized.

Copy link

dvmonroe commented Mar 18, 2018

@casiodk your dev_server keys in webpacker.yml look incorrect per the discussion above:

You need to change localhost to 0.0.0.0. An example working config:

  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
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/

For anyone else who lands here, I too was having an issue where only the manifest.json file was getting populated under public/packs when running my docker-compose up and was left with an error like:

development_1  | Started GET "/packs/application-efb7fadf0c3e5b9ba0cc.js" for 172.18.0.1 at 2018-03-18 15:23:40 +0000
development_1  |
development_1  | ActionController::RoutingError (No route matches [GET] "/packs/application-efb7fadf0c3e5b9ba0cc.js"):

This would also happen after running docker-compose down and then a subsequent up where the packs already existed under public/packs.

There is a file under tmp/cache/webpacker that gets created when you compile called: .last-compilation-digest-development. This file would be created wherever you define your cache path on webpacker.yml. Default example:

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

I found two potential solutions here

  1. Either add tmp/cache/webpacker to your .dockerignore file
  2. OR delete this file on your webpacker cmd:
webpacker:
    <<: *base
    env_file: .env.development
    command:  bash -c "rm -f tmp/cache/webpacker/.last-compilation-digest-development && bin/webpack-dev-server"
    ports:
      - '3035:3035'

I don't think either solution is that great as there must be a way to make use of docker's caching layer. Maybe a volume for the packs is the right way to go? Perhaps @gauravtiwari could weigh in? Does this need to be in webpacker's documentation?

Sorry for commenting on a closed issue but this took me a while to figure out so hopefully it can be helpful to someone else who lands here.

@casiodk

This comment has been minimized.

Copy link

casiodk commented Mar 18, 2018

It is still not working :(

"Webpacker can't find organization_dropdown.js in /myapp/public/packs/manifest.json. Possible causes:"

Seems like the organization_dropdown.js file is not compiled?

@briankelleher

This comment has been minimized.

Copy link

briankelleher commented Jul 23, 2018

Ok - with a combination of the answers above, I was able to get a working project with rails in one container and webpacker in the second container. Arguably you can run the webpack-dev-server process in the same container, but I decided to not have to run that in the background, as to best take advantage of docker logging.

99% of the way there, the ONLY thing that isn't working is the HTTP request/WS request from the front-end to /sockjs-node/info?t=999 call.

docker-compose.yml:

version: '3'
services:
  web:
    image: teamloki/rails:latest
    ports:
      - "3000:3000"
    volumes:
      - ./:/var/www/app
    working_dir: /var/www/app
    entrypoint: ["./bin/entrypoint.sh"]
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
    depends_on:
      - webpack
  webpack:
    image: teamloki/rails:latest
    working_dir: /var/www/app
    volumes:
      - ./:/var/www/app
    entrypoint: ["./bin/entrypoint-node.sh"]
    ports:
      - "3035:3035"
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development

relevant part of webpacker.yml:

development:
  <<: *default
  compile: true

  dev_server:
    host: webpack
    public: 0.0.0.0:3035
    port: 3035
    hmr: false
    https: false
    inline: true
    overlay: true
    disable_host_check: true
    use_local_ip: false

Has anybody gotten the browser-reloading to work via this method? With host set to webpack (or the name of your service), the packs load, but the request for sockjs-node get sent to http://webpack:3035/sockjs-node. If I type http://0.0.0.0:3035/sockjs-node/info? into my browser, the proper response shows. I tried changing host to 0.0.0.0, but then the packs do not load appropriately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment