Add webpacker gem and install

.gitignore

@@ -35,3 +35,10 @@
 
 # Ignore Rails ENV file
 /config/rails_env.rb
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Gemfile

@@ -13,17 +13,13 @@ gem 'rails', rails
 
 # Use postgresql as the database for Active Record
 gem 'pg', '>= 0.18', '< 2.0'
-# Use SCSS for stylesheets
-gem 'sass-rails', '~> 5.1.0'
-# Use Uglifier as compressor for JavaScript assets
-gem 'uglifier', '>= 1.3.0'
-# See https://github.com/rails/execjs#readme for more supported runtimes
-gem 'mini_racer', platforms: :ruby
-
-# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-gem 'turbolinks', '~> 5'
+
+# Webpacker makes it easy to use the JavaScript pre-processor webpack
+gem 'webpacker', '6.0.0.beta.5'
+
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.11'
+
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 

Gemfile.lock

@@ -85,7 +85,6 @@ GEM
     exception_notification (4.4.3)
       actionmailer (>= 4.0, < 7)
       activesupport (>= 4.0, < 7)
-    execjs (2.7.0)
     factory_bot (6.1.0)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.1.0)
@@ -125,7 +124,6 @@ GEM
       activesupport (>= 5.0.0)
     json (2.3.1)
     jwt (2.2.2)
-    libv8 (8.4.255.0)
     listen (3.4.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -143,8 +141,6 @@ GEM
     mimemagic (0.3.5)
     mini_mime (1.0.2)
     mini_portile2 (2.5.0)
-    mini_racer (0.3.1)
-      libv8 (~> 8.4.255)
     minitest (5.14.4)
     msgpack (1.4.2)
     multi_json (1.15.0)
@@ -187,6 +183,8 @@ GEM
     rack (2.2.3)
     rack-protection (2.1.0)
       rack
+    rack-proxy (0.6.5)
+      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.1.3)
@@ -273,15 +271,10 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (5.1.0)
-      railties (>= 5.2.0)
-      sass (~> 3.1)
-      sprockets (>= 2.8, < 4.0)
-      sprockets-rails (>= 2.0, < 4.0)
-      tilt (>= 1.1, < 3)
     scenic (1.5.4)
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
+    semantic_range (2.3.1)
     sidekiq (5.2.9)
       connection_pool (~> 2.2, >= 2.2.2)
       rack (~> 2.0)
@@ -309,13 +302,8 @@ GEM
     thwait (0.2.0)
       e2mmap
     tilt (2.0.10)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.7.7)
@@ -325,6 +313,11 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
+    webpacker (6.0.0.beta.5)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     websocket-driver (0.7.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -343,7 +336,6 @@ DEPENDENCIES
   infreemation
   jbuilder (~> 2.11)
   listen (>= 3.0.5, < 3.5)
-  mini_racer
   omniauth (~> 2.0.1)
   omniauth-google-oauth2
   omniauth-rails_csrf_protection
@@ -356,13 +348,11 @@ DEPENDENCIES
   rubocop (~> 1.10.0)
   rubocop-performance
   rubocop-rails
-  sass-rails (~> 5.1.0)
   scenic
   sidekiq (~> 5.2)
   sidekiq-scheduler
   spring
   spring-watcher-listen (~> 2.0.0)
-  turbolinks (~> 5)
   tzinfo-data
-  uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
+  webpacker (= 6.0.0.beta.5)

Procfile

@@ -1,2 +1,3 @@
 web: bundle exec puma -C config/puma.rb -p 3000
+wdm: bin/webpack-dev-server
 queue: bundle exec sidekiq

app/packs/entrypoints/application-ie9.js

@@ -0,0 +1,19 @@
+/* eslint no-console: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.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// 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)
+
+import 'taggle/src/taggle-ie9'
+import './application'

app/packs/entrypoints/application.js

@@ -0,0 +1,27 @@
+/* eslint no-console: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.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// 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)
+
+import Rails from '@rails/ujs'
+import Turbolinks from 'turbolinks'
+
+Rails.start()
+Turbolinks.start()
+
+import '../javascripts/async-delivery-status.js'
+import '../javascripts/curated-link-preview.js'
+import '../javascripts/keyword-picker.js'
+import '../javascripts/print-button.js'

app/packs/entrypoints/application.scss

@@ -0,0 +1,13 @@
+@import '../stylesheets/buttons.scss';
+@import '../stylesheets/cta-section.scss';
+@import '../stylesheets/flashes.scss';
+@import '../stylesheets/foi-preview.scss';
+@import '../stylesheets/foi-suggestion.scss';
+@import '../stylesheets/forms.scss';
+@import '../stylesheets/govuk-box-highlight.scss';
+@import '../stylesheets/header.scss';
+@import '../stylesheets/keyword-picker.scss';
+@import '../stylesheets/print-button.scss';
+@import '../stylesheets/print.scss';
+@import '../stylesheets/subheader.scss';
+@import '../stylesheets/typography.scss';

app/assets/javascripts/application/async-delivery-status.js → app/packs/javascripts/async-delivery-status.js

@@ -1,4 +1,4 @@
-/* global $ */
+import $ from 'jquery'
 
 var checkDeliveryStatus = function () {
   var $box = $(this)

app/assets/javascripts/application/curated-link-preview.js → app/packs/javascripts/curated-link-preview.js

@@ -1,4 +1,4 @@
-/* global $ */
+import $ from 'jquery'
 
 var updateCuratedLinkPreview = function (inputs, previews) {
     previews.$url.attr('href', inputs.$url.val() || '#')

app/assets/javascripts/application/keyword-picker.js → app/packs/javascripts/keyword-picker.js

@@ -1,4 +1,5 @@
-/* global $, Taggle */
+import $ from 'jquery'
+import Taggle from 'taggle'
 
 var removeEmptyItems = function (array) {
   var cleaned = []

app/assets/stylesheets/foi-suggestion.scss → app/packs/stylesheets/foi-suggestion.scss

@@ -33,8 +33,8 @@
             display: inline-block;
             width: 16px;
             height: 16px;
-            background: transparent url(asset_path('link-external.png')) 0 0 no-repeat;
-            background-image: url(asset_path('link-external.svg')), none;
+            background: transparent url('../images/link-external.png') 0 0 no-repeat;
+            background-image: url('../images/link-external.svg'), none;
             margin-left: 0.5em;
         }
     }

app/views/layouts/application.html.erb

@@ -1,12 +1,12 @@
 <% content_for :head do %>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
-  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <!--[if lte IE 9]>
-    <%= javascript_include_tag 'application-ie9', async: true, 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application-ie9', async: true, 'data-turbolinks-track': 'reload' %>
   <![endif]-->
   <!--[if gt IE 9]><!-->
-    <%= javascript_include_tag 'application', async: true, 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', async: true, 'data-turbolinks-track': 'reload' %>
   <!--<![endif]-->
 <% end %>
 

bin/rails-deploy-before-down

@@ -22,4 +22,6 @@ bin/bundle config set path 'vendor/bundle'
 bin/bundle config set without 'development test'
 bin/bundle install
 
+bin/yarn install
+
 bin/rails assets:precompile

bin/webpack

@@ -0,0 +1,19 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+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

@@ -0,0 +1,19 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+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