Local gateway + Hot Reload using WebSocket

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 ?? false
+}

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,58 @@
+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,
+    },
+  },
+  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,
+    },
+  };
+};

gateway/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "bos-workspace-gateway",
+  "version": "0.0.0",
+  "dependencies": {
+    "@braintree/sanitize-url": "^6.0.2",
+    "big.js": "^6.1.1",
+    "bn.js": "^5.1.1",
+    "bootstrap": "^5.3.1",
+    "bootstrap-icons": "^1.9.0",
+    "collections": "^5.1.12",
+    "error-polyfill": "^0.1.2",
+    "local-storage": "^2.0.0",
+    "near-api-js": "^2.1.3",
+    "near-social-vm": "git+https://github.com/NearSocial/VM.git#2.5.2",
+    "near-social-vm-types": "^1.0.0",
+    "prettier": "^2.7.1",
+    "qrcode.react": "^3.1.0",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.5.0",
+    "react-bootstrap-typeahead": "^6.1.2",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^5.2.0",
+    "socket.io-client": "^4.7.2",
+    "styled-components": "^5.3.6"
+  },
+  "scripts": {
+    "serve": "webpack serve",
+    "webpack": "webpack",
+    "dev": "yarn run serve -- --env mode=development",
+    "prod": "yarn run webpack -- --env mode=production",
+    "prod:analyze": "yarn run prod -- --env presets=analyze",
+    "build": "yarn run prod",
+    "start": "yarn run dev --allowed-hosts=all",
+    "serve:prod": "http-server dist"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.15.4",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-react": "^7.14.5",
+    "assert": "^2.0.0",
+    "babel-loader": "^8.2.2",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "^7.0.3",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "html-webpack-plugin": "^5.3.2",
+    "http-server": "^14.1.1",
+    "https-browserify": "^1.0.0",
+    "mini-css-extract-plugin": "^2.2.2",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "postcss-loader": "^7.0.1",
+    "process": "^0.11.10",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.1.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "style-loader": "^3.2.1",
+    "url": "^0.11.0",
+    "webpack": "^5.52.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.1.0",
+    "webpack-manifest-plugin": "^5.0.0",
+    "webpack-merge": "^5.8.0"
+  }
+}

gateway/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>bos-workspace gateway</title>
+  </head>
+  <body>
+    <noscript style="white-space: pre; font-family: monospace">
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>