Lesson8

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

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "es6": true,
+        "node": true,
+        "jquery": true
+    },
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -10,3 +10,8 @@
 .byebug_history
 /config/master.key
 coverage
+/public/packs
+/public/packs-test
+/node_modules
+yarn-debug.log*
+.yarn-integrity

.postcssrc.yml

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

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "useTabs": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "jsxBracketSameLine": false,
+  "parser": "flow",
+  "semi": false
+}

.travis.yml

@@ -9,6 +9,8 @@ before_install:
   - chmod +x docker-compose
   - sudo mv docker-compose /usr/local/bin
   - docker-compose build
-  - docker-compose run --rm web /bin/sh -c "bundle install; RAILS_ENV=test  bundle exec rails db:create db:migrate"
+  - docker-compose run --rm web /bin/sh -c "bundle install"
+  - docker-compose run --rm web /bin/sh -c "yarn install"
+  - docker-compose run --rm web /bin/sh -c "RAILS_ENV=test bundle exec rails db:create db:migrate"
 script:
-  - docker-compose run --rm web /bin/sh -c "RAILS_ENV=test  bundle exec rake test"
+  - docker-compose run --rm web /bin/sh -c "RAILS_ENV=test bundle exec rake test"

Dockerfile

@@ -1,11 +1,10 @@
 FROM ruby:2.5.3
 
+
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
 RUN curl -sL https://deb.nodesource.com/setup_9.x | bash -
 RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
-
-RUN apt-get install -y nodejs
-RUN apt-get update && apt-get install -y yarn
+RUN apt-get update -qqy && apt-get -qqyy install nodejs yarn
 
 WORKDIR /app
 
@@ -15,4 +14,4 @@ RUN gem install bundler
 RUN bundle install
 
 EXPOSE 3000
-CMD bundle exec rails s -b '0.0.0.0' -p 3000
+CMD bundle exec rails s -b '0.0.0.0' -p 3000 && bin/webpack-dev-server

Gemfile

@@ -31,6 +31,9 @@ gem 'kaminari'
 gem 'ransack', github: 'activerecord-hackery/ransack'
 gem 'responders'
 
+gem 'webpacker', '~> 3.5'
+gem 'webpacker-react'
+
 group :development, :test do
   gem 'byebug'
   gem 'factory_bot_rails'

Gemfile.lock

@@ -175,6 +175,8 @@ GEM
     public_suffix (3.0.3)
     puma (3.12.0)
     rack (2.0.6)
+    rack-proxy (0.6.5)
+      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (5.2.2)
@@ -295,6 +297,12 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webpacker (3.6.0)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
+    webpacker-react (0.3.2)
+      webpacker
     websocket-driver (0.7.0)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.3)
@@ -341,6 +349,8 @@ DEPENDENCIES
   twitter-bootstrap-rails
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
+  webpacker (~> 3.5)
+  webpacker-react
 
 RUBY VERSION
    ruby 2.5.3p105

app/assets/javascripts/application.js

@@ -2,6 +2,6 @@
 //= require jquery_ujs
 //= require twitter/bootstrap
 
-$(function(){
+$(function() {
   /* Your JavaScript goes here... */
-});
+})

app/assets/javascripts/bootstrap.js

@@ -1,4 +1,4 @@
 jQuery(function() {
-  $("a[rel~=popover], .has-popover").popover();
-  $("a[rel~=tooltip], .has-tooltip").tooltip();
-});
+  $('a[rel~=popover], .has-popover').popover()
+  $('a[rel~=tooltip], .has-tooltip').tooltip()
+})

app/assets/javascripts/cable.js

@@ -1,9 +1,8 @@
 //= require action_cable
 //= require_self
 
-(function() {
-  this.App || (this.App = {});
+;(function() {
+  this.App || (this.App = {})
 
-  App.cable = ActionCable.createConsumer();
-
-}).call(this);
+  App.cable = ActionCable.createConsumer()
+}.call(this))

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/javascript/packs/components/TaskBoard.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Board from 'react-trello'
+
+const data = {
+  lanes: [
+    {
+      id: 'lane1',
+      title: 'Planned Tasks',
+      label: '2/2',
+      cards: [
+        {
+          id: 'Card1',
+          title: 'Write Blog',
+          description: 'Can AI make memes',
+          label: '30 mins',
+        },
+        {
+          id: 'Card2',
+          title: 'Pay Rent',
+          description: 'Transfer via NEFT',
+          label: '5 mins',
+          metadata: { sha: 'be312a1' },
+        },
+      ],
+    },
+    {
+      id: 'lane2',
+      title: 'Completed',
+      label: '0/0',
+      cards: [],
+    },
+  ],
+}
+
+export default class TasksBoard extends React.Component {
+  render() {
+    return <Board data={data} />
+  }
+}

app/views/layouts/application.html.slim

@@ -9,6 +9,8 @@ html lang="en"
     = csp_meta_tag
     = stylesheet_link_tag "application", :media => "all"
     = javascript_include_tag "application"
+    = javascript_pack_tag "application"
+
 
   body
   .navbar.navbar-default.navbar-static-top

app/views/web/boards/show.html.slim

@@ -1,2 +1,2 @@
 h1 Web::Boards#show
-p Find me in app/views/web/boards/show.html.slim
+= react_component('TaskBoard')

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.
 
   # In the development environment your application's code is reloaded on

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/webpack/development.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+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,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpack/test.js

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

config/webpacker.yml

@@ -0,0 +1,69 @@
+# 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
+  webpack_compile_output: false
+
+  # 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