Configure webpack pipeline and move assets

.gitignore

@@ -12,3 +12,5 @@
 !/log/.keep
 /tmp
 /spec/examples.txt
+/public/assets
+/node_modules

.postcssrc.js

@@ -0,0 +1 @@
+module.exports = {}

.rubocop.yml

@@ -3,6 +3,7 @@ AllCops:
     - 'vendor/**'
     - 'db/schema.rb'
     - 'bin/**'
+    - 'node_modules'
   TargetRubyVersion: 2.4
 
 Rails:

Gemfile.lock

@@ -188,7 +188,8 @@ GEM
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rainbow (2.2.1)
+    rainbow (2.2.2)
+      rake
     rake (12.0.0)
     rb-fsevent (0.9.8)
     rb-inotify (0.9.8)

app/assets/main.js

@@ -0,0 +1,6 @@
+function fn() {
+    console.log('Testing')
+    // abc
+}
+
+document.addEventListener('DOMContentLoaded', fn, false)

app/assets/stylesheets/application.css.sass → app/assets/main.sass

@@ -1,19 +1,3 @@
-/*
- * 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, vendor/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
- */
-
 @import 'bourbon'
 
 *

app/javascript/packs/application.js

@@ -0,0 +1,10 @@
+/* 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
+
+console.log('Hello World from Webpacker')

app/views/layouts/application.html.slim

@@ -2,7 +2,8 @@ doctype html
 html
   head
     title Mnemosyne
-    = stylesheet_link_tag 'application', media: 'all'
+    = javascript_pack_tag 'main'
+    = stylesheet_pack_tag 'main', media: 'all'
     = csrf_meta_tags
   body
     nav

bin/webpack

@@ -0,0 +1,40 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV   = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV    = ENV["NODE_ENV"]
+
+APP_PATH               = File.expand_path("../", __dir__)
+CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")
+DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
+
+begin
+  paths            = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
+  dev_server       = YAML.load(File.read(DEV_SERVER_CONFIG_PATH))[NODE_ENV]
+
+  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
+  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+
+  if NODE_ENV == "development" && dev_server["enabled"]
+    $stderr.puts "Warning: webpack-dev-server is currently enabled in #{DEV_SERVER_CONFIG_PATH}. " \
+      "Disable to serve assets directly from public/packs directory"
+  end
+rescue Errno::ENOENT, NoMethodError
+  puts "Configuration not found in config/webpack/paths.yml or config/webpack/development.server.yml."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+WEBPACK_BIN    = "#{NODE_MODULES_PATH}/.bin/webpack"
+WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
+
+Dir.chdir(APP_PATH) do
+  exec "NODE_ENV=#{NODE_ENV} NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} " \
+    "--config #{WEBPACK_CONFIG} #{ARGV.join(" ")}"
+end

bin/webpack-dev-server

@@ -0,0 +1,33 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH    = File.expand_path("../", __dir__)
+CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
+
+begin
+  paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
+
+  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
+  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+
+  WEBPACK_BIN       = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
+  DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.js"
+rescue Errno::ENOENT, NoMethodError
+  puts "Configuration not found in config/webpacker/paths.yml."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+Dir.chdir(APP_PATH) do
+  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
+    "--config #{DEV_SERVER_CONFIG}"
+end

bin/webpack-watcher

@@ -0,0 +1,10 @@
+#!/usr/bin/env ruby
+
+ENV['RAILS_ENV'] ||= 'development'
+ENV['NODE_ENV'] ||= ENV['RAILS_ENV']
+
+BIN_PATH = File.expand_path('.', __dir__)
+
+Dir.chdir(BIN_PATH) do
+  exec "./webpack --watch --progress --color #{ARGV.join(" ")}"
+end

bin/yarn

@@ -0,0 +1,11 @@
+#!/usr/bin/env ruby
+VENDOR_PATH = File.expand_path('..', __dir__)
+Dir.chdir(VENDOR_PATH) do
+  begin
+    exec "yarnpkg #{ARGV.join(" ")}"
+  rescue Errno::ENOENT
+    $stderr.puts "Yarn executable was not detected in the system."
+    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+    exit 1
+  end
+end

config/environments/development.rb

@@ -40,13 +40,8 @@
   # Raise an error on page load if there are pending migrations.
   config.active_record.migration_error = :page_load
 
-  # Debug mode disables concatenation and preprocessing of assets.
-  # This option may cause significant delays in view rendering with a large
-  # number of complex assets.
-  config.assets.debug = true
-
-  # Suppress logger output for asset requests.
-  config.assets.quiet = true
+  # Disable asset pipeline
+  config.assets.enabled = false
 
   # Raises error for missing translations
   # config.action_view.raise_on_missing_translations = true

config/environments/production.rb

@@ -21,12 +21,8 @@
   # Apache or NGINX already handles this.
   config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
 
-  # Compress JavaScripts and CSS.
-  config.assets.js_compressor = :uglifier
-  # config.assets.css_compressor = :sass
-
-  # Do not fallback to assets pipeline if a precompiled asset is missed.
-  config.assets.compile = false
+  # Disable asset pipeline
+  config.assets.enabled = false
 
   # `config.assets.precompile` and `config.assets.version` have moved
   # to config/initializers/assets.rb

config/environments/test.rb

@@ -42,4 +42,7 @@
 
   # Raises error for missing translations
   # config.action_view.raise_on_missing_translations = true
+
+  # Disable asset pipeline
+  config.assets.enabled = false
 end

config/routes.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 Rails.application.routes.draw do
-  resources :traces, only: %i[index show]
-  resources :transactions, only: %i[index show]
+  resources :traces, only: %i(index show)
+  resources :transactions, only: %i(index show)
 
   root to: 'root#index'
 end

config/webpack/common.js

@@ -0,0 +1,93 @@
+// Note: You must restart bin/webpack-watcher for changes to take effect
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const webpack      = require('webpack')
+const autoprefixer = require('autoprefixer')
+const csswring     = require('csswring')
+
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ManifestPlugin    = require('webpack-manifest-plugin')
+
+const { resolve } = require('path')
+const { env, paths, publicPath, loadersDir } = require('./configuration.js')
+
+console.log(publicPath)
+
+module.exports = {
+  entry: {
+    main: ['main.js', 'main.sass']
+  },
+
+  output: {
+    path: resolve(paths.output),
+    filename: '[name].js',
+    chunkFilename: '[name].[id].[chunkhash].js',
+    publicPath
+  },
+
+  module: {
+    rules: [{
+      test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+      use: [{
+        loader: 'file-loader',
+        options: { name: (env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]') }
+      }]
+    }, {
+      test: /\.(scss|sass|css)$/i,
+      use: ExtractTextPlugin.extract({
+        use: [{
+          loader: 'css-loader',
+          options: {
+            minimize: env.NODE_ENV === 'production',
+            importLoaders: 2
+          }
+        }, {
+          loader: 'postcss-loader',
+          options: {
+            plugins: () => [
+              require('autoprefixer'),
+              require('csswring')
+            ]
+          }
+        }, {
+          loader: 'sass-loader',
+          options: {
+            includePaths: [
+              require('bourbon').includePaths
+            ]
+          }
+        }]
+      })
+    }, {
+      test: /\.(js)$/i,
+      use: [{
+        loader: 'babel-loader',
+        options: {
+          presets: ['env']
+        }
+      }]
+    }]
+  },
+
+  plugins: [
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
+    new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
+    new ManifestPlugin({ fileName: paths.manifest, writeToFileEmit: true, publicPath }),
+    new webpack.optimize.UglifyJsPlugin({sourceMap: true})
+  ],
+
+  resolve: {
+    extensions: [
+      '.coffee', '.js', '.sass', '.scss', '.css', '.png', '.svg', '.jpg'
+    ],
+    modules: [
+      resolve(paths.source),
+      resolve(paths.node_modules)
+    ]
+  },
+
+  resolveLoader: {
+    modules: [paths.node_modules]
+  }
+}