"webpack-dev-server" command not found - Docker with Rails 6 - ruby-on-rails

Question

I'm currently working on "dockerizing" a Rails 6 app with MySQL as backend/admin-panel with an Angular 8 app as frontend for users. I tried to run both containers with docker-compose and the frontend works perfectly but the backend has a problem. The webpack server somehow cannot be started. It always tells me that the "webpack-dev-server" cannot be found and then exits. This is odd because I let the same setup run on a Linux/Ubuntu system and it works fine but on Mac the Webpacker fails.
This is my setup:
OS Catalina: 10.15.1
Node: 10.12.0
Ruby: 2.5.5
Dockerfile:
FROM ruby:2.5.5
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list && \
apt-get update && \
apt-get install -qq -y \
build-essential nodejs yarn libpq-dev \
&& mkdir -p /app \
&& apt-get clean autoclean \
&& apt-get autoremove -y
WORKDIR /tmp
COPY Gemfile* /tmp/
RUN bundle install
COPY package* /tmp/
COPY yarn* /tmp/
RUN yarn install
ADD scripts/entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
WORKDIR /app
COPY . /app
EXPOSE 3000
# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
docker-compose.yml:
version: '3'
services:
backend:
build: ./backend
volumes:
- ./backend:/app
- ./backend/scripts:/scripts
ports:
- "3000:3000"
dns: # Needed for making request outside the container
- 1.1.1.1
command: ["/scripts/wait-for-it.sh", "db:3306", "--", "/scripts/wait-for-it.sh", "webpacker:3035", "--", "/scripts/start_rails.sh"]
depends_on:
- db
- webpacker
- frontend
environment:
DB_PASSWORD: root
DB_HOST: db
WEBPACKER_DEV_SERVER_HOST: webpacker # overwrites the webpacker.yml -> dev_server -> hosts value
db:
image: mariadb:10.4.10
volumes:
- ./volumes/mysql:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: root
webpacker:
build: ./backend
command: ["/app/bin/webpack-dev-server"]
volumes:
- ./backend:/app
ports:
- "3035:3035"
frontend: //This one works fine
build: ./frontend
volumes:
- ./frontend:/app
- ./frontend/node_modules:/app/node_modules
ports:
- '4200:4200'
webpacker.yml:
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/webpacker
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# 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
# Extract and emit a css file
extract_css: true
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: false
# Reference: https://webpack.js.org/configuration/dev-server/
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/**'
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
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
Console output on "docker-compose up" (build works fine):
Creating network "lms_default" with the default driver
Creating lms_db_1 ... done
Creating lms_webpacker_1 ... done
Creating lms_frontend_1 ... done
Creating lms_backend_1 ... done
Attaching to lms_db_1, lms_frontend_1, lms_webpacker_1, lms_backend_1
frontend_1 | Your global Angular CLI version (8.3.23) is greater than your local
frontend_1 | version (8.1.3). The local Angular CLI version is used.
frontend_1 |
frontend_1 | To disable this warning use "ng config -g cli.warnings.versionMismatch false".
db_1 | 2020-01-28 12:11:25+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 1:10.4.10+maria~bionic started.
db_1 | 2020-01-28 12:11:26+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
db_1 | 2020-01-28 12:11:26+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 1:10.4.10+maria~bionic started.
backend_1 | wait-for-it.sh: waiting 15 seconds for db:3306
db_1 | 2020-01-28 12:11:26 0 [Note] mysqld (mysqld 10.4.10-MariaDB-1:10.4.10+maria~bionic) starting as process 1 ...
db_1 | 2020-01-28 12:11:26 0 [Note] InnoDB: Using Linux native AIO
db_1 | 2020-01-28 12:11:26 0 [Note] InnoDB: Mutexes and rw_locks use GCC atomic builtins
db_1 | 2020-01-28 12:11:26 0 [Note] InnoDB: Uses event mutexes
db_1 | 2020-01-28 12:11:26 0 [Note] InnoDB: Compressed tables use zlib 1.2.11
db_1 | 2020-01-28 12:11:26 0 [Note] InnoDB: Number of pools: 1
db_1 | 2020-01-28 12:11:26 0 [Note] InnoDB: Using SSE2 crc32 instructions
db_1 | 2020-01-28 12:11:26 0 [Note] mysqld: O_TMPFILE is not supported on /tmp (disabling future attempts)
db_1 | 2020-01-28 12:11:26 0 [Note] InnoDB: Initializing buffer pool, total size = 256M, instances = 1, chunk size = 128M
db_1 | 2020-01-28 12:11:27 0 [Note] InnoDB: Completed initialization of buffer pool
db_1 | 2020-01-28 12:11:27 0 [Note] InnoDB: If the mysqld execution user is authorized, page cleaner thread priority can be changed. See the man page of setpriority().
db_1 | 2020-01-28 12:11:27 0 [Note] InnoDB: 128 out of 128 rollback segments are active.
db_1 | 2020-01-28 12:11:27 0 [Note] InnoDB: Creating shared tablespace for temporary tables
db_1 | 2020-01-28 12:11:27 0 [Note] InnoDB: Setting file './ibtmp1' size to 12 MB. Physically writing the file full; Please wait ...
webpacker_1 | yarn run v1.21.1
webpacker_1 | error Command "webpack-dev-server" not found.
webpacker_1 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lms_webpacker_1 exited with code 1
db_1 | 2020-01-28 12:11:28 0 [Note] InnoDB: File './ibtmp1' size is now 12 MB.
db_1 | 2020-01-28 12:11:28 0 [Note] InnoDB: 10.4.10 started; log sequence number 20282472; transaction id 14616
db_1 | 2020-01-28 12:11:28 0 [Note] Plugin 'FEEDBACK' is disabled.
db_1 | 2020-01-28 12:11:28 0 [Note] InnoDB: Loading buffer pool(s) from /var/lib/mysql/ib_buffer_pool
db_1 | 2020-01-28 12:11:28 0 [Note] Server socket created on IP: '::'.
db_1 | 2020-01-28 12:11:28 0 [Note] InnoDB: Buffer pool(s) load completed at 200128 12:11:28
db_1 | 2020-01-28 12:11:28 0 [Warning] 'proxies_priv' entry '#% root#c8d38e939209' ignored in --skip-name-resolve mode.
db_1 | 2020-01-28 12:11:28 0 [Note] Reading of all Master_info entries succeeded
db_1 | 2020-01-28 12:11:28 0 [Note] Added new Master_info '' to hash table
db_1 | 2020-01-28 12:11:28 0 [Note] mysqld: ready for connections.
db_1 | Version: '10.4.10-MariaDB-1:10.4.10+maria~bionic' socket: '/var/run/mysqld/mysqld.sock' port: 3306 mariadb.org binary distribution
db_1 | 2020-01-28 12:11:29 8 [Warning] Aborted connection 8 to db: 'unconnected' user: 'unauthenticated' host: '192.168.0.5' (This connection closed normally without authentication)
backend_1 | wait-for-it.sh: db:3306 is available after 3 seconds
backend_1 | wait-for-it.sh: waiting 15 seconds for webpacker:3035
frontend_1 | WARNING: This is a simple server for use in testing or debugging Angular applications
frontend_1 | locally. It hasn't been reviewed for security issues.
frontend_1 |
frontend_1 | Binding this server to an open connection can result in compromising your application or
frontend_1 | computer. Using a different host than the one passed to the "--host" flag might result in
frontend_1 | websocket connection issues. You might need to use "--disableHostCheck" if that's the
frontend_1 | case.
frontend_1 | ℹ ｢wds｣: Project is running at http://0.0.0.0:4200/webpack-dev-server/
frontend_1 | ℹ ｢wds｣: webpack output is served from /
frontend_1 | ℹ ｢wds｣: 404s will fallback to //index.html
backend_1 | wait-for-it.sh: timeout occurred after waiting 15 seconds for webpacker:3035
frontend_1 |
frontend_1 | chunk {0} 0.js, 0.js.map () 13.2 kB [rendered]
frontend_1 | chunk {1} 1.js, 1.js.map () 19.9 kB [rendered]
frontend_1 | chunk {2} 2.js, 2.js.map () 17 kB [rendered]
frontend_1 | chunk {3} 3.js, 3.js.map () 31 kB [rendered]
frontend_1 | chunk {4} 4.js, 4.js.map () 31.1 kB [rendered]
frontend_1 | chunk {5} 5.js, 5.js.map () 57.5 kB [rendered]
frontend_1 | chunk {6} 6.js, 6.js.map () 56.2 kB [rendered]
frontend_1 | chunk {7} 7.js, 7.js.map () 4.59 kB [rendered]
frontend_1 | chunk {8} 8.js, 8.js.map () 4.64 kB [rendered]
frontend_1 | chunk {9} 9.js, 9.js.map () 9.43 kB [rendered]
frontend_1 | chunk {10} 10.js, 10.js.map () 9.97 kB [rendered]
frontend_1 | chunk {11} 11.js, 11.js.map () 3.71 kB [rendered]
frontend_1 | chunk {12} 12.js, 12.js.map () 3.7 kB [rendered]
frontend_1 | chunk {13} 13.js, 13.js.map () 22.7 kB [rendered]
frontend_1 | chunk {14} 14.js, 14.js.map () 22.8 kB [rendered]
frontend_1 | chunk {15} 15.js, 15.js.map () 12 kB [rendered]
frontend_1 | chunk {16} 16.js, 16.js.map () 11.6 kB [rendered]
frontend_1 | chunk {17} 17.js, 17.js.map () 8.39 kB [rendered]
frontend_1 | chunk {18} 18.js, 18.js.map () 8.52 kB [rendered]
frontend_1 | chunk {19} 19.js, 19.js.map () 5.61 kB [rendered]
frontend_1 | chunk {20} 20.js, 20.js.map () 5.61 kB [rendered]
frontend_1 | chunk {21} 21.js, 21.js.map () 15.9 kB [rendered]
frontend_1 | chunk {22} 22.js, 22.js.map () 66.2 kB [rendered]
frontend_1 | chunk {23} 23.js, 23.js.map () 65.9 kB [rendered]
frontend_1 | chunk {24} 24.js, 24.js.map () 19 kB [rendered]
frontend_1 | chunk {25} 25.js, 25.js.map () 18.1 kB [rendered]
frontend_1 | chunk {26} 26.js, 26.js.map () 3.42 kB [rendered]
frontend_1 | chunk {27} 27.js, 27.js.map () 12.6 kB [rendered]
frontend_1 | chunk {28} 28.js, 28.js.map () 12.6 kB [rendered]
frontend_1 | chunk {29} 29.js, 29.js.map () 14.4 kB [rendered]
frontend_1 | chunk {30} 30.js, 30.js.map () 14.3 kB [rendered]
frontend_1 | chunk {31} 31.js, 31.js.map () 25.7 kB [rendered]
frontend_1 | chunk {32} 32.js, 32.js.map () 25.6 kB [rendered]
frontend_1 | chunk {33} 33.js, 33.js.map () 39.2 kB [rendered]
frontend_1 | chunk {34} 34.js, 34.js.map () 42.8 kB [rendered]
frontend_1 | chunk {35} 35.js, 35.js.map () 13.1 kB [rendered]
frontend_1 | chunk {36} 36.js, 36.js.map () 12.8 kB [rendered]
frontend_1 | chunk {37} 37.js, 37.js.map () 31.6 kB [rendered]
frontend_1 | chunk {38} 38.js, 38.js.map () 31.7 kB [rendered]
frontend_1 | chunk {39} 39.js, 39.js.map () 14.9 kB [rendered]
frontend_1 | chunk {40} 40.js, 40.js.map () 14.9 kB [rendered]
frontend_1 | chunk {41} 41.js, 41.js.map () 37.5 kB [rendered]
frontend_1 | chunk {42} 42.js, 42.js.map () 20.5 kB [rendered]
frontend_1 | chunk {43} 43.js, 43.js.map () 19.8 kB [rendered]
frontend_1 | chunk {44} 44.js, 44.js.map () 12.6 kB [rendered]
frontend_1 | chunk {45} 45.js, 45.js.map () 12.6 kB [rendered]
frontend_1 | chunk {46} 46.js, 46.js.map () 12 kB [rendered]
frontend_1 | chunk {47} 47.js, 47.js.map () 12.2 kB [rendered]
frontend_1 | chunk {48} 48.js, 48.js.map () 20.5 kB [rendered]
frontend_1 | chunk {49} 49.js, 49.js.map () 21.9 kB [rendered]
frontend_1 | chunk {50} 50.js, 50.js.map () 18.3 kB [rendered]
frontend_1 | chunk {51} 51.js, 51.js.map () 18.3 kB [rendered]
frontend_1 | chunk {52} 52.js, 52.js.map () 12.6 kB [rendered]
frontend_1 | chunk {53} 53.js, 53.js.map () 12.6 kB [rendered]
frontend_1 | chunk {54} 54.js, 54.js.map () 6.48 kB [rendered]
frontend_1 | chunk {55} 55.js, 55.js.map () 24.4 kB [rendered]
frontend_1 | chunk {56} 56.js, 56.js.map () 26.2 kB [rendered]
frontend_1 | chunk {57} 57.js, 57.js.map () 23.9 kB [rendered]
frontend_1 | chunk {58} 58.js, 58.js.map () 15.4 kB [rendered]
frontend_1 | chunk {59} 59.js, 59.js.map () 15.1 kB [rendered]
frontend_1 | chunk {60} 60.js, 60.js.map () 21.9 kB [rendered]
frontend_1 | chunk {61} 61.js, 61.js.map () 21.9 kB [rendered]
frontend_1 | chunk {62} 62.js, 62.js.map () 36.8 kB [rendered]
frontend_1 | chunk {63} 63.js, 63.js.map () 36.8 kB [rendered]
frontend_1 | chunk {64} 64.js, 64.js.map () 10.7 kB [rendered]
frontend_1 | chunk {65} 65.js, 65.js.map () 6.5 kB [rendered]
frontend_1 | chunk {66} 66.js, 66.js.map () 6.49 kB [rendered]
frontend_1 | chunk {67} 67.js, 67.js.map () 14.2 kB [rendered]
frontend_1 | chunk {68} 68.js, 68.js.map () 14.4 kB [rendered]
frontend_1 | chunk {69} 69.js, 69.js.map () 8.34 kB [rendered]
frontend_1 | chunk {70} 70.js, 70.js.map () 1.84 kB [rendered]
frontend_1 | chunk {71} 71.js, 71.js.map () 12.4 kB [rendered]
frontend_1 | chunk {72} 72.js, 72.js.map () 12.4 kB [rendered]
frontend_1 | chunk {73} 73.js, 73.js.map () 18.1 kB [rendered]
frontend_1 | chunk {74} 74.js, 74.js.map () 18.7 kB [rendered]
frontend_1 | chunk {75} 75.js, 75.js.map () 11 kB [rendered]
frontend_1 | chunk {76} 76.js, 76.js.map () 10.9 kB [rendered]
frontend_1 | chunk {77} 77.js, 77.js.map () 20.2 kB [rendered]
frontend_1 | chunk {common} common.js, common.js.map (common) 30.6 kB [rendered]
frontend_1 | chunk {core-js-js} core-js-js.js, core-js-js.js.map (core-js-js) 78.7 kB [rendered]
frontend_1 | chunk {css-shim-206ea950-3169f23e-js} css-shim-206ea950-3169f23e-js.js, css-shim-206ea950-3169f23e-js.js.map (css-shim-206ea950-3169f23e-js) 21.9 kB [rendered]
frontend_1 | chunk {dom-96781eef-a2fb04dd-js} dom-96781eef-a2fb04dd-js.js, dom-96781eef-a2fb04dd-js.js.map (dom-96781eef-a2fb04dd-js) 19.8 kB [rendered]
frontend_1 | chunk {dom-js} dom-js.js, dom-js.js.map (dom-js) 20.2 kB [rendered]
frontend_1 | chunk {focus-visible-70713a0c-js} focus-visible-70713a0c-js.js, focus-visible-70713a0c-js.js.map (focus-visible-70713a0c-js) 2.15 kB [rendered]
frontend_1 | chunk {hardware-back-button-5afe3cb0-js} hardware-back-button-5afe3cb0-js.js, hardware-back-button-5afe3cb0-js.js.map (hardware-back-button-5afe3cb0-js) 2.06 kB [rendered]
frontend_1 | chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 34.4 kB [rendered]
frontend_1 | chunk {index-69c37885-js} index-69c37885-js.js, index-69c37885-js.js.map (index-69c37885-js) 37.7 kB [rendered]
frontend_1 | chunk {input-shims-7a8a317c-js} input-shims-7a8a317c-js.js, input-shims-7a8a317c-js.js.map (input-shims-7a8a317c-js) 13.5 kB [rendered]
frontend_1 | chunk {ios-transition-becf5388-js} ios-transition-becf5388-js.js, ios-transition-becf5388-js.js.map (ios-transition-becf5388-js) 24.7 kB [rendered]
frontend_1 | chunk {leaderboard-leaderboard-module} leaderboard-leaderboard-module.js, leaderboard-leaderboard-module.js.map (leaderboard-leaderboard-module) 20.8 kB [rendered]
frontend_1 | chunk {login-login-module} login-login-module.js, login-login-module.js.map (login-login-module) 5.73 kB [rendered]
frontend_1 | chunk {main} main.js, main.js.map (main) 40.9 kB [initial] [rendered]
frontend_1 | chunk {md-transition-f444ed6d-js} md-transition-f444ed6d-js.js, md-transition-f444ed6d-js.js.map (md-transition-f444ed6d-js) 3.46 kB [rendered]
frontend_1 | chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 278 kB [initial] [rendered]
frontend_1 | chunk {profile-profile-module} profile-profile-module.js, profile-profile-module.js.map (profile-profile-module) 19.8 kB [rendered]
frontend_1 | chunk {quiz-quiz-module} quiz-quiz-module.js, quiz-quiz-module.js.map (quiz-quiz-module) 22.5 kB [rendered]
frontend_1 | chunk {quiz-result-quiz-result-module} quiz-result-quiz-result-module.js, quiz-result-quiz-result-module.js.map (quiz-result-quiz-result-module) 21.2 kB [rendered]
frontend_1 | chunk {runtime} runtime.js, runtime.js.map (runtime) 10 kB [entry] [rendered]
frontend_1 | chunk {shadow-css-4889ae62-23996f3f-js} shadow-css-4889ae62-23996f3f-js.js, shadow-css-4889ae62-23996f3f-js.js.map (shadow-css-4889ae62-23996f3f-js) 14.8 kB [rendered]
frontend_1 | chunk {status-tap-7ab22cb8-js} status-tap-7ab22cb8-js.js, status-tap-7ab22cb8-js.js.map (status-tap-7ab22cb8-js) 1.79 kB [rendered]
frontend_1 | chunk {styles} styles.js, styles.js.map (styles) 112 kB [initial] [rendered]
frontend_1 | chunk {swipe-back-35ad8e37-js} swipe-back-35ad8e37-js.js, swipe-back-35ad8e37-js.js.map (swipe-back-35ad8e37-js) 2.68 kB [rendered]
frontend_1 | chunk {swiper-bundle-ccdaac54-js} swiper-bundle-ccdaac54-js.js, swiper-bundle-ccdaac54-js.js.map (swiper-bundle-ccdaac54-js) 176 kB [rendered]
frontend_1 | chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs-tabs-module) 8.14 kB [rendered]
frontend_1 | chunk {tap-click-1f9d539e-js} tap-click-1f9d539e-js.js, tap-click-1f9d539e-js.js.map (tap-click-1f9d539e-js) 6.37 kB [rendered]
frontend_1 | chunk {vendor} vendor.js, vendor.js.map (vendor) 5.03 MB [initial] [rendered]
frontend_1 | Date: 2020-01-28T12:11:46.647Z - Hash: f5c10ec9500752dc7639 - Time: 15503ms
frontend_1 | ** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
frontend_1 | ℹ ｢wdm｣: Compiled successfully.
backend_1 | Database 'swm_lms_development' already exists
backend_1 | Database 'swm_lms_test' already exists
backend_1 | => Booting Puma
backend_1 | => Rails 6.0.0 application starting in development
backend_1 | => Run `rails server --help` for more startup options
backend_1 | Puma starting in single mode...
backend_1 | * Version 3.12.1 (ruby 2.5.5-p157), codename: Llamas in Pajamas
backend_1 | * Min threads: 5, max threads: 5
backend_1 | * Environment: development
backend_1 | * Listening on tcp://0.0.0.0:3000
backend_1 | Use Ctrl-C to stop
Here the browser output of the rails project
Unfortunately I could'nt find any solution for my problem so I hope that someone here can help me. Thanks in advance!