Rails 6 - Can't network Webpack Dev Server through Docker

Viewed 842

I currently have a Rails 6 app up and running using these relevant gems/libraries:

  • 'rails', '6.1.1' (Ruby gem)
  • 'webpacker', '5.1.1' (Ruby gem)
  • "@rails/webpacker": "^5.1.1" (NPM package)
  • "webpack": "^4.0.0" (NPM package)
  • "webpack-cli": "^3.2.1" (NPM package)
  • "webpack-dev-server": "^3.1.14" (NPM package)

My webpacker.yml file contains the following dev server config:

development:
  <<: *default
  compile: true

  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    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/

When I run it just on my local machine, with one terminal serving the Rails content (bundle exec rails s), and another serving the dev server content (bundle exec bin/webpack-dev-server), things work as expected.

However, I've been trying to move everything to Docker, and cannot get the dev server to play nicely with docker-compose. Here is my (simplified) docker-compose.yml file:

version: '3.4'

services:
  dev: &dev
    image: my_image
    depends_on:
      - webpacker
    entrypoint: ./docker/entrypoints/app-entrypoint.sh
    ports:
      - '3000:3000'
      - '80:80'
      - '22:22'
    env_file: .env
    environment:
      RAILS_ENV: development
      WEBPACKER_DEV_SERVER_HOST: webpacker
      WEBPACKER_DEV_SERVER_PORT: 3035

  webpacker: &webpacker
    image: my_image
    entrypoint: ./docker/entrypoints/webpacker-entrypoint.sh
    ports:
      - '3035:3035'
    environment:
      NODE_ENV: development
      RAILS_ENV: development
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0

When I spin that all up, I can see webpacker serving my assets at http://0.0.0.0:3035. But when I navigate to the homepage of my app, I get this error:

Webpacker can't find application.js in /app/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:
{
}

It's clearly some issue with how everything is being networked, but I've tried every change I could think of to different configuration files and I'm still having no success.

0 Answers
Related