8000 New UI - Hooks, Material UI v5 + AXIOS (#262) · willivstn/esp8266-react@5336ffd · GitHub
[go: up one dir, main page]
Skip to content
/ esp8266-react Public
forked from rjwats/esp8266-react

Commit 5336ffd

Browse files
rjwatsrjwats
authored
New UI - Hooks, Material UI v5 + AXIOS (rjwats#262)
Change all class components to FCs Use hooks throughout Replace react-material-ui-form-validator with async-validator Upgrade UI dependencies Use dev proxy instead of CORS for local development Use AXIOS instead of fetch
1 parent 787b1c3 commit 5336ffd

File tree

202 files changed

+7835
-8630
lines changed
  • fonts
  • src
  • tsconfig.json
  • lib/framework
  • platformio.ini

    • Some content is hidden

    Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

    202 files changed

    +7835
    -8630
    lines changed

    ‎README.md

    Lines changed: 7 additions & 20 deletions
    Original file line numberDiff line numberDiff line change
    @@ -118,37 +118,24 @@ UI development is an iterative process so it's best to run a development server
    118118

    119119
    The following steps can get you up and running for local interface development:
    120120

    121-
    - [Enable CORS](#enabling-cors) in platformio.ini
    122121
    - Deploy firmware to device
    123-
    - [Configure endpoint root](#configuring-the-endpoint-root) with device's IP in interface/.env.development
    122+
    - [Configuring the dev proxy](#configuring-the-dev-proxy) with device's IP in interface/package.json
    124123
    - [Start the development server](#starting-the-development-server) with "npm start"
    125124
    - Develop interface locally
    126125

    127-
    #### Enabling CORS
    126+
    #### Configuring the dev proxy
    128127

    129-
    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:
    128+
    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.
    130129

    131-
    ```ini
    132-
    -D ENABLE_CORS
    133-
    -D CORS_ORIGIN=\"http://localhost:3000\"
    134-
    ```
    135-
    136-
    #### Configuring the endpoint root
    137-
    138-
    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:
    139-
    140-
    ```ini
    141-
    REACT_APP_HTTP_ROOT=http://192.168.0.99
    142-
    REACT_APP_WEB_SOCKET_ROOT=ws://192.168.0.99
    130+
    ```json
    131+
    "proxy": "http://192.168.0.77"
    143132
    ```
    144133

    145-
    The `REACT_APP_HTTP_ROOT` and `REACT_APP_WEB_SOCKET_ROOT` properties can be modified to point a ESP device running the back end.
    146-
    147-
    > **Tip**: You must restart the development server for changes to the environment file to come into effect.
    134+
    > **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 [setupProxy.js](interface/src/setupProxy.js) for details.
    148135
    149136
    #### Starting the development server
    150137

    151-
    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:
    138+
    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:
    152139

    153140
    ```bash
    154141
    cd interface

    ‎interface/.env

    Lines changed: 3 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,3 +1,6 @@
    1+
    # This enables lint extensions
    2+
    EXTEND_ESLINT=true
    3+
    14
    # This is the name of your project. It appears on the sign-in page and in the menu bar.
    25
    REACT_APP_PROJECT_NAME=ESP8266 React
    36

    ‎interface/.env.development

    Lines changed: 0 additions & 4 deletions
    This file was deleted.

    ‎interface/.env.production

    Lines changed: 1 addition & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1 +1,2 @@
    1+
    # Disable the generation of the sourcemap on the production build to reduce the artefact size
    12
    GENERATE_SOURCEMAP=false

    ‎interface/config-overrides.js

    Lines changed: 4 additions & 7 deletions
    Original file line numberDiff line numberDiff line change
    @@ -4,18 +4,15 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    44
    const CompressionPlugin = require('compression-webpack-plugin');
    55
    const ProgmemGenerator = require('./progmem-generator.js');
    66

    7-
    const path = require('path');
    8-
    const fs = require('fs');
    9-
    107
    module.exports = function override(config, env) {
    118
    if (env === "production") {
    129
    // rename the ouput file, we need it's path to be short, for embedded FS
    1310
    config.output.filename = 'js/[id].[chunkhash:4].js';
    1411
    config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
    1512

    1613
    // take out the manifest and service worker plugins
    17-
    config.plugins = config.plugins.filter(plugin => !(plugin instanceof ManifestPlugin));
    18-
    config.plugins = config.plugins.filter(plugin => !(plugin instanceof WorkboxWebpackPlugin.GenerateSW));
    14+
    config.plugins = config.plugins.filter((plugin) => !(plugin instanceof ManifestPlugin));
    15+
    config.plugins = config.plugins.filter((plugin) => !(plugin instanceof WorkboxWebpackPlugin.GenerateSW));
    1916

    2017
    // shorten css filenames
    2118
    const miniCssExtractPlugin = config.plugins.find((plugin) => plugin instanceof MiniCssExtractPlugin);
    @@ -27,11 +24,11 @@ module.exports = function override(config, env) {
    2724

    2825
    // add compression plugin, compress javascript
    2926
    config.plugins.push(new CompressionPlugin({
    30-
    filename: "[path].gz[query]",
    27+
    filename: "[file].gz",
    3128
    algorithm: "gzip",
    3229
    test: /\.(js)$/,
    3330
    deleteOriginalAssets: true
    3431
    }));
    3532
    }
    3633
    return config;
    37-
    }
    34+
    };

    0 commit comments

    Comments
     (0)
    0