Update Example Dependencies (#261)

Author: Judahmeek

examples/basic/package.json

@@ -13,6 +13,7 @@
     "lint": "eslint --ext .js .",
     "build": "npm run clean && webpack --config webpack.prod.config.js",
     "prod": "nodemon --watch app/markup --ext html server.prod.js",
+    "post-install": "echo 'module.exports = {}' >> node_modules/bootstrap-loader/postcss.config.js",
     "bs:no-config": "npm run cleanrc && npm start",
     "bs3": "npm run cleanrc && BOOTSTRAPRC_LOCATION=.bootstraprc-3-example nodemon --watch app/markup --ext html server.dev.js",
     "bs4": "npm run cleanrc && BOOTSTRAPRC_LOCATION=.bootstraprc-4-example nodemon --watch app/markup --ext html server.dev.js",
@@ -24,7 +25,7 @@
     "bs4:default:dev": "npm run bs4:default:setup && npm start",
     "bs3:default:prod": "npm run bs3:default:setup && npm run build && npm run prod",
     "bs4:default:prod": "npm run bs4:default:setup && npm run build && npm run prod",
-    "install-local": "npm install --save-dev ../.."
+    "install-local": "rm -rf node_modules/bootstrap-loader && npm install --save-dev ../.. && npm run post-install"
   },
   "repository": {
     "type": "git",
@@ -40,9 +41,9 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "express": "^4.14.0",
     "bootstrap": "4.0.0-alpha.4",
     "bootstrap-sass": "^3.3.7",
+    "express": "^4.14.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.1.1",
     "tether": "^1.3.7"
@@ -54,24 +55,28 @@
     "babel-loader": "^6.2.8",
     "babel-preset-es2015": "^6.18.0",
     "body-parser": "^1.15.2",
-    "bootstrap-loader": "file:///Users/judahmeek/Apps/bootstrap-loader",
+    "bootstrap-loader": "file:../..",
     "css-loader": "^0.26.0",
     "eslint": "^3.10.2",
     "eslint-config-shakacode": "^13.1.0",
     "eslint-plugin-import": "^2.2.0",
     "extract-text-webpack-plugin": "^2.0.0-beta",
-    "file-loader": "^0.9.0",
+    "file-loader": "^0.10.0",
     "font-awesome-loader": "^1.0.1",
-    "imports-loader": "^0.6.5",
-    "node-sass": "^3.13.0",
+    "imports-loader": "^0.7.0",
+    "node-sass": "^4.5.0",
     "nodemon": "^1.11.0",
     "postcss-loader": "^1.1.1",
-    "resolve-url-loader": "^1.6.0",
-    "sass-loader": "^4.0.2",
+    "resolve-url-loader": "^2.0.0",
+    "sass-loader": "^6.0.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.1.0-beta",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.2"
+  },
+  "peerDependencies": {
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.6.0"
   }
 }

examples/basic/server.dev.js

@@ -1,4 +1,4 @@
-/* eslint no-console: 0 */
+/* eslint-disable no-console, import/no-extraneous-dependencies */
 
 const path = require('path');
 const express = require('express');
@@ -33,7 +33,7 @@ server.use(webpackHotMiddleware(compiler));
 server.use(bodyParser.json());
 server.use(bodyParser.urlencoded({ extended: true }));
 
-server.use('/', (req, res) => (
+server.use('/', (req, res) => ( // eslint-disable-line no-unused-vars
   res.sendFile(path.join(__dirname, 'app', 'markup', 'bootstrap-dev.html'))
 ));
 

examples/basic/server.prod.js

@@ -1,4 +1,4 @@
-/* eslint no-console: 0 */
+/* eslint-disable no-console, import/no-extraneous-dependencies */
 
 const path = require('path');
 const express = require('express');
@@ -14,7 +14,7 @@ server.use(bodyParser.urlencoded({ extended: true }));
 
 server.use(express.static(path.join(__dirname, 'public')));
 
-server.use('/', (req, res) => (
+server.use('/', (req, res) => ( // eslint-disable-line no-unused-vars
   res.sendFile(path.join(__dirname, 'app', 'markup', 'bootstrap-prod.html'))
 ));
 

examples/basic/webpack.dev.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 // Very similar to webpack.prod.config.js. Common parts could be extracted to a base config.
 // See example at:
 // https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js
@@ -31,7 +32,7 @@ module.exports = {
 
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new webpack.ProvidePlugin({
       'window.Tether': 'tether',
     }),
@@ -41,25 +42,25 @@ module.exports = {
   ],
 
   module: {
-    loaders: [
-      { test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
-      { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] },
+    rules: [
+      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
+      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] },
       {
         test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'url-loader?limit=10000',
+        use: 'url-loader?limit=10000',
       },
       {
         test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
-        loader: 'file-loader',
+        use: 'file-loader',
       },
 
       // Use one of these to serve jQuery for Bootstrap scripts:
 
       // Bootstrap 4
-      { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
+      { test: /bootstrap\/dist\/js\/umd\//, use: 'imports-loader?jQuery=jquery' },
 
       // Bootstrap 3
-      { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports-loader?jQuery=jquery' },
+      { test: /bootstrap-sass\/assets\/javascripts\//, use: 'imports-loader?jQuery=jquery' },
     ],
   },
 

examples/basic/webpack.prod.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, object-property-newline */
 // Very similar to webpack.dev.config.js. Common parts could be extracted to a base config.
 // See example at:
 // https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js
@@ -40,32 +41,32 @@ module.exports = {
   ],
 
   module: {
-    loaders: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({
-        fallbackLoader: 'style-loader', loader: 'css-loader!postcss-loader',
+    rules: [
+      { test: /\.css$/, use: ExtractTextPlugin.extract({
+        fallback: 'style-loader', use: 'css-loader!postcss-loader',
       }) },
-      { test: /\.scss$/, loader: ExtractTextPlugin.extract({
-        fallbackLoader: 'style-loader', loader: 'css-loader!postcss-loader!sass-loader',
+      { test: /\.scss$/, use: ExtractTextPlugin.extract({
+        fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader',
       }) },
 
       {
         test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
-        // loader: "url?limit=10000"
-        loader: 'url-loader',
+        // use: "url?limit=10000"
+        use: 'url-loader',
       },
       {
         test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
-        loader: 'file-loader',
+        use: 'file-loader',
       },
 
       // Use one of these to serve jQuery for Bootstrap scripts:
 
       // Bootstrap 4
-      { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
+      { test: /bootstrap\/dist\/js\/umd\//, use: 'imports-loader?jQuery=jquery' },
 
       // Bootstrap 3
-      { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports-loader?jQuery=jquery' },
+      { test: /bootstrap-sass\/assets\/javascripts\//, use: 'imports-loader?jQuery=jquery' },
     ],
   },