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