added webpacker with all the needed changes to Dockerfile and docker-compose

Author: aaronsama

.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 }]
+  ]
+}

.dockerignore

@@ -1,6 +1,7 @@
 .git*
 db/*.sqlite3
 db/*.sqlite3-journal
+db-data
 log/*
 tmp/*
 Dockerfile

.gitignore

@@ -26,3 +26,8 @@ Dockerfile.*
 docker-compose.*.yml
 
 app_variables.env
+/public/packs
+/public/packs-test
+/node_modules
+yarn-debug.log*
+.yarn-integrity

.postcssrc.yml

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

Dockerfile

@@ -1,38 +1,48 @@
 FROM ruby:2.4
 MAINTAINER [email protected]
 
-# Install apt based dependencies required to run Rails as
-# well as RubyGems. As the Ruby image itself is based on a
-# Debian image, we use apt-get to install those.
-RUN apt-get update && apt-get install -y \
-  build-essential \
-  nodejs
+# Download all the dependencies including node and yarn. Also, set localtime
+# TODO: do this also in staging and production
+RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
+    && curl -sL https://deb.nodesource.com/setup_9.x | bash - \
+    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
+    && apt-get update \
+    && apt-get install -qq -y --no-install-recommends build-essential nodejs yarn \
+    && rm -rf /var/lib/apt/lists/* \
+    && cp /usr/share/zoneinfo/Europe/Rome /etc/localtime
 
 # Configure the main working directory. This is the base
 # directory used in any further RUN, COPY, and ENTRYPOINT
 # commands.
 RUN mkdir -p /app
 WORKDIR /app
 
+ENV BUNDLE_PATH=/bundle \
+    BUNDLE_BIN=/bundle/bin \
+    GEM_HOME=/bundle
+ENV PATH="${BUNDLE_BIN}:${PATH}"
+# Bundle installs with binstubs to our custom /bundle/bin volume path. Let system use those stubs.
+
 # Copy the Gemfile as well as the Gemfile.lock and install
 # the RubyGems. This is a separate step so the dependencies
 # will be cached unless changes to one of those two files
 # are made.
 COPY Gemfile Gemfile.lock ./
-RUN gem install bundler && bundle install --jobs 20 --retry 5
+RUN gem install bundler \
+    && bundle install --jobs 20 --retry 5
 
 # Copy the main application.
 COPY . ./
 
+RUN bin/yarn
+
 # Expose port 3000 to the Docker host, so we can access it
 # from the outside.
 EXPOSE 3000
 
-# Configure an entry point, so we don't need to specify
-# "bundle exec" for each of our commands.
-ENTRYPOINT ["bundle", "exec"]
+# Entrypoint
+COPY ./docker-entrypoint.sh /
+RUN chmod +x /docker-entrypoint.sh
+ENTRYPOINT ["/docker-entrypoint.sh"]
 
-# The main command to run when the container starts. Also
-# tell the Rails dev server to bind to all interfaces by
-# default.
-CMD ["rails", "server", "-b", "0.0.0.0"]
+CMD bundle exec puma

Gemfile

@@ -94,6 +94,10 @@ gem 'piwik_analytics'
 # Cookie Law
 gem 'cookies_eu'
 
+# Webpacker
+gem 'webpacker'
+gem 'webpacker-react'
+
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

Gemfile.lock

@@ -131,7 +131,6 @@ GEM
       rails (>= 4.2.0)
       responders
     execjs (2.7.0)
-    fast_gettext (1.5.1)
     ffi (1.9.18)
     font-awesome-rails (4.7.0.2)
       railties (>= 3.2, < 5.2)
@@ -141,13 +140,6 @@ GEM
     gettext (3.2.4)
       locale (>= 2.0.5)
       text (>= 1.3.0)
-    gettext_i18n_rails (1.8.0)
-      fast_gettext (>= 0.9.0)
-    gettext_i18n_rails_js (1.2.0)
-      gettext (>= 3.0.2)
-      gettext_i18n_rails (>= 0.7.1)
-      po_to_json (>= 1.0.0)
-      rails (>= 3.2.0)
     globalid (0.4.0)
       activesupport (>= 4.2.0)
     high_voltage (3.0.0)
@@ -215,8 +207,6 @@ GEM
       actionpack
       activesupport
       rails (>= 3.0.0)
-    po_to_json (1.0.1)
-      json (>= 1.6.0)
     polyamorous (1.3.1)
       activerecord (>= 3.0)
     popper_js (1.11.1)
@@ -229,6 +219,8 @@ GEM
     public_suffix (3.0.0)
     puma (3.10.0)
     rack (2.0.3)
+    rack-proxy (0.6.4)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
     rails (5.1.3)
@@ -341,6 +333,12 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webpacker (3.3.0)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
+    webpacker-react (0.3.2)
+      webpacker
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -369,7 +367,6 @@ DEPENDENCIES
   friendly_id (~> 5.2.0)
   friendly_id-globalize!
   geocoder
-  gettext_i18n_rails_js (~> 1.2.0)
   globalize!
   high_voltage (~> 3.0.0)
   i18n_data
@@ -399,6 +396,8 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
+  webpacker
+  webpacker-react
 
 BUNDLED WITH
    1.16.1

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.erb

@@ -12,6 +12,11 @@
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+
+    <%# packs %>
+    <%= javascript_pack_tag 'application' %>
+    <%#= stylesheet_pack_tag 'application' %>
+
     <%= render 'application/favicon' %>
     <%= piwik_tracking_tag %>
   </head>

bin/webpack

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"] ||= ENV["RAILS_ENV"]
+
+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"] ||= ENV["RAILS_ENV"]
+
+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,7 @@
 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.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

config/environments/production.rb

@@ -1,4 +1,7 @@
 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.
 
   # Mail settings

config/webpack/development.js

@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -0,0 +1,3 @@
+const { environment } = require('@rails/webpacker')
+
+module.exports = environment

config/webpack/production.js

@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpack/test.js

@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpacker.yml

@@ -0,0 +1,68 @@
+# 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: 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: 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

docker-compose.yml

@@ -5,10 +5,11 @@ services:
     image: commonfare_dev_rails_app
     container_name: commonfare_dev_rails_app
     restart: always
-    command: rails server -p 3000 -b '0.0.0.0'
+    command: rails server -p 3000 -b 0.0.0.0 --pid /app/tmp/pids/development.pid
     volumes:
       - .:/app
       - ~/tmp:/host_tmp
+      - bundle_cache:/bundle
     ports:
       - "3000:3000"
     # links app container to postgres container.
@@ -22,6 +23,19 @@ services:
     # These two allow debug with pry
     tty: true
     stdin_open: true
+  webpack-dev-server:
+    image: commonfare_dev_rails_app
+    container_name: commonfare_dev_webpack
+    restart: always
+    command: ./bin/webpack-dev-server
+    ports:
+      - "3035:3035"
+    volumes:
+      - .:/app
+      - ~/tmp:/host_tmp
+      - bundle_cache:/bundle
+    env_file:
+      - app_variables.env
   mailcatcher:
     image: tophfr/mailcatcher
     container_name: commonfare_mailcatcher
@@ -37,3 +51,6 @@ services:
       - "5432"
     volumes:
       - ./db-data:/var/lib/postgresql/data
+volumes:
+  bundle_cache:
+  # Mount volume with default driver

docker-entrypoint.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+# Bash script identifier
+
+set -e
+# Exit on fail
+
+rm -f /app/tmp/pids/${RAILS_ENV:-development}.pid
+
+bundle check || bundle install
+
+exec "$@"
+# Finally call command issued to the docker service