Switch from webpacker to (css|js)bundling-rails (#227)

* Install jsbundling-rails, uninstall rails/webpacker
* Remove outdated step from run-tests workflow
* Use cssbundling-rails for CSS

.github/workflows/run-tests.yml

@@ -40,9 +40,6 @@ jobs:
           docker compose exec web wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
           docker compose exec web dpkg -i google-chrome-stable_current_amd64.deb || true
           docker compose exec web apt-get -fy install
-
-      - name: Prepare assets for test environment
-        run: docker compose exec web cp -r public/packs/ public/packs-test/
         
       - name: Run tests
         run: docker compose exec web bundle exec rspec

.gitignore

@@ -35,3 +35,6 @@
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Dockerfile

@@ -35,20 +35,13 @@ COPY . ${APP_ROOT}/
 
 # Compile assets if production
 # SECRET_KEY_BASE=1 is a workaround (see https://github.com/rails/rails/issues/32947)
-RUN if [ "$ENVIRONMENT" = "production" ]; then RAILS_ENV=development bundle exec rake webpacker:compile; fi
+RUN if [ "$ENVIRONMENT" = "production" ]; then RAILS_ENV=development ./bin/rails assets:precompile; fi
 
 ###
 ### Dev stage ###
 ###
 FROM builder AS dev
 
-# Install Foreman to launch multiple processes from Procfile
-RUN gem install foreman
-
-# Install Google Chrome to run system specs
-RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-RUN dpkg -i google-chrome-stable_current_amd64.deb; apt-get -fy install
-
 ENTRYPOINT ["./docker-entrypoint-dev.sh"]
 
 EXPOSE 3000

Gemfile

@@ -11,14 +11,18 @@ gem 'pg', '1.3.5'
 
 gem 'puma', '4.3.12'
 
-gem 'webpacker', '5.4.4'
-
 gem 'turbolinks', '5.2.1'
 
 gem 'jbuilder', '2.11.5'
 
 gem 'bootsnap', '1.12.0', require: false
 
+# CSS
+gem "cssbundling-rails", '1.1.2'
+
+# JavaScript
+gem 'jsbundling-rails', '1.1.1'
+
 # HTTP requests
 gem 'httparty', '0.21.0'
 
@@ -62,4 +66,4 @@ end
 gem 'listen', '3.5.1'
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Gemfile.lock

@@ -85,6 +85,8 @@ GEM
     concurrent-ruby (1.2.2)
     connection_pool (2.2.5)
     crass (1.0.6)
+    cssbundling-rails (1.1.2)
+      railties (>= 6.0.0)
     date (3.3.3)
     devise (4.7.3)
       bcrypt (~> 3.0)
@@ -113,6 +115,8 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsbundling-rails (1.1.1)
+      railties (>= 6.0.0)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.2.2)
@@ -166,8 +170,6 @@ GEM
       activesupport (>= 3.0.0)
     racc (1.6.2)
     rack (2.2.7)
-    rack-proxy (0.7.6)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (6.1.7.3)
@@ -233,7 +235,6 @@ GEM
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2)
-    semantic_range (3.0.0)
     spring (2.1.1)
     spring-watcher-listen (2.0.1)
       listen (>= 2.7, < 4.0)
@@ -264,11 +265,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -283,11 +279,13 @@ DEPENDENCIES
   bootsnap (= 1.12.0)
   byebug
   capybara (= 3.36.0)
+  cssbundling-rails (= 1.1.2)
   devise (= 4.7.3)
   factory_bot_rails (= 5.0.2)
   httparty (= 0.21.0)
   i18n-js (= 3.9.2)
   jbuilder (= 2.11.5)
+  jsbundling-rails (= 1.1.1)
   kaminari (= 1.2.2)
   listen (= 3.5.1)
   pg (= 1.3.5)
@@ -304,7 +302,6 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 3.3.0)
   webdrivers (= 5.0.0)
-  webpacker (= 5.4.4)
 
 RUBY VERSION
    ruby 3.0.6p216

Procfile

@@ -1,2 +0,0 @@
-server: rails server -b 0.0.0.0 -p $PORT
-webpack: ./bin/webpack-dev-server

Procfile.dev

@@ -0,0 +1,3 @@
+web: bin/rails server -b 0.0.0.0 -p 3000
+css: yarn build:css --watch --color
+js: yarn build --watch --color

app/assets/config/manifest.js

@@ -1,2 +1,2 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../builds

app/assets/stylesheets/application.css

@@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */

app/assets/stylesheets/application.sass.scss

@@ -1,7 +1,12 @@
+// Entry point for your Sass build
+
+/* Booststrap */
 @import 'vendors/bootstrap_custom';
 
+/* Constants */
 @import 'constants/colors';
 
+/* Common */
 @import 'common/index';
 @import 'common/custom_texts';
 @import 'common/form';

app/assets/stylesheets/vendors/bootstrap_custom.scss

@@ -0,0 +1,38 @@
+@import 'bootstrap/scss/_functions.scss';
+@import 'bootstrap/scss/_variables.scss';
+@import 'bootstrap/scss/_mixins.scss';
+@import 'bootstrap/scss/_root.scss';
+@import 'bootstrap/scss/_reboot.scss';
+@import 'bootstrap/scss/_type.scss';
+@import 'bootstrap/scss/_alert.scss';
+@import 'bootstrap/scss/_badge';
+@import 'bootstrap/scss/_breadcrumb';
+@import 'bootstrap/scss/_button-group';
+@import 'bootstrap/scss/_buttons';
+@import 'bootstrap/scss/_buttons.scss';
+@import 'bootstrap/scss/_card.scss';
+@import 'bootstrap/scss/_carousel.scss';
+@import 'bootstrap/scss/_close.scss';
+@import 'bootstrap/scss/_code.scss';
+@import 'bootstrap/scss/_custom-forms.scss';
+@import 'bootstrap/scss/_dropdown.scss';
+@import 'bootstrap/scss/_forms.scss';
+@import 'bootstrap/scss/_grid.scss';
+@import 'bootstrap/scss/_images.scss';
+@import 'bootstrap/scss/_input-group.scss';
+@import 'bootstrap/scss/_jumbotron.scss';
+@import 'bootstrap/scss/_list-group.scss';
+@import 'bootstrap/scss/_media.scss';
+@import 'bootstrap/scss/_modal.scss';
+@import 'bootstrap/scss/_nav.scss';
+@import 'bootstrap/scss/_navbar.scss';
+@import 'bootstrap/scss/_pagination.scss';
+@import 'bootstrap/scss/_popover.scss';
+@import 'bootstrap/scss/_print.scss';
+@import 'bootstrap/scss/_progress.scss';
+@import 'bootstrap/scss/_spinners.scss';
+@import 'bootstrap/scss/_tables.scss';
+@import 'bootstrap/scss/_toasts.scss';
+@import 'bootstrap/scss/_tooltip.scss';
+@import 'bootstrap/scss/_transitions.scss';
+@import 'bootstrap/scss/_utilities.scss';

app/javascript/application.js

@@ -0,0 +1,19 @@
+// Entry point for the build script in your package.json
+
+// turbolinks
+require("turbolinks").start();
+
+// react-rails
+var componentRequireContext = require.context("./components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);
+
+// bootstrap (js only)
+require('bootstrap/js/dist/alert');
+require('bootstrap/js/dist/button');
+require('bootstrap/js/dist/collapse');
+require('bootstrap/js/dist/dropdown');
+require('bootstrap/js/dist/util');
+
+// i18n-js translations
+require('./translations/index.js.erb');

app/javascript/packs/application.js

@@ -1,28 +0,0 @@
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-
-require("@rails/ujs").start()
-require("turbolinks").start()
-require("@rails/activestorage").start()
-require("channels")
-
-// i18n-js translations
-require('translations/index.js.erb')
-
-require("./bootstrap_custom")
-require("../stylesheets/main")
-require("../images/favicon.png")
-require("../images/logo.png")
-
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)
-// Support component names relative to this directory:
-var componentRequireContext = require.context("components", true);
-var ReactRailsUJS = require("react_ujs");
-ReactRailsUJS.useContext(componentRequireContext);

app/javascript/packs/bootstrap_custom.js

@@ -1,5 +0,0 @@
-import 'bootstrap/js/dist/alert'
-import 'bootstrap/js/dist/button'
-import 'bootstrap/js/dist/collapse'
-import 'bootstrap/js/dist/dropdown'
-import 'bootstrap/js/dist/util'

app/javascript/packs/server_rendering.js

@@ -1,5 +0,0 @@
-// By default, this pack is loaded for server-side rendering.
-// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
-var componentRequireContext = require.context("components", true);
-var ReactRailsUJS = require("react_ujs");
-ReactRailsUJS.useContext(componentRequireContext);

app/javascript/stylesheets/vendors/bootstrap_custom.scss

@@ -1,38 +0,0 @@
-@import '~bootstrap/scss/_functions.scss';
-@import '~bootstrap/scss/_variables.scss';
-@import '~bootstrap/scss/_mixins.scss';
-@import '~bootstrap/scss/_root.scss';
-@import '~bootstrap/scss/_reboot.scss';
-@import '~bootstrap/scss/_type.scss';
-@import '~bootstrap/scss/_alert.scss';
-@import '~bootstrap/scss/_badge';
-@import '~bootstrap/scss/_breadcrumb';
-@import '~bootstrap/scss/_button-group';
-@import '~bootstrap/scss/_buttons';
-@import '~bootstrap/scss/_buttons.scss';
-@import '~bootstrap/scss/_card.scss';
-@import '~bootstrap/scss/_carousel.scss';
-@import '~bootstrap/scss/_close.scss';
-@import '~bootstrap/scss/_code.scss';
-@import '~bootstrap/scss/_custom-forms.scss';
-@import '~bootstrap/scss/_dropdown.scss';
-@import '~bootstrap/scss/_forms.scss';
-@import '~bootstrap/scss/_grid.scss';
-@import '~bootstrap/scss/_images.scss';
-@import '~bootstrap/scss/_input-group.scss';
-@import '~bootstrap/scss/_jumbotron.scss';
-@import '~bootstrap/scss/_list-group.scss';
-@import '~bootstrap/scss/_media.scss';
-@import '~bootstrap/scss/_modal.scss';
-@import '~bootstrap/scss/_nav.scss';
-@import '~bootstrap/scss/_navbar.scss';
-@import '~bootstrap/scss/_pagination.scss';
-@import '~bootstrap/scss/_popover.scss';
-@import '~bootstrap/scss/_print.scss';
-@import '~bootstrap/scss/_progress.scss';
-@import '~bootstrap/scss/_spinners.scss';
-@import '~bootstrap/scss/_tables.scss';
-@import '~bootstrap/scss/_toasts.scss';
-@import '~bootstrap/scss/_tooltip.scss';
-@import '~bootstrap/scss/_transitions.scss';
-@import '~bootstrap/scss/_utilities.scss';

app/views/devise/registrations/edit.html.erb

@@ -59,7 +59,7 @@
   
   <%= button_to t('common.forms.auth.cancel_account'),
     registration_path(resource_name),
-    data: { confirm: "Are you sure?" },
+    onclick: "return confirm('#{t('common.confirmation')}')",
     method: :delete,
     class: "btn btn-danger btn-block" %>
 </div>

app/views/layouts/_header.html.erb

@@ -58,7 +58,7 @@
               <%= link_to t('header.menu.profile_settings'), edit_user_registration_path, class: 'dropdown-item' %>
               <div class="dropdown-divider"></div>
 
-              <%= link_to t('header.menu.sign_out'), destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
+              <%= button_to t('header.menu.sign_out'), destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
             </div>
           </li>
         <% else %>

app/views/layouts/application.html.erb

@@ -11,9 +11,8 @@
 
     <%= render 'layouts/set_js_locale' %>
 
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload" %>
-
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <%= favicon_link_tag asset_pack_path('media/images/favicon.png') %>
   </head>
 
   <body>

babel.config.js

@@ -1,104 +0,0 @@
-module.exports = function(api) {
-  var validEnv = ['development', 'test', 'production']
-  var currentEnv = api.env()
-  var isDevelopmentEnv = api.env('development')
-  var isProductionEnv = api.env('production')
-  var isTestEnv = api.env('test')
-
-  if (!validEnv.includes(currentEnv)) {
-    throw new Error(
-      'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        '.'
-    )
-  }
-
-  return {
-    presets: [
-      isTestEnv && [
-        require('@babel/preset-env').default,
-        {
-          targets: {
-            node: 'current'
-          }
-        }
-      ],
-      (isProductionEnv || isDevelopmentEnv) && [
-        require('@babel/preset-env').default,
-        {
-          forceAllTransforms: true,
-          useBuiltIns: 'entry',
-          corejs: 3,
-          modules: false,
-          exclude: ['transform-typeof-symbol']
-        }
-      ],
-      [
-        require('@babel/preset-react').default,
-        {
-          development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
-        }
-      ],
-      [
-        '@babel/preset-typescript',
-        {
-          'allExtensions': true,
-          'isTSX': true
-        }
-      ]
-    ].filter(Boolean),
-    plugins: [
-      require('babel-plugin-macros'),
-      require('@babel/plugin-syntax-dynamic-import').default,
-      isTestEnv && require('babel-plugin-dynamic-import-node'),
-      require('@babel/plugin-transform-destructuring').default,
-      [
-        require('@babel/plugin-proposal-private-methods').default,
-        {
-          loose: true
-        }
-      ],
-      [
-        require('@babel/plugin-proposal-private-property-in-object').default,
-        {
-          loose: true
-        }
-      ],
-      [
-        require('@babel/plugin-proposal-class-properties').default,
-        {
-          loose: true
-        }
-      ],
-      [
-        require('@babel/plugin-proposal-object-rest-spread').default,
-        {
-          useBuiltIns: true
-        }
-      ],
-      [
-        require('@babel/plugin-transform-runtime').default,
-        {
-          helpers: false,
-          regenerator: true,
-          corejs: false
-        }
-      ],
-      [
-        require('@babel/plugin-transform-regenerator').default,
-        {
-          async: false
-        }
-      ],
-      isProductionEnv && [
-        require('babel-plugin-transform-react-remove-prop-types').default,
-        {
-          removeImport: true
-        }
-      ]
-    ].filter(Boolean)
-  }
-}

bin/dev

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+exec foreman start -f Procfile.dev "$@"

bin/webpack

@@ -1,18 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/webpack_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::WebpackRunner.run(ARGV)
-end

bin/webpack-dev-server

@@ -1,18 +0,0 @@
-#!/usr/bin/env ruby
-
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
-require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "bundler/setup"
-
-require "webpacker"
-require "webpacker/dev_server_runner"
-
-APP_ROOT = File.expand_path("..", __dir__)
-Dir.chdir(APP_ROOT) do
-  Webpacker::DevServerRunner.run(ARGV)
-end

config/initializers/assets.rb

@@ -5,8 +5,6 @@ Rails.application.config.assets.version = '1.0'
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-# Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join('node_modules')
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

config/initializers/content_security_policy.rb

@@ -11,8 +11,6 @@
 #   policy.object_src  :none
 #   policy.script_src  :self, :https
 #   policy.style_src   :self, :https
-#   # If you are using webpack-dev-server then specify webpack-dev-server host
-#   policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
 
 #   # Specify URI for violation reports
 #   # policy.report_uri "/csp-violation-report-endpoint"

config/webpack/development.js

@@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -1,15 +0,0 @@
-const { environment } = require('@rails/webpacker')
-const erb = require('./loaders/erb')
-const webpack = require('webpack')
-
-environment.plugins.append(
-  'Provide',
-  new webpack.ProvidePlugin({
-    $: 'jquery',
-    jQuery: 'jquery',
-    Popper: ['popper.js', 'default']
-  })
-)
-
-environment.loaders.prepend('erb', erb)
-module.exports = environment

config/webpack/loaders/erb.js

@@ -1,11 +0,0 @@
-module.exports = {
-  test: /\.erb$/,
-  enforce: 'pre',
-  exclude: /node_modules/,
-  use: [{
-    loader: 'rails-erb-loader',
-    options: {
-      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
-    }
-  }]
-}

config/webpack/production.js

@@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()

config/webpack/test.js

@@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()

config/webpack/webpack.config.js

@@ -0,0 +1,53 @@
+const path    = require("path")
+const webpack = require("webpack")
+
+const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
+
+module.exports = {
+  mode: mode,
+
+  optimization: {
+    moduleIds: 'deterministic',
+  },
+  entry: {
+    application: "./app/javascript/application.js"
+  },
+  output: {
+    filename: "[name].js",
+    sourceMapFilename: "[file].map",
+    path: path.resolve(__dirname, "..", "..", "app/assets/builds"),
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.erb$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: [{
+          loader: 'rails-erb-loader',
+          options: {
+            runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
+          }
+        }]
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      Popper: ['popper.js', 'default']
+    })
+  ]
+}

config/webpacker.yml

@@ -1,99 +0,0 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  source_path: app/javascript
-  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: false
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .erb
-    - .tsx
-    - .ts
-    - .jsx
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
-development:
-  <<: *default
-  compile: false
-
-  # 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: localhost
-    port: 3035
-    public: localhost: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: false
-
-  # 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

docker-entrypoint-dev.sh

@@ -4,8 +4,8 @@ set -e
 
 sh docker-entrypoint.sh
 
-# Needed to avoid "webpack-dev-server not found" error
+# Needed to run .bin/dev
 yarn install --check-files
 
-# Launch Rails server and webpack-dev-server using Foreman
+# Launch Rails server + yarn build:css + yarn build
-foreman start -p 3000
+./bin/dev

package.json

@@ -2,15 +2,28 @@
   "name": "astuto",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
+    "build": "webpack --config ./config/webpack/webpack.config.js"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ]
+  },
   "dependencies": {
-    "@babel/preset-react": "7.0.0",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@rails/actioncable": "6.1.7-3",
     "@rails/activestorage": "6.1.7-3",
     "@rails/ujs": "6.1.7-3",
-    "@rails/webpacker": "5.4.4",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
+    "babel-loader": "^9.1.2",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "bootstrap": "4.6.2",
     "i18n-js": "3.9.2",
@@ -30,11 +43,13 @@
     "react_ujs": "2.6.0",
     "redux": "4.0.4",
     "redux-thunk": "2.3.0",
+    "sass": "^1.62.1",
     "turbolinks": "5.2.0",
-    "typescript": "4.3.2"
+    "typescript": "4.3.2",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1"
   },
   "devDependencies": {
-    "@types/react-redux": "7.1.3",
+    "@types/react-redux": "7.1.3"
-    "webpack-dev-server": "3.11.3"
   }
 }

spec/system/user_log_in_spec.rb

@@ -38,7 +38,7 @@ feature 'log in', type: :system, js: true do
 
     visit root_path
     find('#navbarDropdown').click # open dropdown menu
-    click_link 'Sign out'
+    click_button 'Sign out'
     
     expect(page).to have_current_path(root_path)
     expect(page).to have_content('Log in / Sign up')