Include Webpack and use it for jQuery, Bootstrap and chosen.js

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }]
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    "transform-object-rest-spread",
+    ["transform-class-properties", { "spec": true }]
+  ]
+}

.gitignore

@@ -25,3 +25,8 @@
 *.iml
 *.DS_Store
 /node_modules
+/public/packs
+/public/packs-test
+/node_modules
+yarn-debug.log*
+.yarn-integrity

.postcssrc.yml

@@ -0,0 +1,3 @@
+plugins:
+  postcss-import: {}
+  postcss-cssnext: {}

.travis.yml

@@ -3,6 +3,13 @@ sudo: required
 services:
   - docker
 
+language: ruby
+rvm:
+- 2.5.1
+cache:
+  bundler: true
+  yarn: true
+
 addons:
   code_climate:
     repo_token:
@@ -25,6 +32,10 @@ before_install:
   - chmod +x ~/geckodriver/geckodriver
   - export PATH=~/geckodriver/:$PATH
 
+install:
+  - bundle install --jobs=3 --retry=3 --deployment --path=${BUNDLE_PATH:-vendor/bundle}
+  - yarn install
+
 before_script:
   - cp .rspec.travis .rspec
   - cp config/action_mailer.yml.travis config/action_mailer.yml
@@ -36,9 +47,4 @@ before_script:
   - psql --command='CREATE DATABASE travis_ci_test;' --username=postgres
   - bundle exec rake db:schema:load RAILS_ENV=test
 
-cache: bundler
-language: ruby
-rvm:
-- 2.5.1
-  
 script: bundle exec rspec --color --format documentation --require spec_helper --require rails_helper && bundle exec codeclimate-test-reporter

Gemfile

@@ -23,7 +23,7 @@ gem 'ransack'
 gem 'rubytree'
 gem 'sass-rails'
 gem 'slim-rails'
-gem 'bootstrap_pagedown'
+gem 'pagedown-bootstrap-rails'
 gem 'sorcery'
 gem 'turbolinks'
 gem 'uglifier'
@@ -31,6 +31,7 @@ gem 'tubesock', git: 'https://github.com/gosukiwi/tubesock', branch: 'patch-1' #
 gem 'faye-websocket'
 gem 'nokogiri'
 gem 'd3-rails'
+gem 'webpacker'
 gem 'rest-client'
 gem 'rubyzip'
 gem 'mnemosyne-ruby'

Gemfile.lock

@@ -73,8 +73,6 @@ GEM
       msgpack (~> 1.0)
     bootstrap-will_paginate (1.0.0)
       will_paginate
-    bootstrap_pagedown (1.1.0)
-      rails (>= 3.2)
     builder (3.2.3)
     bunny (2.12.0)
       amq-protocol (~> 2.3, >= 2.3.0)
@@ -118,7 +116,7 @@ GEM
     coderay (1.1.2)
     concurrent-ruby (1.0.5)
     crass (1.0.4)
-    d3-rails (5.5.0)
+    d3-rails (5.7.0)
       railties (>= 3.1)
     database_cleaner (1.7.0)
     debug_inspector (0.0.3)
@@ -210,6 +208,8 @@ GEM
       multi_json (~> 1.3)
       multi_xml (~> 0.5)
       rack (>= 1.2, < 3)
+    pagedown-bootstrap-rails (2.1.4)
+      railties (> 3.1)
     parallel (1.12.1)
     parser (2.5.1.2)
       ast (~> 2.4.0)
@@ -228,6 +228,8 @@ GEM
     rack (2.0.5)
     rack-mini-profiler (1.0.0)
       rack (>= 1.2.0)
+    rack-proxy (0.6.5)
+      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (5.2.1)
@@ -377,6 +379,10 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webpacker (3.5.5)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
     websocket (1.2.8)
     websocket-driver (0.7.0)
       websocket-extensions (>= 0.1.0)
@@ -397,7 +403,6 @@ DEPENDENCIES
   binding_of_caller
   bootsnap
   bootstrap-will_paginate
-  bootstrap_pagedown
   capistrano
   capistrano-rails
   capistrano-rvm
@@ -424,6 +429,7 @@ DEPENDENCIES
   newrelic_rpm
   nokogiri
   nyan-cat-formatter
+  pagedown-bootstrap-rails
   pg
   pry-byebug
   puma
@@ -450,6 +456,7 @@ DEPENDENCIES
   turbolinks
   uglifier
   web-console
+  webpacker
   whenever
 
 BUNDLED WITH

Vagrantfile

@@ -7,6 +7,7 @@ Vagrant.configure(2) do |config|
     v.memory = 8192
   end
   config.vm.network "private_network", ip: "192.168.59.104"
+  config.vm.network "forwarded_port", guest: 3035, host: 3035
   # config.vm.synced_folder "../data", "/vagrant_data"
   config.vm.provision "shell", path: "provision.sh", privileged: false
 end

app/assets/javascripts/application.js

@@ -10,10 +10,9 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require bootstrap_pagedown
+//= require pagedown_bootstrap
 //= require d3
 //
 // lib/assets
@@ -24,8 +23,6 @@
 //= require ace/ace
 //= require ace/ext-language_tools
 //= require jstree/jstree.min
-//= require bootstrap.min
-//= require chosen.jquery.min
 //= require jquery-ui.min
 //= require underscore.min
 //= require_tree .

app/assets/stylesheets/application.css

@@ -10,14 +10,12 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require bootstrap_pagedown
+ *= require pagedown_bootstrap
  *
  * lib/assets
  *= require flash
  *
  * vendor/assets
- *= require bootstrap.min
- *= require chosen.min
  *= require font-awesome.min
  *= require google_opensans
  *= require jquery-ui.min

app/javascript/packs/application.js

@@ -0,0 +1,16 @@
+/* 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.slim
+
+// JS
+import 'jquery'
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+import 'chosen-js/chosen.jquery';
+
+// CSS
+import 'chosen-js/chosen.css';

app/javascript/packs/stylesheets.scss

@@ -0,0 +1,12 @@
+/* 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 <%= stylesheet_pack_tag 'stylesheets' %> to the appropriate
+// layout file, like app/views/layouts/application.html.slim
+
+@import '~bootswatch/dist/yeti/variables';
+@import '~bootstrap/scss/bootstrap';
+@import '~bootswatch/dist/yeti/bootswatch';

app/views/layouts/application.html.slim

@@ -5,8 +5,11 @@ html lang='en'
     meta name='viewport' content='width=device-width, initial-scale=1'
     title = application_name
     link href=asset_path('favicon.png') rel='icon' type='image/png'
-    = stylesheet_link_tag('application', media: 'all', 'data-turbolinks-track' => true)
+    = stylesheet_pack_tag('application', media: 'all', 'data-turbolinks-track': true)
-    = javascript_include_tag('application', 'data-turbolinks-track' => true)
+    = stylesheet_pack_tag('stylesheets', media: 'all', 'data-turbolinks-track': true)
+    = stylesheet_link_tag('application', media: 'all', 'data-turbolinks-track': true)
+    = javascript_pack_tag('application', 'data-turbolinks-track': true)
+    = javascript_include_tag('application', 'data-turbolinks-track': true)
     = yield(:head)
     = csrf_meta_tags
   body

bin/webpack

@@ -0,0 +1,15 @@
+#!/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 "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/webpack_runner"
+Webpacker::WebpackRunner.run(ARGV)

bin/webpack-dev-server

@@ -0,0 +1,15 @@
+#!/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 "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+Webpacker::DevServerRunner.run(ARGV)

config/environments/development.rb

@@ -1,4 +1,6 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = true
   # Settings specified here will take precedence over those in config/application.rb.
 
   config.web_console.whitelisted_ips = '192.168.0.0/16'  

config/environments/production.rb

@@ -1,4 +1,6 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = false
   # Settings specified here will take precedence over those in config/application.rb.
 
   # Code is not reloaded between requests.

config/initializers/assets.rb

@@ -11,7 +11,7 @@ Rails.application.config.tap do |config|
 
   # Highlight.js
   config.assets.precompile += %w( highlight.min.js )
-  config.assets.precompile += %w( highlight-default.min.css )
+  config.assets.precompile += %w( highlight-default.css )
 
   # d3.tip
   config.assets.precompile += %w( d3-tip.js )
@@ -19,7 +19,7 @@ Rails.application.config.tap do |config|
   # Add additional assets to the asset load path.
   # config.assets.paths << Emoji.images_path
   # Add Yarn node_modules folder to the asset load path.
-  # config.assets.paths << Rails.root.join('node_modules')
+  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/webpack/development.js

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

config/webpack/environment.js

@@ -0,0 +1,30 @@
+/*
+./config/webpack/environment.js
+Info for this file can be found
+github.com/rails/webpacker/blob/master/docs/webpack.md
+*/
+
+const { environment } = require('@rails/webpacker');
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+
+// Add an additional plugin of your choosing : ProvidePlugin
+environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
+        $: 'jquery',
+        JQuery: 'jquery',
+        jquery: 'jquery',
+        'window.Tether': "tether",
+        Popper: ['popper.js', 'default'], // for Bootstrap 4
+    })
+);
+
+const envConfig = module.exports = environment;
+const aliasConfig = module.exports = {
+    resolve: {
+        alias: {
+            jquery: 'jquery/src/jquery'
+        }
+    }
+};
+
+module.exports = merge(envConfig.toWebpackConfig(), aliasConfig);

config/webpack/production.js

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

config/webpack/test.js

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

config/webpacker.yml

@@ -0,0 +1,70 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+
+  # 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
+
+  extensions:
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: 0.0.0.0
+    port: 3035
+    public: 0.0.0.0: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/
+      # File Watcher might not work inside Vagrant
+      poll: true
+
+
+test:
+  <<: *default
+  compile: true
+
+  # 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
+
+  # Cache manifest.json for performance
+  cache_manifest: true

package.json

@@ -0,0 +1,18 @@
+{
+  "dependencies": {
+    "@rails/webpacker": "3.5",
+    "bootstrap": "^4.1.3",
+    "bootswatch": "^4.1.3",
+    "chosen-js": "^1.8.7",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.14.4",
+    "webpack-merge": "^4.1.4"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "2.11.2"
+  },
+  "scripts": {
+    "webpack": "./bin/webpack",
+    "webpack-dev-server": "./bin/webpack-dev-server"
+  }
+}