Use webpacker for bundling and transpiling javascript (RefugeRestroom…

…s#484)

Co-authored-by: Jason Chen <[email protected]>
Co-authored-by: Teagan <[email protected]>

* Add webpacker

* Add all configurations for webpacker

Webpacker is the ruby gem that wraps webpack, a javascript utility
for transforming and bundling.

Add:
- Yarn, which webpacker uses to manage javascript dependencies.
- .babelrc, configuration file for Babel, the standard javascript
transpiler. We're using it to transpile es6 javascript so that it's
compatible with more browsers.
- Config files for webpacker.
- Config files to allow webpacker to process .erb files.

* Install what webpacker needs inside Docker

- Get the latest node.js from NodeSource, officially recommended
linux binaries.
link: https://github.com/nodesource/distributions
- Install yarn, javascript package manager required by webpacker.
- Create separate volume for /refugerestrooms/node_modules in
Docker to prevent mounting /refugerestrooms from overriding what
was installed by yarn.

* Convert all coffeescript files to es6 javascript

All changes cherry-picked and squashed from decaffeinate branch

* Add javascript dependencies with yarn

Remove jquery-rails gem because it's now managed with yarn

* Replace old javascript tag with webpacker's

* Bundle and transpile all javascript with webpacker

Now we can write es6 code in any .js file! All the coffeescript
has been converted into js.

Changes:
- Use es6 modules instead of globals. This is better encapsulation.
This results in the removal of `window.Refuge`. Instead, to use a
module, like Geocoder, just import it like this:
`import { Geocoder } from 'path/to/geocoder';`

* commit yarn

* add engine

* review apps

* Update Yarn Lock

* Update App.json

* remove trailing comma

* remove duplicate entry

.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

@@ -54,3 +54,9 @@ ruby
 
 ## zsh rake pugin
 .rake_tasks
+
+/public/packs
+/public/packs-test
+/node_modules
+yarn-debug.log*
+.yarn-integrity

Dockerfile

@@ -1,19 +1,30 @@
 FROM ruby:2.3.7
-RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
 ENV PHANTOM_JS=2.1.1
-RUN  apt-get update && \
-  apt-get install build-essential chrpath libssl-dev libxft-dev -y && \
+
+# Add the apt repository for yarn
+RUN curl -sS http://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
+  echo "deb http://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+
+# Add the apt-repository for the latest node.js
+RUN curl -sL https://deb.nodesource.com/setup_8.x | bash -
+
+RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
+RUN apt-get install build-essential chrpath libssl-dev libxft-dev -y && \
   apt-get install libfreetype6 libfreetype6-dev -y && \
   apt-get install libfontconfig1 libfontconfig1-dev -y && \
   cd ~ && \
   export PHANTOM_JS="phantomjs-2.1.1-linux-x86_64" && \
   wget https://github.com/Medium/phantomjs/releases/download/v2.1.1/$PHANTOM_JS.tar.bz2 && \
   tar xvjf $PHANTOM_JS.tar.bz2 && \
   mv $PHANTOM_JS /usr/local/share && \
-  ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin
+  ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin && \
+  apt-get install -y yarn
 RUN mkdir /refugerestrooms
 WORKDIR /refugerestrooms
+
 COPY Gemfile /refugerestrooms/Gemfile
 COPY Gemfile.lock /refugerestrooms/Gemfile.lock
 RUN bundle install
-COPY . /refugerestrooms
+
+COPY package.json yarn.lock /refugerestrooms/
+RUN yarn --pure-lockfile

Gemfile

@@ -9,7 +9,6 @@ gem 'bootstrap-sass'
 gem 'haml'
 gem 'uglifier', '>= 1.3.0'
 gem 'coffee-rails', '~> 4.2'
-gem 'jquery-rails'
 gem 'turbolinks'
 gem 'jbuilder', '~> 2.5'
 gem 'geocoder', '~> 1.2.1'
@@ -28,6 +27,7 @@ gem 'rack-cors', :require => 'rack/cors'
 gem 'rack-jsonp'
 gem 'http_accept_language'
 gem 'puma'
+gem 'webpacker', '~> 3.5'
 
 # Upgraded to 1.0.0 for Rails 5.1.4
 gem 'activeadmin', '~> 1.0.0'

Gemfile.lock

@@ -235,6 +235,8 @@ GEM
       rack
     rack-mount (0.8.3)
       rack (>= 1.0.0)
+    rack-proxy (0.6.4)
+      rack
     rack-test (0.7.0)
       rack (>= 1.0, < 3)
     rails (5.1.4)
@@ -351,6 +353,10 @@ GEM
     webmock (1.18.0)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
+    webpacker (3.5.3)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -382,7 +388,6 @@ DEPENDENCIES
   http_accept_language
   i18n-debug
   jbuilder (~> 2.5)
-  jquery-rails
   kaminari (~> 0.17.0)
   mail_form (>= 1.7.0)
   pg
@@ -405,6 +410,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   webmock (~> 1.18.0)
+  webpacker (~> 3.5)
 
 RUBY VERSION
    ruby 2.3.7p456

app.json

@@ -5,6 +5,12 @@
     "postdeploy": "bundle exec rake db:setup"
   },
   "env": {
+    "DATABASE_URL": {
+      "required": true
+    },
+    "HEROKU_POSTGRESQL_CYAN_URL": {
+      "required": true
+    },
     "DEVISE_SECRET_KEY": {
       "required": true
     },
@@ -36,10 +42,12 @@
   "formation": {
   },
   "addons": [
-    "heroku-postgresql",
     "heroku-postgresql"
   ],
   "buildpacks": [
+    {
+      "url": "heroku/nodejs"
+    },
     {
       "url": "heroku/ruby"
     }

app/assets/javascripts/active_admin.js

@@ -0,0 +1 @@
+//= require active_admin/base