Working configuration

Gemfile

@@ -10,7 +10,8 @@ gem 'pg', '~> 1.1'
 # Use Puma as the app server
 gem 'puma', '~> 5.0'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 6.0.0.beta.5'
+gem 'webpacker', '~> 4.0'
+
 # 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

Gemfile.lock

@@ -136,7 +136,6 @@ GEM
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    semantic_range (2.3.1)
     spring (2.1.1)
     sprockets (4.0.2)
       concurrent-ruby (~> 1.0)
@@ -156,11 +155,10 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webpacker (6.0.0.pre.2)
-      activesupport (>= 5.2)
+    webpacker (4.3.0)
+      activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
+      railties (>= 4.2)
     websocket-driver (0.7.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -182,7 +180,7 @@ DEPENDENCIES
   turbolinks (~> 5)
   tzinfo-data
   web-console (>= 4.1.0)
-  webpacker (~> 6.0.0.beta.5)
+  webpacker (~> 4.0)
 
 RUBY VERSION
    ruby 2.7.2p137

app/javascript/packs/application.js

@@ -9,11 +9,9 @@
 
 
 import Rails from "@rails/ujs"
-import Turbolinks from "turbolinks"
 import * as ActiveStorage from "@rails/activestorage"
 
-import '../stylesheets/application.scss';
+require('../stylesheets/application.scss');
 
 Rails.start()
-Turbolinks.start()
 ActiveStorage.start()

app/javascript/stylesheets/application.css

@@ -0,0 +1,4 @@
+
+body {
+  background-color: red;
+}

app/javascript/stylesheets/application.scss

@@ -1,4 +1,7 @@
+@import "~tailwindcss/base";
+@import "~tailwindcss/components";
+@import "~tailwindcss/utilities";
 
 body {
-  background-color: #333;
+  background-color: yellow;
 }

app/packs/packs/application.js

@@ -0,0 +1,18 @@
+/* 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
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+console.log('Hello World from Webpacker')

babel.config.js

@@ -34,10 +34,17 @@ module.exports = function(api) {
           modules: false,
           exclude: ['transform-typeof-symbol']
         }
+      ],
+      [
+        require('@babel/preset-react').default,
+        {
+          development: isDevelopmentEnv || isTestEnv
+        }
       ]
     ].filter(Boolean),
     plugins: [
       'babel-plugin-macros',
+      '@babel/plugin-transform-react-jsx',
       '@babel/plugin-syntax-dynamic-import',
       isTestEnv && 'babel-plugin-dynamic-import-node',
       '@babel/plugin-transform-destructuring',

config/webpack/base.js

@@ -1,4 +1,3 @@
-const { webpackConfig, merge } = require('@rails/webpacker')
-const customConfig = require('./custom')
-console.log('===============', webpackConfig, customConfig);
-module.exports = merge(webpackConfig, customConfig)
+const { webpackConfig } = require('@rails/webpacker')
+
+module.exports = webpackConfig

config/webpack/custom.js

@@ -17,8 +17,7 @@ module.exports = {
       },
       {
         test: /\.s[ac]ss$/i,
-        use: ["css-loader", "postcss-loader", { loader: "sass-loader", options: { implementation: require("sass") } },
-        ],
+        use: ["css-loader", "sass-loader"],
       },
     ],
   }

config/webpack/development.js

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

config/webpack/environment.js

@@ -0,0 +1,10 @@
+const { environment } = require('@rails/webpacker')
+const webpack = require("webpack")
+
+environment.plugins.append("Provide", new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default']
+}))
+console.log('---------------', environment);
+module.exports = environment

config/webpack/production.js

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

config/webpack/test.js

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

config/webpacker.yml

@@ -6,46 +6,77 @@ default: &default
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
   webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  additional_paths: []
+  resolved_paths: ['vendor/assets/javascripts']
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Extract and emit a css file
+  extract_css: true
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
+  extensions:
+    - .mjs
+    - .js
+    - .jsx
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
 development:
   <<: *default
   compile: true
 
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+#  check_yarn_integrity: true
+
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
     host: localhost
     port: 3035
     public: localhost:3035
-    # Hot Module Replacement updates modules while the application is running without a full reload
-    hmr: false
-    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
+    hmr: true
+    # Inline should be set to true if using HMR
     inline: true
-    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
     overlay: true
-    # Should we use gzip compression?
     compress: true
-    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
     disable_host_check: true
-    # This option lets the browser open with your local IP
     use_local_ip: false
-    # When enabled, nothing except the initial startup information will be written to the console.
-    # This also means that errors or warnings from webpack are not visible.
     quiet: false
     pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:
       ignored: '**/node_modules/**'
 
+
 test:
   <<: *default
   compile: true
@@ -59,5 +90,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Extract and emit a css file
+  extract_css: true
+
   # Cache manifest.json for performance
   cache_manifest: true

package.json

@@ -1,54 +1,78 @@
 {
-  "name": "gastro-app",
+  "name": "apd_app",
   "private": true,
+  "scripts": {
+    "react-test:debug": "node --inspect node_modules/.bin/jest --runInBand",
+    "react-test:debug:watch": "node --inspect node_modules/.bin/jest --watch --runInBand",
+    "react-test": "jest --coverage --verbose",
+    "lint:js": "eslint --ext .jsx --ext .js app/assets/javascripts/react/ && eslint --ext .jsx --ext .js spec/react/",
+    "lint:js:fix": "eslint --ext .jsx --ext .js app/assets/javascripts/react/ --fix && eslint --ext .jsx --ext .js spec/react/ --fix",
+    "lint:scss": "./node_modules/stylelint/bin/stylelint.js --formatter verbose --color \"app/assets/stylesheets/react/**/**/*.scss\"",
+    "lint": "yarn lint:scss && yarn lint:js"
+  },
   "dependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-transform-react-jsx": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
+    "@fortawesome/fontawesome-free": "^5.13.0",
+    "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
-    "@rails/webpacker": "^6.0.0-beta.5",
+    "@rails/webpacker": "4.2.2",
     "@tailwindcss/aspect-ratio": "^0.2.0",
     "@tailwindcss/forms": "^0.2.1",
+    "@tailwindcss/postcss7-compat": "^2.0.2",
     "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.4",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "postcss": "^8.2.4",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "tailwindcss": "^2.0.2",
-    "turbolinks": "^5.2.0",
-    "webpack": "^5.11.0",
-    "webpack-cli": "^4.2.0"
+    "ahoy.js": "^0.3.7",
+    "autoprefixer": "^9",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.6",
+    "bootstrap": "^4.4.1",
+    "clsx": "^1.1.1",
+    "dayjs": "^1.9.6",
+    "flatpickr": "^4.6.3",
+    "formik": "^2.1.5",
+    "jquery": "^3.5.0",
+    "jquery.easing": "^1.4.1",
+    "lodash": "^4.17.20",
+    "moment": "^2.25.3",
+    "popper.js": "^1.16.1",
+    "postcss": "^7",
+    "react": "^16.9.0",
+    "react-bootstrap": "^1.3.0",
+    "react-content-loader": "^5.1.2",
+    "react-dom": "^16.9.0",
+    "react-gtm-module": "^2.0.11",
+    "react-redux": "^7.1.0",
+    "react-router-dom": "^5.2.0",
+    "react-script-tag": "^1.1.2",
+    "react-slick": "^0.27.11",
+    "react_ujs": "^2.6.1",
+    "redux": "^4.0.1",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-thunk": "^2.3.0",
+    "sass": "^1.27.0",
+    "slick-carousel": "^1.8.1",
+    "sortablejs": "^1.10.2",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "timepicki": "^2.0.1"
   },
   "version": "0.1.0",
   "devDependencies": {
-    "@babel/runtime": "^7.10.2",
-    "@webpack-cli/serve": "^1.3.0",
-    "css-loader": "^5.0.1",
-    "mini-css-extract-plugin": "^1.3.5",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^14.0.0",
-    "postcss-loader": "^5.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "sass": "^1.32.6",
-    "sass-loader": "^11.0.0",
-    "style-loader": "^2.0.0",
-    "stylelint-config-recommended": "^3.0.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-md5-hash": "^0.0.6"
+    "jest": "^26.6.3",
+    "mockdate": "^3.0.2",
+    "postcss-loader": "~3.0.0",
+    "webpack-dev-server": "^3.10.3"
   },
-  "babel": {
-    "presets": [
-      "./node_modules/@rails/webpacker/package/babel/preset.js"
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/config/webpack/test.js"
     ]
   },
-  "browserslist": [
-    "defaults"
-  ],
-  "babel": {
-    "presets": ["./node_modules/@rails/webpacker/package/babel/preset.js"]
-  },
   "browserslist": [
     "defaults"
   ]

postcss.config.js

@@ -1,12 +1,14 @@
 module.exports = {
   plugins: [
+    require('autoprefixer'),
     require('postcss-import'),
+    require('tailwindcss'),
     require('postcss-flexbugs-fixes'),
     require('postcss-preset-env')({
       autoprefixer: {
-        flexbox: 'no-2009'
+        flexbox: 'no-2009',
       },
-      stage: 3
-    })
-  ]
-}
+      stage: 3,
+    }),
+  ],
+};