From 8f55146f798b7ce0907a8a22ed36ad96974205e8 Mon Sep 17 00:00:00 2001 From: Jan Graichen Date: Sun, 5 Sep 2021 16:11:15 +0200 Subject: [PATCH] Update config for upgrade to webpack-dev-server v4 The config updates for webpack-dev-server v4 are largely based on [1]. The CL further updates Ruby gems, and removes all legacy stuff from handling dynamic assets while developing. Due to CSP and hot-reload, always access the application via `localhost:9002`, the proxy provided by webpack-dev-server, instead of directly opening to the Rails application. [1]: https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md --- DEVELOPMENT.md | 5 ++++ Gemfile | 6 ++-- Gemfile.lock | 50 ++++++++++++++++----------------- config/assets/webpack.common.js | 11 +------- config/assets/webpack.dev.js | 21 +++++--------- package.json | 1 - yarn.lock | 8 ------ 7 files changed, 41 insertions(+), 61 deletions(-) create mode 100644 DEVELOPMENT.md diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md new file mode 100644 index 00000000..a1a0ee31 --- /dev/null +++ b/DEVELOPMENT.md @@ -0,0 +1,5 @@ +# Development Notices + +## webpack-dev-server + +To get live asset compilation and hot-reloading, start the webpack-dev-server using `yarn start`, and the Rails application using `bundle exec rails server`. The Rails server will listen on `localhost:9001`, but the active content security policy and because webpack-dev-server does emit actual files, you must open `localhost:9002` to get assets and hot-reloaded. The webpack-dev-server will proxy all request to `localhost:9002` to the Rails app, but handle `/assets` and hot-reloading itself. diff --git a/Gemfile b/Gemfile index dfa79cd1..dcd0bb38 100644 --- a/Gemfile +++ b/Gemfile @@ -9,7 +9,7 @@ gem 'unicorn', '~> 6.0' gem 'active_record_upsert', '~> 0.10.0' gem 'bulk_insert', '~> 1.8' -gem 'hutch', github: 'ruby-amqp/hutch', ref: '9322ead' +gem 'hutch', '~> 1.1' gem 'pg', '~> 1.2' gem 'dry-struct', '~> 1.4.0' @@ -24,7 +24,7 @@ gem 'uuid4', '~> 1.3' gem 'draper', '~> 4.0' gem 'has_scope', '~> 0.8.0' gem 'oj' -gem 'rails-assets-manifest', '~> 2.1' +gem 'rails-assets-manifest', '~> 2.1', '>= 2.1.2' gem 'rails-rfc6570', '~> 2.4' gem 'responders', '~> 3.0' gem 'slim' @@ -35,8 +35,8 @@ gem 'influxdb' gem 'concurrent-ruby', '~> 1.1' gem 'mnemosyne-ruby', '~> 1.10' -gem 'sentry-ruby' gem 'sentry-rails' +gem 'sentry-ruby' group :development do gem 'listen', '~> 3.7.0' diff --git a/Gemfile.lock b/Gemfile.lock index ba7571ae..796d00fb 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,14 +1,3 @@ -GIT - remote: https://github.com/ruby-amqp/hutch.git - revision: 9322eadad011774ddef53a88ea122430113bdcde - ref: 9322ead - specs: - hutch (1.0.1.pre) - activesupport (>= 4.2, < 7) - bunny (>= 2.15, < 2.16) - carrot-top (~> 0.0.7) - multi_json (~> 1.14) - GEM remote: https://rubygems.org/ specs: @@ -87,8 +76,9 @@ GEM builder (3.2.4) bulk_insert (1.9.0) activerecord (>= 3.2.0) - bunny (2.15.0) + bunny (2.19.0) amq-protocol (~> 2.3, >= 2.3.1) + sorted_set (~> 1, >= 1.0.2) byebug (11.1.3) capybara (3.35.3) addressable @@ -140,7 +130,7 @@ GEM factory_bot_rails (6.2.0) factory_bot (~> 6.2.0) railties (>= 5.0.0) - faraday (1.7.0) + faraday (1.7.1) faraday-em_http (~> 1.0) faraday-em_synchrony (~> 1.0) faraday-excon (~> 1.1) @@ -159,12 +149,17 @@ GEM faraday-net_http_persistent (1.2.0) faraday-patron (1.0.0) faraday-rack (1.0.0) - ffi (1.15.3) + ffi (1.15.4) globalid (0.5.2) activesupport (>= 5.0) has_scope (0.8.0) actionpack (>= 5.2) activesupport (>= 5.2) + hutch (1.1.0) + activesupport (>= 4.2, < 7) + bunny (>= 2.16, < 3.0) + carrot-top (~> 0.0.7) + multi_json (~> 1.14) i18n (1.8.10) concurrent-ruby (~> 1.0) ibsciss-middleware (0.4.2) @@ -191,12 +186,12 @@ GEM multi_json (1.15.0) multipart-post (2.1.1) nio4r (2.5.8) - nokogiri (1.12.3) + nokogiri (1.12.4) mini_portile2 (~> 2.6.1) racc (~> 1.4) - nokogiri (1.12.3-x86_64-linux) + nokogiri (1.12.4-x86_64-linux) racc (~> 1.4) - oj (3.13.2) + oj (3.13.4) parallel (1.20.1) parser (3.0.2.0) ast (~> 2.4.1) @@ -229,7 +224,7 @@ GEM bundler (>= 1.15.0) railties (= 6.1.4.1) sprockets-rails (>= 2.0.0) - rails-assets-manifest (2.1.1) + rails-assets-manifest (2.1.2) activesupport (> 4.2) railties (> 4.2) rails-dom-testing (2.0.3) @@ -252,6 +247,7 @@ GEM rb-fsevent (0.11.0) rb-inotify (0.10.1) ffi (~> 1.0) + rbtree (0.4.4) regexp_parser (2.1.1) request_store (1.5.0) rack (>= 1.4) @@ -307,19 +303,23 @@ GEM selenium-webdriver (3.142.7) childprocess (>= 0.5, < 4.0) rubyzip (>= 1.2.2) - sentry-rails (4.6.5) + sentry-rails (4.7.1) railties (>= 5.0) - sentry-ruby-core (~> 4.6.0) - sentry-ruby (4.6.5) + sentry-ruby-core (~> 4.7.0) + sentry-ruby (4.7.1) concurrent-ruby (~> 1.0, >= 1.0.2) faraday (>= 1.0) - sentry-ruby-core (= 4.6.5) - sentry-ruby-core (4.6.5) + sentry-ruby-core (= 4.7.1) + sentry-ruby-core (4.7.1) concurrent-ruby faraday + set (1.0.1) slim (4.1.0) temple (>= 0.7.6, < 0.9) tilt (>= 2.0.6, < 2.1) + sorted_set (1.0.3) + rbtree + set (~> 1.0) spring (2.1.1) spring-commands-rspec (1.0.4) spring (>= 0.9.1) @@ -371,7 +371,7 @@ DEPENDENCIES dry-types (~> 1.5.0) factory_bot_rails has_scope (~> 0.8.0) - hutch! + hutch (~> 1.1) ibsciss-middleware (~> 0.4.2) influxdb listen (~> 3.7.0) @@ -382,7 +382,7 @@ DEPENDENCIES pry-byebug puma (~> 5.0) rails (~> 6.1.0) - rails-assets-manifest (~> 2.1) + rails-assets-manifest (~> 2.1, >= 2.1.2) rails-rfc6570 (~> 2.4) responders (~> 3.0) rspec (~> 3.9) diff --git a/config/assets/webpack.common.js b/config/assets/webpack.common.js index 7efe78d2..c9f3aba2 100644 --- a/config/assets/webpack.common.js +++ b/config/assets/webpack.common.js @@ -44,16 +44,7 @@ module.exports = function (env, argv) { rules: [ { test: /\.(ico|eot|ttf|woff|woff2|jpe?g|png|gif|svg)$/i, - use: [ - { - loader: "file-loader", - options: { - name: env.dev - ? "[path][name].[ext]" - : "[name].[contenthash].[ext]", - }, - }, - ], + type: 'asset/resource', }, { test: /\.(scss|sass|css)$/i, diff --git a/config/assets/webpack.dev.js b/config/assets/webpack.dev.js index acce4e87..818e61d5 100644 --- a/config/assets/webpack.dev.js +++ b/config/assets/webpack.dev.js @@ -2,12 +2,6 @@ const { merge } = require("webpack-merge"); module.exports = function (env, argv) { - if (argv.host) { - // We're running on the webpack-dev-server and always - // use a stable publicPath - env.publicPath = "/assets/"; - } - let common = require("./webpack.common.js")(env); return merge(common, { @@ -23,17 +17,16 @@ module.exports = function (env, argv) { }, devServer: { - compress: true, - contentBase: "/assets/", - headers: { "Access-Control-Allow-Origin": "*" }, - historyApiFallback: true, + static: { + directory: "/public/", + serveIndex: true, + watch: { + ignored: /node_modules/, + }, + }, host: "0.0.0.0", port: 9002, proxy: { "/": "http://localhost:9001" }, - // publicPath: env.publicPath, - watchOptions: { - ignored: /node_modules/, - }, }, }); }; diff --git a/package.json b/package.json index 0d52d9b5..d2563e49 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "compression-webpack-plugin": "8.0.1", "css-loader": "6.2.0", "cssnano": "5.0.8", - "file-loader": "6.2.0", "image-webpack-loader": "7.0.1", "mini-css-extract-plugin": "2.2.0", "postcss": "8.3.6", diff --git a/yarn.lock b/yarn.lock index b9818531..d3bc3ceb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2716,14 +2716,6 @@ figures@^1.3.5: escape-string-regexp "^1.0.5" object-assign "^4.1.0" -file-loader@6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d" - integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw== - dependencies: - loader-utils "^2.0.0" - schema-utils "^3.0.0" - file-type@5.2.0, file-type@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/file-type/-/file-type-5.2.0.tgz#2ddbea7c73ffe36368dfae49dc338c058c2b8ad6"