Replace custom webpack configs with simplified one (#477)

Author: hussainakram

client/.bootstraprc renamed to .bootstraprc

@@ -32,7 +32,7 @@ extractStyles: false
 # For example, _variables.scss contains:
 # $input-color: $gray !default;
 # This means you can define $input-color before we load _variables.scss
-preBootstrapCustomizations: ./app/assets/styles/bootstrap-pre-customizations.scss
+preBootstrapCustomizations: ./client/app/assets/styles/bootstrap-pre-customizations.scss
 
 # This gets loaded after bootstrap/variables is loaded and before bootstrap is loaded.
 # A good example of this is when you want to override a bootstrap variable to be based

.browserslistrc

@@ -0,0 +1 @@
+defaults

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+
+client/app/libs/i18n/translations.js
+client/app/libs/i18n/default.js

client/.eslintrc.yml renamed to .eslintrc.yml

@@ -26,11 +26,7 @@ rules:
 
   jsx-a11y/anchor-is-valid: off
 
-#  arrow-parens:
-#    - 0
-#    - "as-needed"
-
 settings:
   import/resolver:
     webpack:
-      config: 'webpack.client.base.config.js'
+      config: 'config/webpack/development.js'

client/.postcssrc renamed to .postcssrc

@@ -15,7 +15,6 @@ AllCops:
     - 'db/**/*'
     - 'db/schema.rb'
     - 'db/seeds.rb'
-    - 'client/node_modules/**/*'
     - 'bin/**/*'
     - 'Procfile.*'
     - !ruby/regexp /old_and_unused\.rb$/

.rubocop.yml

@@ -1,7 +1,6 @@
 # See http://sass-guidelin.es/#zeros
 
 scss_files:
-  - 'app/assets/stylesheets/**/*.scss'
   - 'client/app/**/*.scss'
 
 exclude: 'client/node_modules/**'

.scss-lint.yml

@@ -44,6 +44,7 @@ install:
   - yarn
   - google-chrome --version
   - rake db:setup
+  - bundle exec rake react_on_rails:locale
 
 before_script:
   - "export DISPLAY=:99"

.travis.yml

@@ -3,7 +3,7 @@
 source "https://rubygems.org"
 ruby "2.7.1"
 
-gem "react_on_rails", github: "shakacode/react_on_rails", branch: "justin808/remove-precompile-rake"
+gem "react_on_rails", "12.0.1"
 gem "webpacker"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"

Gemfile

@@ -1,16 +1,3 @@
-GIT
-  remote: https://github.com/shakacode/react_on_rails.git
-  revision: 38403e66bba1c3fde7edd4fb46c7f7daaaa111a6
-  branch: justin808/remove-precompile-rake
-  specs:
-    react_on_rails (12.0.0.pre.beta.2)
-      addressable
-      connection_pool
-      execjs (~> 2.5)
-      rails (>= 3.2)
-      rainbow (~> 3.0)
-      webpacker (>= 4.0)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -216,6 +203,13 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rdoc (6.2.1)
+    react_on_rails (12.0.1)
+      addressable
+      connection_pool
+      execjs (~> 2.5)
+      rails (>= 3.2)
+      rainbow (~> 3.0)
+      webpacker (>= 4.0)
     redis (3.3.3)
     regexp_parser (1.7.1)
     require_all (3.0.0)
@@ -359,7 +353,7 @@ DEPENDENCIES
   rails-html-sanitizer
   rails_best_practices
   rainbow
-  react_on_rails!
+  react_on_rails (= 12.0.1)
   redis (= 3.3.3)
   rspec-rails (= 3.7.2)
   rubocop

Gemfile.lock

@@ -2,7 +2,4 @@
 rails: rails s -b 0.0.0.0
 
 # Build client assets, watching for changes.
-rails-client-assets: rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
-
-# Build server assets, watching for changes. Remove if not server rendering.
-rails-server-assets: yarn run build:dev:server
+rails-client-assets: yarn run build:dev

Procfile.static

@@ -204,13 +204,9 @@ Save a change to a JSX file and see it update immediately in the browser! Note,
 line in the `rails_helper.rb` file. If you are using this project as an example and are not using RSpec, you may want to implement similar logic in your own project.
 
 ## Webpack
-### Configuration Files
 
-- `webpack.client.base.config.js`: Common **client** configuration file to minimize code duplication for `webpack.client.rails.build.config`, `webpack.client.rails.hot.config`, `webpack.client.express.config`
-- `webpack.client.express.config.js`: Webpack configuration for Express server [client/server-express.js](client/server-express.js)
-- `webpack.client.rails.build.config.js`: Client side js bundle for deployment and tests.
-- `webpack.client.rails.hot.config.js`: Webpack Dev Server bundler for serving rails assets on port 3500, used by [client/server-rails-hot.js](client/server-rails-hot.js), for hot reloading JS and CSS within Rails.
-- `webpack.server.rails.build.config.js`: Server side js bundle, used by server rendering.
+_Converted to use @rails/webpacker webpack configuration_.
+
 
 ### Additional Resources
 - [Webpack Docs](https://webpack.js.org/)

README.md

@@ -3,16 +3,13 @@
 <head>
   <title>RailsReactTutorial</title>
 
-  <%= stylesheet_pack_tag('vendor-bundle',
-                          media: 'all',
-                          'data-turbolinks-track': true) %>
+  <%= stylesheet_packs_with_chunks_tag('clientRegistration',
+                                        media: 'all',
+                                        'data-turbolinks-track': true) %>
 
-  <%= stylesheet_pack_tag('app-bundle',
-                          media: 'all',
-                          'data-turbolinks-track': true) %>
-
-  <%= javascript_pack_tag('vendor-bundle', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('app-bundle', 'data-turbolinks-track': true) %>
+  <%= javascript_packs_with_chunks_tag('clientRegistration',
+                                       'data-turbolinks-track': true,
+                                       defer: true) %>
 
   <%= csrf_meta_tags %>
 </head>

app/assets/javascripts/application_non_webpack.js

@@ -0,0 +1,51 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+  const isHMR = process.env.WEBPACK_DEV_SERVER
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && '@babel/preset-env',
+      "@babel/preset-react",
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      isDevelopmentEnv && isHMR && 'react-refresh/babel',
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

app/assets/javascripts/application_static.js

@@ -13,5 +13,6 @@ require "webpacker/webpack_runner"
 
 APP_ROOT = File.expand_path("..", __dir__)
 
-puts "bin/webpack is running #{APP_ROOT}/bin/webpack.sh"
-exec "#{APP_ROOT}/bin/webpack.sh"
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

app/assets/stylesheets/application_non_webpack.scss

@@ -0,0 +1,19 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+ENV["WEBPACK_DEV_SERVER"] ||= "TRUE"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end

app/assets/stylesheets/application_static.scss

@@ -9,7 +9,7 @@ import SelectLanguage from 'libs/i18n/selectLanguage';
 import { defaultMessages, defaultLocale } from 'libs/i18n/default';
 
 import CommentForm from './CommentForm/CommentForm';
-import CommentList, { CommentPropTypes } from './CommentList/CommentList';
+import CommentList, { commentPropTypes } from './CommentList/CommentList';
 import css from './CommentBox.scss';
 
 class CommentBox extends BaseComponent {
@@ -22,7 +22,7 @@ class CommentBox extends BaseComponent {
       isFetching: PropTypes.boolean,
       isSaving: PropTypes.boolean,
       submitCommentError: PropTypes.string,
-      $$comments: PropTypes.arrayOf(CommentPropTypes),
+      $$comments: PropTypes.arrayOf(commentPropTypes),
     }).isRequired,
     intl: intlShape.isRequired,
   };

app/views/layouts/application.html.erb

@@ -0,0 +1 @@
+import 'bootstrap-loader';