Merge remote-tracking branch 'refs/remotes/Upstream/master'

Conflicts: README.md factory_settings.ini features.ini interface/.env.development interface/package-lock.json interface/package.json interface/src/AppRouting.tsx interface/src/ap/APSettingsForm.tsx interface/src/api/Endpoints.ts interface/src/api/Env.ts interface/src/authentication/AuthenticatedRoute.tsx interface/src/authentication/AuthenticationContext.tsx interface/src/authentication/AuthenticationWrapper.tsx interface/src/components/MenuAppBar.tsx interface/src/components/RestController.tsx interface/src/components/index.ts interface/src/features/FeaturesContext.tsx interface/src/framework/wifi/WiFiConnectionContext.tsx interface/src/ntp/TimeFormat.ts interface/src/system/OTASettingsForm.tsx interface/src/system/System.tsx interface/src/validators/optional.ts interface/src/validators/or.ts interface/src/wifi/WiFiConnection.tsx interface/src/wifi/WiFiConnectionContext.tsx interface/src/wifi/WiFiSettingsForm.tsx interface/tsconfig.json lib/framework/ESPUtils.h lib/framework/MqttSettingsService.h
rjwats · mjkl-gh · Jan 2, 2021 · Jan 2, 2021 · Dec 25, 2021 · Dec 25, 2021
commit 0c9d454fac04692c30d7c372f9eb01044315c555
diff --git a/.github/workflows/verify_build.yml b/.github/workflows/verify_build.yml
@@ -0,0 +1,37 @@
+name: Build Framework
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Cache pip
+      uses: actions/cache@v2
+      with:
+        path: ~/.cache/pip
+        key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}
+        restore-keys: |
+          ${{ runner.os }}-pip-
+    - name: Cache PlatformIO
+      uses: actions/cache@v2
+      with:
+        path: ~/.platformio
+        key: ${{ runner.os }}-${{ hashFiles('**/lockfiles') }}
+    - name: Set up Python
+      uses: actions/setup-python@v2
+    - name: Install PlatformIO
+      run: |
+        python -m pip install --upgrade pip
+        pip install --upgrade platformio
+    - name: Run PlatformIO
+      run: pio run -e esp12e -e node32s
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,5 @@
 /lib/framework/WWWData.h
 /interface/build
 /interface/node_modules
+/interface/.eslintcache
 .vscode
diff --git a/.travis.yml b/.travis.yml
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/rjwats/esp8266-react.svg?branch=master)](https://travis-ci.org/rjwats/esp8266-react)
 
-A simple, secure and extensible framework for IoT projects built on ESP8266/ESP32 platforms with responsive [React](https://reactjs.org/) front-end built with [Material-UI](https://material-ui.com/).
+A simple, secure and extensible framework for IoT projects built on ESP8266/ESP32 platforms with responsive [React](https://reactjs.org/) front-end built with [Material-UI](https://mui.com/).
 
 Designed to work with the PlatformIO IDE with [limited setup](#getting-started). Please read below for setup, build and upload instructions.
 
@@ -118,37 +118,24 @@ UI development is an iterative process so it's best to run a development server
 
 The following steps can get you up and running for local interface development:
 
-- [Enable CORS](#enabling-cors) in platformio.ini
 - Deploy firmware to device
-- [Configure endpoint root](#configuring-the-endpoint-root) with device's IP in interface/.env.development
+- [Configuring the dev proxy](#configuring-the-dev-proxy) with device's IP in interface/package.json
 - [Start the development server](#starting-the-development-server) with "npm start"
 - Develop interface locally
 
-#### Enabling CORS
+#### Configuring the dev proxy
 
-You can enable CORS on the back end by uncommenting the -D ENABLE_CORS build flag in ['platformio.ini'](platformio.ini) then re-building and uploading the firmware to the device. The default settings assume you will be accessing the development server on the default port on [http://localhost:3000](http://localhost:3000) this can also be changed if required:
+The interface has a development environment which is enabled when running the development server using `npm start`. The [package.json](interface/package.json) file defines the location of the services which the development server will proxy. This is defined by the "proxy" propery, which will need to be change to the the IP address or hostname of the device running the firmware.
 
-```ini
--D ENABLE_CORS
--D CORS_ORIGIN=\"http://localhost:3000\"
-```
-
-#### Configuring the endpoint root
-
-The interface has a development environment which is enabled when running the development server using `npm start`. The environment file can be found in ['interface/.env.development'](interface/.env.development) and contains the HTTP root URL and the WebSocket root URL:
-
-```ini
-REACT_APP_HTTP_ROOT=http://192.168.0.99
-REACT_APP_WEB_SOCKET_ROOT=ws://192.168.0.99
+```json
+"proxy": "http://192.168.0.77"
 ```
 
-The `REACT_APP_HTTP_ROOT` and `REACT_APP_WEB_SOCKET_ROOT` properties can be modified to point a ESP device running the back end.
-
-> **Tip**: You must restart the development server for changes to the environment file to come into effect.
+> **Tip**: You must restart the development server for changes to the proxy location to come into effect. Note that the proxy is configured to handle http and WebSocket connections from this location, see [setupProx
10000
y.js](interface/src/setupProxy.js) for details.
 
 #### Starting the development server
 
-Change to the ['interface'](interface) directory with your bash shell (or Git Bash) and use the standard commands you would with any react app built with create-react-app:
+Change to the [interface](interface) directory with your bash shell (or Git Bash) and use the standard commands you would with any react app built with create-react-app:
 
 ```bash
 cd interface
@@ -283,32 +270,38 @@ The framework, and MaterialUI allows for a reasonable degree of customization wi
 
 ### Theming the app
 
-The app can be easily themed by editing the [MaterialUI theme](https://material-ui.com/customization/theming/). Edit the theme in ['interface/src/CustomMuiTheme.tsx'](interface/src/CustomMuiTheme.tsx) as you desire. For example, here is a dark theme:
+The app can be easily themed by editing the [MaterialUI theme](https://mui.com/customization/typography/). Edit the theme in ['interface/src/CustomMuiTheme.tsx'](interface/src/CustomTheme.tsx) as you desire. For example, here is a dark theme:
 
 ```js
-const theme = createMuiTheme({
-  palette: {
-    type:"dark",
-    primary: {
-      main: '#222',
-    },
-    secondary: {
-      main: '#666',
-    },
-    info: {
-      main: blueGrey[500]
-    },
-    warning: {
-      main: orange[500]
-    },
-    error: {
-      main: red[500]
-    },
-    success: {
-      main: green[500]
+const theme = responsiveFontSizes(
+  createTheme({
+    palette: {
+      mode: "dark",
+      text: {
+        primary: '#fff',
+        secondary: grey[500],
+      },
+      primary: {
+        main: indigo[500]
+      },
+      secondary: {
+        main: blueGrey[800]
+      },
+      info: {
+        main: indigo[800]
+      },
+      warning: {
+        main: orange[800]
+      },
+      error: {
+        main: red[800]
+      },
+      success: {
+        main: green[800]
+      }
     }
-  }
-});
+  })
+);
 ```
 
 ![Dark Theme](/media/dark.png?raw=true "Dark Theme")
@@ -669,7 +662,7 @@ esp8266React.getWiFiSettingsService()->addUpdateHandler(
 ## Libraries Used
 
 * [React](https://reactjs.org/)
-* [Material-UI](https://material-ui.com/)
+* [Material-UI](https://mui.com/)
 * [notistack](https://github.com/iamhosseindhv/notistack)
 * [ArduinoJson](https://github.com/bblanchon/ArduinoJson)
 * [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer)

diff --git a/interface/.env b/interface/.env
@@ -1,3 +1,6 @@
+# This enables lint extensions
+EXTEND_ESLINT=true
+
 # This is the name of your project. It appears on the sign-in page and in the menu bar.
 REACT_APP_PROJECT_NAME=ESP8266 React
 

diff --git a/interface/.env.development b/interface/.env.development
diff --git a/interface/.env.production b/interface/.env.production
@@ -1 +1,2 @@
+# Disable the generation of the sourcemap on the production build to reduce the artefact size
 GENERATE_SOURCEMAP=false
diff --git a/interface/config-overrides.js b/interface/config-overrides.js
@@ -1,37 +1,28 @@
-const ManifestPlugin = require('webpack-manifest-plugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const ProgmemGenerator = require('./progmem-generator.js');
-
-const path = require('path');
-const fs = require('fs');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = function override(config, env) {
   if (env === "production") {
     // rename the ouput file, we need it's path to be short, for embedded FS
     config.output.filename = 'js/[id].[chunkhash:4].js';
     config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
 
-    // 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 WorkboxWebpackPlugin.GenerateSW));
+    // take out the manifest plugin
+    config.plugins = config.plugins.filter((plugin) => !(plugin instanceof WebpackManifestPlugin));
 
     // 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";
 
+    // don't emit license file
+    const terserPlugin = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);
+    terserPlugin.options.extractComments = false;
+
     // build progmem data files
     config.plugins.push(new ProgmemGenerator({ outputPath: "../lib/framework/WWWData.h", bytesPerLine: 20 }));
-
-    // add compression plugin, compress javascript
-    config.plugins.push(new CompressionPlugin({
-      filename: "[path].gz[query]",
-      algorithm: "gzip",
-      test: /\.(js)$/,
-      deleteOriginalAssets: true
-    }));
   }
   return config;
-}
+};
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		# Disable the generation of the sourcemap on the production build to reduce the artefact size
		GENERATE_SOURCEMAP=false