From 9ee875c2a5204836e74c07d413f5c920ffa9659d Mon Sep 17 00:00:00 2001 From: Rick Watson Date: Sun, 14 Apr 2019 17:03:28 +0100 Subject: [PATCH] upgrade react, react-scripts and build overrides --- interface/.env.development | 2 +- interface/.env.production | 3 ++- interface/config-overrides.js | 24 ++++++++++---------- interface/package.json | 30 +++++++++++++++---------- interface/src/forms/WiFiSettingsForm.js | 4 ++-- 5 files changed, 35 insertions(+), 28 deletions(-) diff --git a/interface/.env.development b/interface/.env.development index fd792a3..3cd2036 100644 --- a/interface/.env.development +++ b/interface/.env.development @@ -1 +1 @@ -REACT_APP_ENDPOINT_ROOT=http://192.168.0.6/rest/ \ No newline at end of file +REACT_APP_ENDPOINT_ROOT=http://192.168.0.26/rest/ \ No newline at end of file diff --git a/interface/.env.production b/interface/.env.production index 480ffc6..e2075f0 100644 --- a/interface/.env.production +++ b/interface/.env.production @@ -1 +1,2 @@ -REACT_APP_ENDPOINT_ROOT=/rest/ \ No newline at end of file +REACT_APP_ENDPOINT_ROOT=/rest/ +GENERATE_SOURCEMAP=false \ No newline at end of file diff --git a/interface/config-overrides.js b/interface/config-overrides.js index b40971e..80a6221 100644 --- a/interface/config-overrides.js +++ b/interface/config-overrides.js @@ -1,7 +1,7 @@ -const CompressionPlugin = require("compression-webpack-plugin"); const ManifestPlugin = require('webpack-manifest-plugin'); -const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const CompressionPlugin = require("compression-webpack-plugin"); const path = require('path'); const fs = require('fs'); @@ -9,21 +9,21 @@ const fs = require('fs'); module.exports = function override(config, env) { if (env === "production") { // rename the ouput file, we need it's path to be short, for SPIFFS - config.output.filename = 'js/[name].[chunkhash:4].js'; - - // disable sourcemap for production build - config.devtool = false; + config.output.filename = 'js/[id].[chunkhash:4].js'; + config.output.chunkFilename = 'js/[id].[chunkhash:4].js'; - // take out the manifest and service worker + // take out the manifest and service worker plugins config.plugins = config.plugins.filter(plugin => !(plugin instanceof ManifestPlugin)); - config.plugins = config.plugins.filter(plugin => !(plugin instanceof SWPrecacheWebpackPlugin)); + config.plugins = config.plugins.filter(plugin => !(plugin instanceof WorkboxWebpackPlugin.GenerateSW)); - const extractTextPlugin = config.plugins.find((plugin) => plugin instanceof ExtractTextPlugin); - extractTextPlugin.filename = "css/[name].[contenthash:4].css"; + // shorten css filenames + const miniCssExtractPlugin = config.plugins.find((plugin) => plugin instanceof MiniCssExtractPlugin); + miniCssExtractPlugin.options.filename = "css/[id].[contenthash:4].css"; + miniCssExtractPlugin.options.chunkFilename = "css/[id].[contenthash:4].c.css"; // add compression plugin, compress javascript config.plugins.push(new CompressionPlugin({ - asset: "[path].gz[query]", + filename: "[path].gz[query]", algorithm: "gzip", test: /\.(js)$/, deleteOriginalAssets: true diff --git a/interface/package.json b/interface/package.json index d292239..93dc77c 100644 --- a/interface/package.json +++ b/interface/package.json @@ -5,17 +5,17 @@ "dependencies": { "@material-ui/core": "^3.9.3", "@material-ui/icons": "^3.0.2", - "compression-webpack-plugin": "^1.1.12", - "moment": "^2.22.2", - "prop-types": "^15.6.2", - "react": "^16.5.1", - "react-dom": "^16.5.1", - "react-form-validator-core": "^0.3.0", + "compression-webpack-plugin": "^2.0.0", + "moment": "^2.24.0", + "prop-types": "^15.7.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-form-validator-core": "^0.6.2", "react-jss": "^8.6.1", - "react-material-ui-form-validator": "^2.0.1", - "react-router": "^4.3.1", - "react-router-dom": "^4.3.1", - "react-scripts": "1.0.17" + "react-material-ui-form-validator": "^2.0.7", + "react-router": "^5.0.0", + "react-router-dom": "^5.0.0", + "react-scripts": "2.1.8" }, "scripts": { "start": "react-app-rewired start", @@ -24,6 +24,12 @@ "eject": "react-scripts eject" }, "devDependencies": { - "react-app-rewired": "^1.6.2" - } + "react-app-rewired": "^2.1.1" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] } diff --git a/interface/src/forms/WiFiSettingsForm.js b/interface/src/forms/WiFiSettingsForm.js index 663911a..3cddf63 100644 --- a/interface/src/forms/WiFiSettingsForm.js +++ b/interface/src/forms/WiFiSettingsForm.js @@ -79,9 +79,9 @@ class WiFiSettingsForm extends React.Component { } render() { - const { classes, formRef, wifiSettingsFetched, wifiSettings, errorMessage, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props; + const { classes, wifiSettingsFetched, wifiSettings, errorMessage, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props; return ( -
+
{ !wifiSettingsFetched ?