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>