13.2 Iteration H2: System testing 12.5 Playtime

13.1 Iteration H1: Webpacker and App-Like JavaScript

Demonstrate how Webpacker works and why it exists by using React.

edit Gemfile

# source 'https://rubygems.org'

git_source(:github) do |repo_name|

  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")

  "https://github.com/#{repo_name}.git"

end

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

gem "queue_classic", :path => "/home/rubys/git/queue_classic"

gem "rb-inotify", :path => "/home/rubys/git/rb-inotify"

gem 'rails', :path => "/home/rubys/git/rails" # '~> 5.1.1'

# Use sqlite3 as the database for Active Record

gem 'sqlite3'

# Use Puma as the app server

gem 'puma', '~> 3.7'

# Use SCSS for stylesheets

gem 'sass-rails', '~> 5.0'

# Use Uglifier as compressor for JavaScript assets

gem 'uglifier', '>= 1.3.0'

# See https://github.com/rails/execjs#readme for more supported runtimes

# gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views

gem 'coffee-rails', '~> 4.2'

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

gem 'turbolinks', '~> 5'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

gem 'jbuilder', '~> 2.5'

# Use Redis adapter to run Action Cable in production

# gem 'redis', '~> 3.0'

# Use ActiveModel has_secure_password

# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment

# gem 'capistrano-rails', group: :development

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]

  # Adds support for Capybara system testing and selenium driver

  gem 'capybara', '~> 2.13'

  gem 'selenium-webdriver'

end

group :development do

  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.

  gem 'web-console', :path => "/home/rubys/git/web-console" # '>= 3.3.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring

  gem 'spring'

end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'jquery-rails'

gem 'jquery-ui-rails'

gem 'activemodel-serializers-xml'

gem 'webpacker', '~> 2.0'

bundle install --local

Resolving dependencies...

Using rake 12.0.0

Using pg 0.19.0

Using ffi 1.9.18

Using concurrent-ruby 1.0.5

Using i18n 0.8.4

Using minitest 5.10.1

Using thread_safe 0.3.6

Using builder 3.2.3

Using erubi 1.6.0

Using mini_portile2 2.2.0

Using rack 2.0.3

Using nio4r 2.1.0

Using websocket-extensions 0.1.2

Using mime-types-data 3.2016.0521

Using arel 8.0.0

Using bundler 1.15.1

Using method_source 0.8.2

Using thor 0.19.4

Using sqlite3 1.3.13

Using puma 3.9.1

Using sass 3.4.24

Using tilt 2.0.7

Using execjs 2.7.0

Using coffee-script-source 1.12.2

Using turbolinks-source 5.0.3

Using multi_json 1.12.1

Using byebug 9.0.6

Using public_suffix 2.0.5

Using rubyzip 1.2.1

Using bindex 0.5.0

Using queue_classic 3.2.0.RC1 from source at `/home/rubys/git/queue_classic`

Using rb-inotify 0.9.9 from source at `/home/rubys/git/rb-inotify`

Using childprocess 0.7.0

Using tzinfo 1.2.3

Using nokogiri 1.8.0

Using rack-test 0.6.3

Using sprockets 3.7.1

Using websocket-driver 0.6.5

Using mime-types 3.1

Using uglifier 3.2.0

Using coffee-script 2.4.1

Using turbolinks 5.0.1

Using addressable 2.5.1

Using selenium-webdriver 3.4.1

Using activesupport 5.1.1 from source at `/home/rubys/git/rails`

Using loofah 2.0.3

Using xpath 2.1.0

Using mail 2.6.6

Using rails-dom-testing 2.0.3

Using globalid 0.4.0

Using activemodel 5.1.1 from source at `/home/rubys/git/rails`

Using jbuilder 2.7.0

Using spring 2.0.2

Using rails-html-sanitizer 1.0.3

Using capybara 2.14.2

Using activejob 5.1.1 from source at `/home/rubys/git/rails`

Using activerecord 5.1.1 from source at `/home/rubys/git/rails`

Using actionview 5.1.1 from source at `/home/rubys/git/rails`

Using activemodel-serializers-xml 1.0.1

Using actionpack 5.1.1 from source at `/home/rubys/git/rails`

Using actioncable 5.1.1 from source at `/home/rubys/git/rails`

Using actionmailer 5.1.1 from source at `/home/rubys/git/rails`

Using railties 5.1.1 from source at `/home/rubys/git/rails`

Using sprockets-rails 3.2.0

Using coffee-rails 4.2.2

Using web-console 3.5.1 from source at `/home/rubys/git/web-console`

Using jquery-rails 4.3.1

Using jquery-ui-rails 6.0.1

Using webpacker 2.0

Using rails 5.1.1 from source at `/home/rubys/git/rails`

Using sass-rails 5.0.6

Bundle complete! 20 Gemfile dependencies, 71 gems now installed.

Use `bundle info [gemname]` to see where a bundled gem is installed.

echo Y | rails webpacker:install

      create  config/webpacker.yml

Copying webpack core config and loaders

      create  config/webpack

      create  config/webpack/configuration.js

      create  config/webpack/development.js

      create  config/webpack/production.js

      create  config/webpack/shared.js

      create  config/webpack/test.js

      create  config/webpack/loaders

      create  config/webpack/loaders/assets.js

      create  config/webpack/loaders/babel.js

      create  config/webpack/loaders/coffee.js

      create  config/webpack/loaders/erb.js

      create  config/webpack/loaders/sass.js

Copying .postcssrc.yml to app root directory

      create  .postcssrc.yml

Copying .babelrc to app root directory

      create  .babelrc

Creating javascript app source directory

      create  app/javascript

      create  app/javascript/packs/application.js

Copying binstubs

       exist  bin

      create  bin/webpack-dev-server

      create  bin/webpack

      append  .gitignore

Installing all JavaScript dependencies

         run  yarn add webpack webpack-merge js-yaml path-complete-extname webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script babel-core babel-preset-env babel-polyfill compression-webpack-plugin rails-erb-loader glob extract-text-webpack-plugin node-sass file-loader sass-loader css-loader style-loader postcss-loader autoprefixer postcss-smart-import precss resolve-url-loader babel-plugin-syntax-dynamic-import babel-plugin-transform-class-properties from "."

yarn add v0.24.6

info No lockfile found.

[1/4] Resolving packages...

warning precss > postcss-partial-import > fs-promise@0.3.1: Use mz or fs-extra^3.0 with Promise Support

[2/4] Fetching packages...

warning fsevents@1.1.2: The platform "linux" is incompatible with this module.

info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.

[3/4] Linking dependencies...

[4/4] Building fresh packages...

success Saved lockfile.

success Saved 586 new dependencies.

├─ abbrev@1.1.0

├─ acorn-dynamic-import@2.0.2

├─ acorn@5.0.3

├─ adjust-sourcemap-loader@1.1.0

├─ ajv-keywords@1.5.1

├─ ajv@4.11.8

├─ align-text@0.1.4

├─ alphanum-sort@1.0.2

├─ amdefine@1.0.1

├─ ansi-regex@2.1.1

├─ ansi-styles@2.2.1

├─ any-promise@0.1.0

├─ anymatch@1.3.0

├─ aproba@1.1.2

├─ are-we-there-yet@1.1.4

├─ argparse@1.0.9

├─ arr-diff@2.0.0

├─ arr-flatten@1.0.3

├─ array-find-index@1.0.2

├─ array-union@1.0.2

├─ array-uniq@1.0.3

├─ array-unique@0.2.1

├─ arrify@1.0.1

├─ asn1.js@4.9.1

├─ asn1@0.2.3

├─ assert-plus@1.0.0

├─ assert@1.4.1

├─ async-each@1.0.1

├─ async-foreach@0.1.3

├─ async@2.4.1

├─ asynckit@0.4.0

├─ atob@1.1.3

├─ autoprefixer@7.1.1

├─ aws-sign2@0.6.0

├─ aws4@1.6.0

├─ babel-code-frame@6.22.0

├─ babel-core@6.25.0

├─ babel-generator@6.25.0

├─ babel-helper-builder-binary-assignment-operator-visitor@6.24.1

├─ babel-helper-call-delegate@6.24.1

├─ babel-helper-define-map@6.24.1

├─ babel-helper-explode-assignable-expression@6.24.1

├─ babel-helper-function-name@6.24.1

├─ babel-helper-get-function-arity@6.24.1

├─ babel-helper-hoist-variables@6.24.1

├─ babel-helper-optimise-call-expression@6.24.1

├─ babel-helper-regex@6.24.1

├─ babel-helper-remap-async-to-generator@6.24.1

├─ babel-helper-replace-supers@6.24.1

├─ babel-helpers@6.24.1

├─ babel-loader@7.0.0

├─ babel-messages@6.23.0

├─ babel-plugin-check-es2015-constants@6.22.0

├─ babel-plugin-syntax-async-functions@6.13.0

├─ babel-plugin-syntax-class-properties@6.13.0

├─ babel-plugin-syntax-dynamic-import@6.18.0

├─ babel-plugin-syntax-exponentiation-operator@6.13.0

├─ babel-plugin-syntax-trailing-function-commas@6.22.0

├─ babel-plugin-transform-async-to-generator@6.24.1

├─ babel-plugin-transform-class-properties@6.24.1

├─ babel-plugin-transform-es2015-arrow-functions@6.22.0

├─ babel-plugin-transform-es2015-block-scoped-functions@6.22.0

├─ babel-plugin-transform-es2015-block-scoping@6.24.1

├─ babel-plugin-transform-es2015-classes@6.24.1

├─ babel-plugin-transform-es2015-computed-properties@6.24.1

├─ babel-plugin-transform-es2015-destructuring@6.23.0

├─ babel-plugin-transform-es2015-duplicate-keys@6.24.1

├─ babel-plugin-transform-es2015-for-of@6.23.0

├─ babel-plugin-transform-es2015-function-name@6.24.1

├─ babel-plugin-transform-es2015-literals@6.22.0

├─ babel-plugin-transform-es2015-modules-amd@6.24.1

├─ babel-plugin-transform-es2015-modules-commonjs@6.24.1

├─ babel-plugin-transform-es2015-modules-systemjs@6.24.1

├─ babel-plugin-transform-es2015-modules-umd@6.24.1

├─ babel-plugin-transform-es2015-object-super@6.24.1

├─ babel-plugin-transform-es2015-parameters@6.24.1

├─ babel-plugin-transform-es2015-shorthand-properties@6.24.1

├─ babel-plugin-transform-es2015-spread@6.22.0

├─ babel-plugin-transform-es2015-sticky-regex@6.24.1

├─ babel-plugin-transform-es2015-template-literals@6.22.0

├─ babel-plugin-transform-es2015-typeof-symbol@6.23.0

├─ babel-plugin-transform-es2015-unicode-regex@6.24.1

├─ babel-plugin-transform-exponentiation-operator@6.24.1

├─ babel-plugin-transform-regenerator@6.24.1

├─ babel-plugin-transform-strict-mode@6.24.1

├─ babel-polyfill@6.23.0

├─ babel-preset-env@1.5.2

├─ babel-register@6.24.1

├─ babel-runtime@6.23.0

├─ babel-template@6.25.0

├─ babel-traverse@6.25.0

├─ babel-types@6.25.0

├─ babylon@6.17.3

├─ balanced-match@0.4.2

├─ base64-js@1.2.0

├─ bcrypt-pbkdf@1.0.1

├─ big.js@3.1.3

├─ binary-extensions@1.8.0

├─ block-stream@0.0.9

├─ bn.js@4.11.6

├─ boom@2.10.1

├─ brace-expansion@1.1.8

├─ braces@1.8.5

├─ brorand@1.1.0

├─ browserify-aes@1.0.6

├─ browserify-cipher@1.0.0

├─ browserify-des@1.0.0

├─ browserify-rsa@4.0.1

├─ browserify-sign@4.0.4

├─ browserify-zlib@0.1.4

├─ browserslist@1.7.7

├─ buffer-xor@1.0.3

├─ buffer@4.9.1

├─ builtin-modules@1.1.1

├─ builtin-status-codes@3.0.0

├─ camelcase-keys@2.1.0

├─ camelcase@3.0.0

├─ caniuse-api@1.6.1

├─ caniuse-db@1.0.30000684

├─ caniuse-lite@1.0.30000684

├─ caseless@0.12.0

├─ center-align@0.1.3

├─ chalk@1.1.3

├─ chokidar@1.7.0

├─ cipher-base@1.0.3

├─ clap@1.2.0

├─ cliui@3.2.0

├─ clone-deep@0.2.4

├─ clone@1.0.2

├─ co@4.6.0

├─ coa@1.0.3

├─ code-point-at@1.1.0

├─ coffee-loader@0.7.3

├─ coffee-script@1.12.6

├─ color-convert@1.9.0

├─ color-name@1.1.2

├─ color-string@0.3.0

├─ color@0.11.4

├─ colormin@1.1.2

├─ colors@1.1.2

├─ combined-stream@1.0.5

├─ commander@2.9.0

├─ commondir@1.0.1

├─ complex.js@2.0.1

├─ compression-webpack-plugin@0.4.0

├─ concat-map@0.0.1

├─ console-browserify@1.1.0

├─ console-control-strings@1.1.0

├─ constants-browserify@1.0.0

├─ convert-source-map@1.5.0

├─ core-js@2.4.1

├─ core-util-is@1.0.2

├─ cosmiconfig@2.1.3

├─ create-ecdh@4.0.0

├─ create-hash@1.1.3

├─ create-hmac@1.1.6

├─ cross-spawn@3.0.1

├─ cryptiles@2.0.5

├─ crypto-browserify@3.11.0

├─ css-color-function@1.3.0

├─ css-color-names@0.0.4

├─ css-loader@0.28.4

├─ css-selector-tokenizer@0.7.0

├─ css@2.2.1

├─ cssesc@0.1.0

├─ cssnano@3.10.0

├─ csso@2.3.2

├─ currently-unhandled@0.4.1

├─ dashdash@1.14.1

├─ date-now@0.1.4

├─ debug@2.6.8

├─ decamelize@1.2.0

├─ decimal.js@7.1.1

├─ deep-extend@0.4.2

├─ defaults@1.0.3

├─ defined@1.0.0

├─ delayed-stream@1.0.0

├─ delegates@1.0.0

├─ des.js@1.0.0

├─ detect-indent@4.0.0

├─ diffie-hellman@5.0.2

├─ domain-browser@1.1.7

├─ ecc-jsbn@0.1.1

├─ electron-to-chromium@1.3.14

├─ elliptic@6.4.0

├─ emojis-list@2.1.0

├─ enhanced-resolve@3.1.0

├─ errno@0.1.4

├─ error-ex@1.3.1

├─ escape-string-regexp@1.0.5

├─ esprima@3.1.3

├─ esutils@2.0.2

├─ events@1.1.1

├─ evp_bytestokey@1.0.0

├─ expand-brackets@0.1.5

├─ expand-range@1.8.2

├─ extend@3.0.1

├─ extglob@0.3.2

├─ extract-text-webpack-plugin@2.1.2

├─ extsprintf@1.0.2

├─ fastparse@1.1.1

├─ file-loader@0.11.2

├─ filename-regex@2.0.1

├─ fill-range@2.2.3

├─ find-cache-dir@0.1.1

├─ find-up@1.1.2

├─ flatten@1.0.2

├─ for-in@1.0.2

├─ for-own@0.1.5

├─ forever-agent@0.6.1

├─ form-data@2.1.4

├─ fraction.js@4.0.0

├─ fs-extra@0.30.0

├─ fs-promise@0.3.1

├─ fs.realpath@1.0.0

├─ fstream-ignore@1.0.5

├─ fstream@1.0.11

├─ function-bind@1.1.0

├─ gauge@2.7.4

├─ gaze@1.1.2

├─ get-caller-file@1.0.2

├─ get-stdin@4.0.1

├─ getpass@0.1.7

├─ glob-base@0.3.0

├─ glob-parent@2.0.0

├─ glob@7.1.2

├─ globals@9.18.0

├─ globby@3.0.1

├─ globule@1.2.0

├─ gonzales-pe@4.0.3

├─ graceful-fs@4.1.11

├─ graceful-readlink@1.0.1

├─ har-schema@1.0.5

├─ har-validator@4.2.1

├─ has-ansi@2.0.0

├─ has-flag@1.0.0

├─ has-unicode@2.0.1

├─ has@1.0.1

├─ hash-base@2.0.2

├─ hash.js@1.0.3

├─ hawk@3.1.3

├─ hmac-drbg@1.0.1

├─ hoek@2.16.3

├─ home-or-tmp@2.0.0

├─ hosted-git-info@2.4.2

├─ html-comment-regex@1.1.1

├─ http-signature@1.1.1

├─ https-browserify@0.0.1

├─ icss-replace-symbols@1.1.0

├─ icss-utils@2.1.0

├─ ieee754@1.1.8

├─ in-publish@2.0.0

├─ indent-string@2.1.0

├─ indexes-of@1.0.1

├─ indexof@0.0.1

├─ inflight@1.0.6

├─ inherits@2.0.3

├─ ini@1.3.4

├─ interpret@1.0.3

├─ invariant@2.2.2

├─ invert-kv@1.0.0

├─ is-absolute-url@2.1.0

├─ is-arrayish@0.2.1

├─ is-binary-path@1.0.1

├─ is-buffer@1.1.5

├─ is-builtin-module@1.0.0

├─ is-directory@0.3.1

├─ is-dotfile@1.0.3

├─ is-equal-shallow@0.1.3

├─ is-extendable@0.1.1

├─ is-extglob@1.0.0

├─ is-finite@1.0.2

├─ is-fullwidth-code-point@1.0.0

├─ is-glob@2.0.1

├─ is-number@2.1.0

├─ is-plain-obj@1.1.0

├─ is-plain-object@2.0.3

├─ is-posix-bracket@0.1.1

├─ is-primitive@2.0.0

├─ is-svg@2.1.0

├─ is-typedarray@1.0.0

├─ is-utf8@0.2.1

├─ isarray@1.0.0

├─ isexe@2.0.0

├─ isobject@3.0.0

├─ isstream@0.1.2

├─ js-base64@2.1.9

├─ js-tokens@3.0.1

├─ js-yaml@3.8.4

├─ jsbn@0.1.1

├─ jsesc@1.3.0

├─ json-loader@0.5.4

├─ json-schema@0.2.3

├─ json-stable-stringify@1.0.1

├─ json-stringify-safe@5.0.1

├─ json5@0.5.1

├─ jsonfile@2.4.0

├─ jsonify@0.0.0

├─ jsprim@1.4.0

├─ kind-of@3.2.2

├─ klaw@1.3.1

├─ lazy-cache@1.0.4

├─ lcid@1.0.0

├─ load-json-file@1.1.0

├─ loader-runner@2.3.0

├─ loader-utils@1.1.0

├─ lodash._baseassign@3.2.0

├─ lodash._basecopy@3.0.1

├─ lodash._bindcallback@3.0.1

├─ lodash._createassigner@3.1.1

├─ lodash._getnative@3.9.1

├─ lodash._isiterateecall@3.0.9

├─ lodash.assign@4.2.0

├─ lodash.camelcase@4.3.0

├─ lodash.clonedeep@4.5.0

├─ lodash.defaults@4.2.0

├─ lodash.isarguments@3.1.0

├─ lodash.isarray@3.0.4

├─ lodash.keys@3.1.2

├─ lodash.memoize@4.1.2

├─ lodash.mergewith@4.6.0

├─ lodash.restparam@3.6.1

├─ lodash.tail@4.1.1

├─ lodash.uniq@4.5.0

├─ lodash@4.17.4

├─ longest@1.0.1

├─ loose-envify@1.3.1

├─ loud-rejection@1.6.0

├─ lru-cache@4.1.1

├─ macaddress@0.2.8

├─ map-obj@1.0.1

├─ math-expression-evaluator@1.2.17

├─ mathjs@3.13.3

├─ memory-fs@0.4.1

├─ meow@3.7.0

├─ micromatch@2.3.11

├─ miller-rabin@4.0.0

├─ mime-db@1.27.0

├─ mime-types@2.1.15

├─ minimalistic-assert@1.0.0

├─ minimalistic-crypto-utils@1.0.1

├─ minimatch@3.0.4

├─ minimist@1.2.0

├─ mixin-object@2.0.1

├─ mkdirp@0.5.1

├─ ms@2.0.0

├─ nan@2.6.2

├─ node-gyp@3.6.2

├─ node-libs-browser@2.0.0

├─ node-pre-gyp@0.6.36

├─ node-sass@4.5.3

├─ node-zopfli@2.0.2

├─ nopt@3.0.6

├─ normalize-package-data@2.3.8

├─ normalize-path@2.1.1

├─ normalize-range@0.1.2

├─ normalize-url@1.9.1

├─ npmlog@4.1.0

├─ num2fraction@1.2.2

├─ number-is-nan@1.0.1

├─ oauth-sign@0.8.2

├─ object-assign@4.1.1

├─ object-path@0.9.2

├─ object.omit@2.0.1

├─ once@1.4.0

├─ os-browserify@0.2.1

├─ os-homedir@1.0.2

├─ os-locale@1.4.0

├─ os-tmpdir@1.0.2

├─ osenv@0.1.4

├─ pako@0.2.9

├─ parse-asn1@5.1.0

├─ parse-glob@3.0.4

├─ parse-json@2.2.0

├─ path-browserify@0.0.0

├─ path-complete-extname@0.1.0

├─ path-exists@2.1.0

├─ path-is-absolute@1.0.1

├─ path-parse@1.0.5

├─ path-type@1.1.0

├─ pbkdf2@3.0.12

├─ performance-now@0.2.0

├─ pify@2.3.0

├─ pinkie-promise@2.0.1

├─ pinkie@2.0.4

├─ pkg-dir@1.0.0

├─ postcss-advanced-variables@1.2.2

├─ postcss-atroot@0.1.3

├─ postcss-calc@5.3.1

├─ postcss-color-function@2.0.1

├─ postcss-colormin@2.2.2

├─ postcss-convert-values@2.6.1

├─ postcss-custom-media@5.0.1

├─ postcss-custom-properties@5.0.2

├─ postcss-custom-selectors@3.0.0

├─ postcss-discard-comments@2.0.4

├─ postcss-discard-duplicates@2.1.0

├─ postcss-discard-empty@2.1.0

├─ postcss-discard-overridden@0.1.1

├─ postcss-discard-unused@2.2.3

├─ postcss-extend@1.0.5

├─ postcss-filter-plugins@2.0.2

├─ postcss-load-config@1.2.0

├─ postcss-load-options@1.2.0

├─ postcss-load-plugins@2.3.0

├─ postcss-loader@2.0.5

├─ postcss-media-minmax@2.1.2

├─ postcss-merge-idents@2.1.7

├─ postcss-merge-longhand@2.0.2

├─ postcss-merge-rules@2.1.2

├─ postcss-message-helpers@2.0.0

├─ postcss-minify-font-values@1.0.5

├─ postcss-minify-gradients@1.0.5

├─ postcss-minify-params@1.2.2

├─ postcss-minify-selectors@2.1.1

├─ postcss-mixins@2.1.1

├─ postcss-modules-extract-imports@1.2.0

├─ postcss-modules-local-by-default@1.2.0

├─ postcss-modules-scope@1.1.0

├─ postcss-modules-values@1.3.0

├─ postcss-nested@1.0.1

├─ postcss-nesting@2.3.1

├─ postcss-normalize-charset@1.1.1

├─ postcss-normalize-url@3.0.8

├─ postcss-ordered-values@2.2.3

├─ postcss-partial-import@1.3.0

├─ postcss-property-lookup@1.2.1

├─ postcss-reduce-idents@2.4.0

├─ postcss-reduce-initial@1.0.1

├─ postcss-reduce-transforms@1.0.4

├─ postcss-sass@0.1.0

├─ postcss-scss@1.0.1

├─ postcss-selector-matches@2.0.5

├─ postcss-selector-not@2.0.0

├─ postcss-selector-parser@2.2.3

├─ postcss-simple-vars@1.2.0

├─ postcss-smart-import@0.7.4

├─ postcss-svgo@2.1.6

├─ postcss-unique-selectors@2.0.2

├─ postcss-value-parser@3.3.0

├─ postcss-zindex@2.2.0

├─ postcss@5.2.17

├─ precss@1.4.0

├─ prepend-http@1.0.4

├─ preserve@0.2.0

├─ private@0.1.7

├─ process-nextick-args@1.0.7

├─ process@0.11.10

├─ promise-each@2.2.0

├─ prr@0.0.0

├─ pseudomap@1.0.2

├─ public-encrypt@4.0.0

├─ punycode@1.4.1

├─ q@1.5.0

├─ qs@6.4.0

├─ query-string@4.3.4

├─ querystring-es3@0.2.1

├─ querystring@0.2.0

├─ rails-erb-loader@5.0.2

├─ randomatic@1.1.7

├─ randombytes@2.0.5

├─ rc@1.2.1

├─ read-cache@1.0.0

├─ read-pkg-up@1.0.1

├─ read-pkg@1.1.0

├─ readable-stream@2.2.11

├─ readdirp@2.1.0

├─ redent@1.0.0

├─ reduce-css-calc@1.3.0

├─ reduce-function-call@1.0.2

├─ regenerate@1.3.2

├─ regenerator-runtime@0.10.5

├─ regenerator-transform@0.9.11

├─ regex-cache@0.4.3

├─ regex-parser@2.2.7

├─ regexpu-core@1.0.0

├─ regjsgen@0.2.0

├─ regjsparser@0.1.5

├─ remove-trailing-separator@1.0.2

├─ repeat-element@1.1.2

├─ repeat-string@1.6.1

├─ repeating@2.0.1

├─ request@2.81.0

├─ require-directory@2.1.1

├─ require-from-string@1.2.1

├─ require-main-filename@1.0.1

├─ resolve-url-loader@2.0.2

├─ resolve-url@0.2.1

├─ resolve@1.3.3

├─ rework-visit@1.0.0

├─ rework@1.0.1

├─ rgb@0.1.0

├─ right-align@0.1.3

├─ rimraf@2.6.1

├─ ripemd160@2.0.1

├─ safe-buffer@5.1.0

├─ sass-graph@2.2.4

├─ sass-loader@6.0.5

├─ sax@1.2.2

├─ schema-utils@0.3.0

├─ scss-tokenizer@0.2.3

├─ seed-random@2.2.0

├─ semver@5.3.0

├─ set-blocking@2.0.0

├─ set-immediate-shim@1.0.1

├─ setimmediate@1.0.5

├─ sha.js@2.4.8

├─ shallow-clone@0.1.2

├─ signal-exit@3.0.2

├─ slash@1.0.0

├─ sntp@1.0.9

├─ sort-keys@1.1.2

├─ source-list-map@0.1.8

├─ source-map-resolve@0.3.1

├─ source-map-support@0.4.15

├─ source-map-url@0.3.0

├─ source-map@0.5.6

├─ spdx-correct@1.0.2

├─ spdx-expression-parse@1.0.4

├─ spdx-license-ids@1.2.2

├─ sprintf-js@1.0.3

├─ sshpk@1.13.1

├─ stdout-stream@1.4.0

├─ stream-browserify@2.0.1

├─ stream-http@2.7.2

├─ strict-uri-encode@1.1.0

├─ string_decoder@0.10.31

├─ string-hash@1.1.3

├─ string-width@1.0.2

├─ stringstream@0.0.5

├─ strip-ansi@3.0.1

├─ strip-bom@2.0.0

├─ strip-indent@1.0.1

├─ strip-json-comments@2.0.1

├─ style-loader@0.18.2

├─ sugarss@1.0.0

├─ supports-color@3.2.3

├─ svgo@0.7.2

├─ tapable@0.2.6

├─ tar-pack@3.4.0

├─ tar@2.2.1

├─ tcomb@2.7.0

├─ timers-browserify@2.0.2

├─ tiny-emitter@1.0.2

├─ to-arraybuffer@1.0.1

├─ to-fast-properties@1.0.3

├─ tough-cookie@2.3.2

├─ trim-newlines@1.0.0

├─ trim-right@1.0.1

├─ tty-browserify@0.0.0

├─ tunnel-agent@0.6.0

├─ tweetnacl@0.14.5

├─ typed-function@0.10.5

├─ uglify-js@2.8.29

├─ uglify-to-browserify@1.0.2

├─ uid-number@0.0.6

├─ uniq@1.0.1

├─ uniqid@4.1.1

├─ uniqs@2.0.0

├─ urix@0.1.0

├─ url@0.11.0

├─ util-deprecate@1.0.2

├─ util@0.10.3

├─ uuid@3.0.1

├─ validate-npm-package-license@3.0.1

├─ vendors@1.0.1

├─ verror@1.3.6

├─ vm-browserify@0.0.4

├─ watchpack@1.3.1

├─ webpack-manifest-plugin@1.1.0

├─ webpack-merge@4.1.0

├─ webpack-sources@0.1.5

├─ webpack@2.6.1

├─ whet.extend@0.9.9

├─ which-module@1.0.0

├─ which@1.2.14

├─ wide-align@1.1.2

├─ window-size@0.1.0

├─ wordwrap@0.0.2

├─ wrap-ansi@2.1.0

├─ wrappy@1.0.2

├─ xtend@4.0.1

├─ y18n@3.2.1

├─ yallist@2.1.2

├─ yargs-parser@4.2.1

└─ yargs@6.6.0

Done in 15.66s.

Installing dev server for live reloading

         run  yarn add --dev webpack-dev-server from "."

yarn add v0.24.6

[1/4] Resolving packages...

[2/4] Fetching packages...

warning fsevents@1.1.2: The platform "linux" is incompatible with this module.

info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.

[3/4] Linking dependencies...

[4/4] Building fresh packages...

success Saved lockfile.

success Saved 84 new dependencies.

├─ accepts@1.3.3

├─ ansi-html@0.0.7

├─ array-flatten@1.1.1

├─ batch@0.6.1

├─ bytes@2.3.0

├─ chokidar@1.7.0

├─ compressible@2.0.10

├─ compression@1.6.2

├─ connect-history-api-fallback@1.3.0

├─ content-disposition@0.5.2

├─ content-type@1.0.2

├─ cookie-signature@1.0.6

├─ cookie@0.3.1

├─ debug@2.6.8

├─ depd@1.1.0

├─ destroy@1.0.4

├─ detect-node@2.0.3

├─ ee-first@1.1.1

├─ encodeurl@1.0.1

├─ escape-html@1.0.3

├─ etag@1.8.0

├─ eventemitter3@1.2.0

├─ eventsource@0.1.6

├─ express@4.15.3

├─ faye-websocket@0.10.0

├─ finalhandler@1.0.3

├─ forwarded@0.1.0

├─ fresh@0.5.0

├─ handle-thing@1.2.5

├─ hpack.js@2.1.6

├─ html-entities@1.2.1

├─ http-deceiver@1.2.7

├─ http-errors@1.6.1

├─ http-proxy-middleware@0.17.4

├─ http-proxy@1.16.2

├─ inherits@2.0.3

├─ ipaddr.js@1.3.0

├─ json3@3.3.2

├─ lodash@4.17.4

├─ media-typer@0.3.0

├─ merge-descriptors@1.0.1

├─ methods@1.1.2

├─ micromatch@2.3.11

├─ mime-db@1.27.0

├─ mime-types@2.1.15

├─ mime@1.3.6

├─ mkdirp@0.5.1

├─ negotiator@0.6.1

├─ obuf@1.1.1

├─ on-finished@2.3.0

├─ on-headers@1.0.1

├─ opn@4.0.2

├─ original@1.0.0

├─ parseurl@1.3.1

├─ path-to-regexp@0.1.7

├─ portfinder@1.0.13

├─ proxy-addr@1.1.4

├─ qs@6.4.0

├─ querystringify@1.0.0

├─ range-parser@1.2.0

├─ readable-stream@2.2.11

├─ requires-port@1.0.0

├─ select-hose@2.0.0

├─ send@0.15.3

├─ serve-index@1.9.0

├─ serve-static@1.12.3

├─ setprototypeof@1.0.3

├─ sockjs-client@1.1.2

├─ sockjs@0.3.18

├─ spdy-transport@2.0.20

├─ spdy@3.4.7

├─ statuses@1.3.1

├─ supports-color@3.2.3

├─ type-is@1.6.15

├─ unpipe@1.0.0

├─ url-parse@1.1.9

├─ utils-merge@1.0.0

├─ uuid@2.0.3

├─ vary@1.1.1

├─ wbuf@1.7.2

├─ webpack-dev-middleware@1.10.2

├─ webpack-dev-server@2.4.5

├─ websocket-driver@0.6.5

└─ websocket-extensions@0.1.1

Done in 3.36s.

Webpacker successfully installed 🎉 🍰

rails webpacker:install:react

Copying react preset to your .babelrc file

Copying react loader to config/webpack/loaders

      create  config/webpack/loaders/react.js

Copying react example entry file to /home/rubys/git/awdwr/edition4/work-51/depot/app/javascript/packs

      create  app/javascript/packs/hello_react.jsx

Installing all react dependencies

         run  yarn add react react-dom babel-preset-react prop-types from "."

yarn add v0.24.6

[1/4] Resolving packages...

[2/4] Fetching packages...

warning fsevents@1.1.2: The platform "linux" is incompatible with this module.

info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.

[3/4] Linking dependencies...

[4/4] Building fresh packages...

success Saved lockfile.

success Saved 27 new dependencies.

├─ asap@2.0.5

├─ babel-helper-builder-react-jsx@6.24.1

├─ babel-plugin-syntax-flow@6.18.0

├─ babel-plugin-syntax-jsx@6.18.0

├─ babel-plugin-transform-flow-strip-types@6.22.0

├─ babel-plugin-transform-react-display-name@6.25.0

├─ babel-plugin-transform-react-jsx-self@6.22.0

├─ babel-plugin-transform-react-jsx-source@6.22.0

├─ babel-plugin-transform-react-jsx@6.24.1

├─ babel-preset-flow@6.23.0

├─ babel-preset-react@6.24.1

├─ create-react-class@15.5.4

├─ encoding@0.1.12

├─ esutils@2.0.2

├─ fbjs@0.8.12

├─ iconv-lite@0.4.18

├─ is-stream@1.1.0

├─ isomorphic-fetch@2.2.1

├─ loose-envify@1.3.1

├─ node-fetch@1.7.1

├─ promise@7.1.1

├─ prop-types@15.5.10

├─ react-dom@15.6.0

├─ react@15.6.0

├─ setimmediate@1.0.5

├─ ua-parser-js@0.7.12

└─ whatwg-fetch@2.0.3

Done in 3.38s.

Webpacker now supports react.js 🎉

edit app/javascript/packs/hello_react.jsx

import React from 'react'

import ReactDOM from 'react-dom'

import PropTypes from 'prop-types'

const Hello = props => (

  <div>Hello {props.name}!</div>

Hello.defaultProps = {

  name: 'David'

Hello.propTypes = {

  name: PropTypes.string

document.addEventListener('DOMContentLoaded', () => {

  ReactDOM.render(

    <Hello name="React" />,

    document.body.appendChild(document.createElement('div')),

})

edit app/views/orders/new.html.erb

<div class="depot_form">

  <fieldset>

    <legend>Please Enter Your Details</legend>

    <%= render 'form', order: @order %>

  </fieldset>

</div>

<%= javascript_pack_tag("hello_react") %>

edit Gemfile

bundle install --local

Resolving dependencies...

Using rake 12.0.0

Using pg 0.19.0

Using ffi 1.9.18

Using concurrent-ruby 1.0.5

Using i18n 0.8.4

Using minitest 5.10.1

Using thread_safe 0.3.6

Using builder 3.2.3

Using erubi 1.6.0

Using mini_portile2 2.2.0

Using rack 2.0.3

Using nio4r 2.1.0

Using websocket-extensions 0.1.2

Using mime-types-data 3.2016.0521

Using arel 8.0.0

Using bundler 1.15.1

Using method_source 0.8.2

Using thor 0.19.4

Using sqlite3 1.3.13

Using puma 3.9.1

Using sass 3.4.24

Using tilt 2.0.7

Using execjs 2.7.0

Using coffee-script-source 1.12.2

Using turbolinks-source 5.0.3

Using multi_json 1.12.1

Using byebug 9.0.6

Using public_suffix 2.0.5

Using rubyzip 1.2.1

Using bindex 0.5.0

Using queue_classic 3.2.0.RC1 from source at `/home/rubys/git/queue_classic`

Using rb-inotify 0.9.9 from source at `/home/rubys/git/rb-inotify`

Using childprocess 0.7.0

Using tzinfo 1.2.3

Using nokogiri 1.8.0

Using rack-test 0.6.3

Using sprockets 3.7.1

Using websocket-driver 0.6.5

Using mime-types 3.1

Using foreman 0.84.0

Using uglifier 3.2.0

Using coffee-script 2.4.1

Using turbolinks 5.0.1

Using addressable 2.5.1

Using selenium-webdriver 3.4.1

Using activesupport 5.1.1 from source at `/home/rubys/git/rails`

Using loofah 2.0.3

Using xpath 2.1.0

Using mail 2.6.6

Using rails-dom-testing 2.0.3

Using globalid 0.4.0

Using activemodel 5.1.1 from source at `/home/rubys/git/rails`

Using jbuilder 2.7.0

Using spring 2.0.2

Using rails-html-sanitizer 1.0.3

Using capybara 2.14.2

Using activejob 5.1.1 from source at `/home/rubys/git/rails`

Using activerecord 5.1.1 from source at `/home/rubys/git/rails`

Using actionview 5.1.1 from source at `/home/rubys/git/rails`

Using activemodel-serializers-xml 1.0.1

Using actionpack 5.1.1 from source at `/home/rubys/git/rails`

Using actioncable 5.1.1 from source at `/home/rubys/git/rails`

Using actionmailer 5.1.1 from source at `/home/rubys/git/rails`

Using railties 5.1.1 from source at `/home/rubys/git/rails`

Using sprockets-rails 3.2.0

Using coffee-rails 4.2.2

Using web-console 3.5.1 from source at `/home/rubys/git/web-console`

Using jquery-rails 4.3.1

Using jquery-ui-rails 6.0.1

Using webpacker 2.0

Using rails 5.1.1 from source at `/home/rubys/git/rails`

Using sass-rails 5.0.6

Bundle complete! 21 Gemfile dependencies, 72 gems now installed.

Use `bundle info [gemname]` to see where a bundled gem is installed.

edit Procfile

web:     bin/rails server

webpack: bin/webpack-dev-server

Restart the server.

get /

Your Downloads

Rails, Angular, Postgres, and Bootstrap

Your Pragmatic Catalog

Rails, Angular, Postgres, and Bootstrap

Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

$45.00

Ruby Performance Optimization

Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

$46.00

Seven Mobile Apps in Seven Weeks

Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

$26.00

post /line_items?product_id=2

product_id => 2

You are being redirected.

get http://localhost:3000/

Your Cart

1×	Rails, Angular, Postgres, and Bootstrap	$45.00
Total		$45.00

Your Downloads

Rails, Angular, Postgres, and Bootstrap

Your Pragmatic Catalog

Rails, Angular, Postgres, and Bootstrap

$45.00

Ruby Performance Optimization

$46.00

Seven Mobile Apps in Seven Weeks

$26.00

get /orders/new

Your Cart

1×	Rails, Angular, Postgres, and Bootstrap	$45.00
Total		$45.00

Your Downloads

Rails, Angular, Postgres, and Bootstrap

Please Enter Your Details

post /orders

order[name] => Dave Thomas
order[address] => 123 Main St
order[email] => customer@example.com
order[pay_type] => Check

You are being redirected.

get http://localhost:3000/

Your Downloads

Rails, Angular, Postgres, and Bootstrap

Thank you for your order.

Your Pragmatic Catalog

Rails, Angular, Postgres, and Bootstrap

$45.00

Ruby Performance Optimization

$46.00

Seven Mobile Apps in Seven Weeks

$26.00

edit app/views/orders/_form.html.erb

<%= form_with(model: order, local: true) do |form| %>

  <% if order.errors.any? %>

    <div id="error_explanation">

      <h2><%= pluralize(order.errors.count, "error") %>

      prohibited this order from being saved:</h2>

      <ul>

      <% order.errors.full_messages.each do |message| %>

        <li><%= message %></li>

      <% end %>

      </ul>

    </div>

  <% end %>

  <div class="field">

    <%= form.label :name %>

    <%= form.text_field :name, id: :order_name, size: 40 %>

  </div>

  <div class="field">

    <%= form.label :address %>

    <%= form.text_area :address, id: :order_address, rows: 3, cols: 40 %>

  </div>

  <div class="field">

    <%= form.label :email %>

    <%= form.email_field :email, id: :order_email, size: 40 %>

  </div>

  <div id='pay-type-component'></div>

  <div class="actions">

    <%= form.submit 'Place Order' %>

  </div>

<% end %>

edit app/views/orders/new.html.erb

<div class="depot_form">

  <fieldset>

    <legend>Please Enter Your Details</legend>

    <%= render 'form', order: @order %>

  </fieldset>

</div>

<%= javascript_pack_tag("pay_type") %>

edit app/javascript/packs/pay_type.jsx

import React           from 'react'              // <callout id="co.payment-details.pay_type.import-react"/>

import ReactDOM        from 'react-dom'           // <callout id="co.payment-details.pay_type.import-react-dom"/>

import PayTypeSelector from 'PayTypeSelector'     // <callout id="co.payment-details.pay_type.import-PayTypeSelector"/>

document.addEventListener('DOMContentLoaded', function() {       // <callout id="co.payment-details.pay_type.DOMContentLoaded"/>

  var element = document.getElementById("pay-type-component"); // <callout id="co.payment-details.pay_type.getElementById"/>

  ReactDOM.render(<PayTypeSelector />, element);                 // <callout id="co.payment-details.pay_type.jsx"/>

});

mkdir app/javascript/PayTypeSelector

edit app/javascript/PayTypeSelector/index.jsx

import React from 'react'

class PayTypeSelector extends React.Component {

  render() {

    return (

      <div className="field">

        <label htmlFor="order_pay_type">Pay type</label>

        <select id="pay_type" name="order[pay_type]">

          <option value="">Select a payment method</option>

          <option value="Check">Check</option>

          <option value="Credit card">Credit card</option>

          <option value="Purchase order">Purchase order</option>

        </select>

      </div>

);

export default PayTypeSelector

rm app/javascript/PayTypeSelector/index.jsx

edit app/javascript/PayTypeSelector/index.jsx

import React from 'react'

import NoPayType            from './NoPayType';

import CreditCardPayType    from './CreditCardPayType';

import CheckPayType         from './CheckPayType';

import PurchaseOrderPayType from './PurchaseOrderPayType';

class PayTypeSelector extends React.Component {

  constructor(props) {

    super(props);

    this.onPayTypeSelected = this.onPayTypeSelected.bind(this);

    this.state = { selectedPayType: null };

  onPayTypeSelected(event) {

    this.setState({ selectedPayType: event.target.value });

  render() {

    let PayTypeCustomComponent = NoPayType;

    if (this.state.selectedPayType == "Credit card") {

      PayTypeCustomComponent = CreditCardPayType;

    } else if (this.state.selectedPayType == "Check") {

      PayTypeCustomComponent = CheckPayType;

    } else if (this.state.selectedPayType == "Purchase order") {

      PayTypeCustomComponent = PurchaseOrderPayType;

    return (

      <div>

        <div className="field">

          <label htmlFor="order_pay_type">Pay type</label>

          <select id="pay_type" onChange={this.onPayTypeSelected}

            name="order[pay_type]">

            <option value="">Select a payment method</option>

            <option value="Check">Check</option>

            <option value="Credit card">Credit card</option>

            <option value="Purchase order">Purchase order</option>

          </select>

        </div>

        <PayTypeCustomComponent />

      </div>

);

export default PayTypeSelector

edit app/javascript/PayTypeSelector/NoPayType.jsx

import React from 'react'

class NoPayType extends React.Component {

  render() {

    return (<div></div>);

export default NoPayType

edit app/javascript/PayTypeSelector/CreditCardPayType.jsx

import React from 'react'

class CreditCardPayType extends React.Component {

  render() {

    return (

      <div>

        <div className="field">

          <label htmlFor="order_credit_card_number">CC #</label>

          <input type="password"

                 name="order[credit_card_number]"

                 id="order_credit_card_number" />

        </div>

        <div className="field">

          <label htmlFor="order_expiration_date">Expiry</label>

          <input type="text"

                 name="order[expiration_date]"

                 id="order_expiration_date"

                 size="9"

                 placeholder="e.g. 03/19" />

        </div>

      </div>

);

export default CreditCardPayType

edit app/javascript/PayTypeSelector/CheckPayType.jsx

import React from 'react'

class CheckPayType extends React.Component {

  render() {

    return (

      <div>

        <div className="field">

          <label htmlFor="order_routing_number">Routing #</label>

          <input type="password"

                 name="order[routing_number]"

                 id="order_routing_number" />

        </div>

        <div className="field">

          <label htmlFor="order_account_number">Account #</label>

          <input type="text"

                 name="order[account_number]"

                 id="order_account_number" />

        </div>

      </div>

);

export default CheckPayType

edit app/javascript/PayTypeSelector/PurchaseOrderPayType.jsx

import React from 'react'

class PurchaseOrderPayType extends React.Component {

  render() {

    return (

      <div>

        <div className="field">

          <label htmlFor="order_po_number">PO #</label>

          <input type="password"

                 name="order[po_number]"

                 id="order_po_number" />

        </div>

      </div>

);

export default PurchaseOrderPayType

edit app/controllers/orders_controller.rb

class OrdersController < ApplicationController

  include CurrentCart

  before_action :set_cart, only: [:new, :create]

  before_action :ensure_cart_isnt_empty, only: :new

  before_action :set_order, only: [:show, :edit, :update, :destroy]

  # GET /orders

  # GET /orders.json

  def index

    @orders = Order.all

end

  # GET /orders/1

  # GET /orders/1.json

  def show

end

  # GET /orders/new

  def new

    @order = Order.new

end

  # GET /orders/1/edit

  def edit

end

  # POST /orders

  # POST /orders.json

  def create

    @order = Order.new(order_params)

    @order.add_line_items_from_cart(@cart)

    respond_to do |format|

      if @order.save

        Cart.destroy(session[:cart_id])

        session[:cart_id] = nil

        session[:order_id] = @order.id

        format.html { redirect_to store_index_url, notice:

          'Thank you for your order.' }

        format.json { render :show, status: :created,

          location: @order }

      else

        format.html { render :new }

        format.json { render json: @order.errors,

          status: :unprocessable_entity }

end

end

end

  # PATCH/PUT /orders/1

  # PATCH/PUT /orders/1.json

  def update

    respond_to do |format|

      if @order.update(order_params)

        format.html { redirect_to @order, notice: 'Order was successfully updated.' }

        format.json { render :show, status: :ok, location: @order }

      else

        format.html { render :edit }

        format.json { render json: @order.errors, status: :unprocessable_entity }

end

end

end

  # DELETE /orders/1

  # DELETE /orders/1.json

  def destroy

    @order.destroy

    respond_to do |format|

      format.html { redirect_to orders_url, notice: 'Order was successfully destroyed.' }

      format.json { head :no_content }

end

end

  private

    # Use callbacks to share common setup or constraints between actions.

    def set_order

      @order = Order.find(params[:id])

end

    # Never trust parameters from the scary internet, only allow the white list through.

    def order_params

      params.require(:order).permit(:name, :address, :email, :pay_type)

end

  #...

  private

     def ensure_cart_isnt_empty

       if @cart.line_items.empty?

         redirect_to store_index_url, notice: 'Your cart is empty'

end

end

    # START: pay_type_params

    def pay_type_params

      if order_params[:pay_type] == "Credit Card"

        params.require(:order).permit(:credit_card_number, :expiration_date)

      elsif order_params[:pay_type] == "Check"

        params.require(:order).permit(:routing_number, :account_number)

      elsif order_params[:pay_type] == "Purchase Order"

        params.require(:order).permit(:po_number)

      else

{}

end

end

    # END: pay_type_params

end

edit config/application.rb

require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems

# you've limited to :test, :development, or :production.

Bundler.require(*Rails.groups)

module Depot

  class Application < Rails::Application

    # Initialize configuration defaults for originally generated Rails version.

    config.load_defaults 5.1

    # Settings in config/environments/* take precedence over those specified here.

    # Application configuration should go into files in config/initializers

    # -- all .rb files in that directory are automatically loaded.

    config.filter_parameters += [ :credit_card_number ]

end

end

13.2 Iteration H2: System testing 12.5 Playtime

Agile Web Development with Rails, Edition 5

13.1 Iteration H1: Webpacker and App-Like JavaScript

Restart the server.

Your Cart

Your Downloads

Your Pragmatic Catalog

Rails, Angular, Postgres, and Bootstrap

Ruby Performance Optimization

Seven Mobile Apps in Seven Weeks

Your Cart

Your Downloads

Your Pragmatic Catalog

Rails, Angular, Postgres, and Bootstrap

Ruby Performance Optimization

Seven Mobile Apps in Seven Weeks

Your Cart

Your Downloads

Your Cart

Your Downloads

Your Pragmatic Catalog

Rails, Angular, Postgres, and Bootstrap

Ruby Performance Optimization

Seven Mobile Apps in Seven Weeks