Local gateway + Hot Reload using WebSocket (#16)

* Local gateway + Hot Reload using WebSocket

* prettier

* gateway fixes + cli improvements

* prettier

* remove CSS linter

* rebale

* fixes

* fix gateway message

* prettier

* fix gateway router

* add authentication & navbar

* build script log

* prettier

* remove markdown linter

* fix

* change tabs width to 2

* remove unused css

* Update VM + remove sanitize

* group gateway home widgets by account

* fix: sanitize url

* prettier

---------

Co-authored-by: Elliot Braem <[email protected]>

.github/workflows/linter.yml

@@ -42,3 +42,5 @@ jobs:
           JAVASCRIPT_ES_CONFIG_FILE: .eslintrc.yml
           VALIDATE_JSCPD: false
           VALIDATE_ALL_CODEBASE: false
+          VALIDATE_CSS: false
+          VALIDATE_MARKDOWN: false

.prettierrc

@@ -0,0 +1 @@
+tabWidth: 2

gateway/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/preset-react"]
+}

gateway/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.wrangler/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#IDE
+.idea
+
+target
+neardev

gateway/config/flags.js

@@ -0,0 +1,5 @@
+export const flags = {
+  bosLoaderUrl: process.env.BOS_LOADER_URL || "http://127.0.0.1:4040",
+  bosLoaderWs: process.env.BOS_LOADER_WS || "ws://127.0.0.1:4040",
+  enableHotReload: process.env.ENABLE_HOT_RELOAD ?? true,
+};

gateway/config/paths.js

@@ -0,0 +1,13 @@
+const path = require("path");
+
+const srcPath = path.resolve(__dirname, "../src");
+const distPath = path.resolve(__dirname, "../dist");
+const publicPath = path.resolve(__dirname, "../public");
+const nodeModulesPath = path.resolve(__dirname, "../node_modules");
+
+module.exports = {
+  srcPath,
+  distPath,
+  publicPath,
+  nodeModulesPath,
+};

gateway/config/presets/loadPreset.js

@@ -0,0 +1,13 @@
+const { merge } = require("webpack-merge");
+
+const loadPresets = (env = { presets: [] }) => {
+  const presets = env.presets || [];
+  /** @type {string[]} */
+  const mergedPresets = [].concat(...[presets]);
+  const mergedConfigs = mergedPresets.map((presetName) =>
+    require(`./webpack.${presetName}.js`)(env),
+  );
+
+  return merge({}, ...mergedConfigs);
+};
+module.exports = loadPresets;

gateway/config/presets/webpack.analyze.js

@@ -0,0 +1,6 @@
+const WebpackBundleAnalyzer =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+
+module.exports = () => ({
+  plugins: [new WebpackBundleAnalyzer()],
+});

gateway/config/webpack.development.js

@@ -0,0 +1,61 @@
+const path = require("path");
+const { HotModuleReplacementPlugin } = require("webpack");
+
+module.exports = () => ({
+  devtool: false,
+  module: {
+    rules: [
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          {
+            // inject CSS to page
+            loader: "style-loader",
+          },
+          {
+            // translates CSS into CommonJS modules
+            loader: "css-loader",
+          },
+          {
+            // Run postcss actions
+            loader: "postcss-loader",
+            options: {
+              // `postcssOptions` is needed for postcss 8.x;
+              // if you use postcss 7.x skip the key
+              postcssOptions: {
+                // postcss plugins, can be exported to postcss.config.js
+                plugins: function () {
+                  return [require("autoprefixer")];
+                },
+              },
+            },
+          },
+          {
+            // compiles Sass to CSS
+            loader: "sass-loader",
+            options: {
+              // Prefer `dart-sass`
+              implementation: require("sass"),
+              sassOptions: {
+                quietDeps: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  devServer: {
+    open: true,
+    static: path.resolve(__dirname, "../dist"),
+    port: 3000,
+    compress: true,
+    historyApiFallback: {
+      disableDotRule: true,
+    },
+    client: {
+      overlay: false,
+    },
+  },
+  plugins: [new HotModuleReplacementPlugin()],
+});

gateway/config/webpack.production.js

@@ -0,0 +1,81 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const path = require("path");
+
+module.exports = () => {
+  return {
+    output: {
+      path: path.resolve(__dirname, "../dist"),
+      publicPath: "/",
+      filename: "[name].[contenthash].bundle.js",
+    },
+    devtool: false,
+    module: {
+      rules: [
+        // {
+        //   test: /\.(css)$/,
+        //   use: [MiniCssExtractPlugin.loader, "css-loader"],
+        //   //   options: {
+        //   //     sourceMap: false,
+        //   //   },
+        // },
+        {
+          test: /\.(scss|css)$/,
+          use: [
+            {
+              // inject CSS to page
+              loader: "style-loader",
+            },
+            {
+              // translates CSS into CommonJS modules
+              loader: "css-loader",
+            },
+            {
+              // Run postcss actions
+              loader: "postcss-loader",
+              options: {
+                // `postcssOptions` is needed for postcss 8.x;
+                // if you use postcss 7.x skip the key
+                postcssOptions: {
+                  // postcss plugins, can be exported to postcss.config.js
+                  plugins: function () {
+                    return [require("autoprefixer")];
+                  },
+                },
+              },
+            },
+            {
+              // compiles Sass to CSS
+              loader: "sass-loader",
+              options: {
+                // Prefer `dart-sass`
+                implementation: require("sass"),
+                sassOptions: {
+                  quietDeps: true,
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: "styles/[name].[contenthash].css",
+        chunkFilename: "[id].css",
+      }),
+    ],
+    optimization: {
+      minimize: true,
+      minimizer: [new CssMinimizerPlugin(), "..."],
+      runtimeChunk: {
+        name: "runtime",
+      },
+    },
+    performance: {
+      hints: false,
+      maxEntrypointSize: 512000,
+      maxAssetSize: 512000,
+    },
+  };
+};