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
mnemosyne-mon · Sep 5, 2021 · 8f55146 · 8f55146
1 parent 7469cb8
commit 8f55146
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 61 deletions.
diff --git a/DEVELOPMENT.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2716,14 +2716,6 @@ figures@^1.3.5:
     escape-string-regexp "^1.0.5"
     object-assign "^4.1.0"
 
-[email protected]:
-  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"
-
 [email protected], file-type@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-5.2.0.tgz#2ddbea7c73ffe36368dfae49dc338c058c2b8ad6"