feat: webpack build improvement 2x and unused scripts files are removed and refactored

package.json

@@ -6,12 +6,15 @@
   "main": "packages/firecamp-desktop-app/dist/services/Main",
   "homepage": "./dev",
   "scripts": {
-    "build:workspace": "pnpm --filter=@firecamp/scripts --filter=@firecamp/rest-executor --filter=@firecamp/ws-executor --filter=@firecamp/socket.io-executor build",
     "boot": "pnpm install --shamefully-hoist",
     "bootstrap": "pnpm install --shamefully-hoist",
-    "start": "npx webpack serve --config ./webpack.dev.js",
+    "dev": "run-p build:workspace  webpack:dev",
-    "dev": "APP_VERSION=$npm_package_version AppFormat=webapp && node scripts/build && pnpm build:workspace && pnpm start",
+    "build": "run-p validate:release build:workspace webpack:prod",
-    "release:web": "AppFormat=webapp && pnpm build:workspace && node scripts/release",
+    "build:workspace": "pnpm --filter=@firecamp/scripts --filter=@firecamp/rest-executor --filter=@firecamp/ws-executor --filter=@firecamp/socket.io-executor build",
+    "webpack:dev": "webpack serve --config ./webpack.dev.js",
+    "webpack:prod": "webpack --config ./webpack.prod.js",
+    "validate:release": "node scripts/release",
+    "release:web": "pnpm build",
     "lint": "eslint packages/firecamp-rest/src/**/*.{ts|tsx} packages/*.js packages-clients/*.js scripts webpack/*.js",
     "test": "jest",
     "prettify": "prettier --write \"platform/firecamp-platform/src/**/*.(ts|tsx)\" \"packages/firecamp-rest/src/**/*.(ts|tsx)\" \"packages/firecamp-graphql/src/**/*.(ts|tsx)\"",
@@ -76,6 +79,7 @@
     "jest-css-modules-transform": "^4.4.2",
     "lint-staged": "^13.1.2",
     "node-polyfill-webpack-plugin": "^2.0.0",
+    "npm-run-all": "^4.1.5",
     "postcss-loader": "^7.0.2",
     "prettier": "^2.6.2",
     "react-addons-test-utils": "^15.0.2",

playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx

@@ -115,8 +115,6 @@ const BodyTab: FC<any> = () => {
         return <BinaryBody body={body || {}} onChange={changeBodyValue} />;
       case ERestBodyTypes.GraphQL:
         return <GraphQLBody body={body || {}} onChange={changeBodyValue} />;
-      case ERestBodyTypes.None:
-        return <NoBodyTab selectBodyType={_selectBodyType} />;
       default:
         return <></>;
     }

pnpm-lock.yaml

@@ -135,6 +135,9 @@ importers:
       node-polyfill-webpack-plugin:
         specifier: ^2.0.0
         version: 2.0.1(webpack@5.75.0)
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
       postcss-loader:
         specifier: ^7.0.2
         version: 7.0.2(postcss@8.4.21)(webpack@5.75.0)
@@ -10238,7 +10241,7 @@ packages:
       - supports-color
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
   /concat-stream@1.4.11:
     resolution: {integrity: sha512-X3JMh8+4je3U1cQpG87+f9lXHDrqcb2MVLg9L7o8b1UZ0DzhRrUpdn65ttzu10PpJPPI3MQNkis+oha6TSA9Mw==}

scripts/build.js

@@ -1,47 +0,0 @@
-/* eslint-disable no-console */
-require('dotenv').config();
-const fs = require('fs');
-const path = require('path');
-require('shelljs/global');
-const { Environment } = require('./constants');
-
-const env = process.env.NODE_ENV;
-const isProdOrStage =
-  env === Environment.Production || env === Environment.Staging;
-const build = isProdOrStage ? require('../webpack.prod') : () => {};
-
-module.exports = async () => {
-  try {
-    // hold the build path as per the environment mode
-    const buildPath = path.join(`${__dirname}/../build/${env}`);
-    // copy project assets and generate config.
-    const directoryPaths = [path.join(`${__dirname}/../build`), buildPath];
-
-    // Remove build before start bundle
-    rm('-rf', buildPath);
-
-    // Create build directories
-    directoryPaths.forEach((directoryPath) => {
-      if (!fs.existsSync(directoryPath)) mkdir(directoryPath);
-    });
-
-    // Copy react app assets
-    cp(
-      '-R',
-      path.join(`${__dirname}/../platform/firecamp-platform/public/assets/*`),
-      buildPath
-    );
-
-    // generate package.json and manifest based on app environment
-    // exec(`node ${buildPath}/build-scripts/init-package.js`);
-
-    if (env === Environment.Production || env === Environment.Staging) {
-      await build();
-    }
-    return Promise.resolve();
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};
-
-if (env === Environment.Development) module.exports();

scripts/release.js

@@ -1,21 +1,12 @@
 /* eslint-disable no-console */
 require('dotenv-vault-core').config();
 const { red, yellow } = require('colors');
-const semver = require('semver');
+// const semver = require('semver');
 require('shelljs/global');
-const build = require('./build');
 const { version } = require('../package.json');
-const { Environment, AppFormat } = require('./constants');
+const { Environment } = require('./constants');
 
 const env = process.env.NODE_ENV;
-const helper = {
-  buildWebApp: async () => {
-    process.env.NODE_OPTIONS = '--max-old-space-size=4096';
-    await build();
-  },
-};
-
-// set app version in the environment
 process.env.APP_VERSION = version;
 
 // check FIRECAMP_API_HOST env. variable value does not contains invalid value
@@ -33,18 +24,5 @@ if (
       process.env.FIRECAMP_API_HOST
     )})`
   );
-  process.exit();
+  process.exit(1);
-}
-
-// pre conditions can be validated here
-const preBuildCliCommands = async () => Promise.resolve();
-
-if ([Environment.Production, Environment.Staging].includes(env)) {
-  try {
-    preBuildCliCommands().then(async () => {
-      await helper.buildWebApp();
-    });
-  } catch (error) {
-    console.error(error);
-  }
 }

webpack.common.js

@@ -8,10 +8,10 @@ const path = require('path');
 // const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const metadata = require('./package.json');
 
-const env = process.env.NODE_ENV;
+const NodeEnv = process.env.NODE_ENV;
-
 console.log(process.env.FIRECAMP_API_HOST, 'FIRECAMP_API_HOST'); // for debugging purposes. remove when ready.
 
 const plugins = [
@@ -84,6 +84,14 @@ const plugins = [
       ),
     },
   }),
+  new CopyPlugin({
+    patterns: [
+      {
+        from: `${__dirname}/platform/firecamp-platform/public/assets`,
+        to: `${__dirname}/build/${NodeEnv}`,
+      },
+    ],
+  }),
 ];
 
 const rules = [
@@ -177,6 +185,7 @@ module.exports = {
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
+          // eslint-disable-next-line no-unused-vars
           name(module) {
             return 'vender';
 

webpack.dev.js

@@ -6,6 +6,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const base = require('./webpack.common');
 
 // const withReport = process.env.npm_config_withReport;
+const nodeEnv = process.env.NODE_ENV;
 
 module.exports = merge(base, {
   mode: 'development',
@@ -15,7 +16,7 @@ module.exports = merge(base, {
     globalObject: 'this',
     filename: '[name].dev.js',
     chunkFilename: '[name].dev.js',
-    path: `${__dirname}/build/${env}`,
+    path: `${__dirname}/build/${nodeEnv}`,
     publicPath: '',
   },
   optimization: {

webpack.prod.js

@@ -7,7 +7,7 @@ const base = require('./webpack.common');
 
 const nodeEnv = process.env.NODE_ENV;
 
-const config = merge(base, {
+module.exports = merge(base, {
   mode: 'production',
   output: {
     clean: true,
@@ -35,28 +35,3 @@ const config = merge(base, {
     // new CompressionPlugin(),
   ],
 });
-
-module.exports = () =>
-  new Promise((resolve, reject) => {
-    // eslint-disable-next-line no-console
-    console.log('[Webpack Build]');
-    // eslint-disable-next-line no-console
-    console.log('-'.repeat(80));
-
-    const compiler = webpack(config);
-
-    compiler.run((err, stats) => {
-      if (err) {
-        console.error(err.stack || err);
-        if (err.details) console.error(err.details);
-        reject(err.stack || err.details || err);
-      }
-      const info = stats.toJson();
-      if (stats.hasErrors()) {
-        console.error(info.errors);
-        reject(info.errors);
-      }
-      if (stats.hasWarnings()) console.warn(info.warnings);
-      resolve();
-    });
-  });