catalyst-core-internal 0.0.1-beta.1 → 0.0.1-beta.10

package/scripts/devBuild.js

@@ -0,0 +1,42 @@
+"use strict";
+
+const {
+  spawnSync
+} = require("child_process");
+const path = require("path");
+const {
+  name
+} = require(`${process.env.PWD}/package.json`);
+const {
+  BUILD_OUTPUT_PATH
+} = require(`${process.env.PWD}/config/config.json`);
+function arrayToObject(array) {
+  const obj = {};
+  array.forEach(item => {
+    const [key, value] = item.split("=");
+    if (value) obj[key] = value;
+  });
+  return obj;
+}
+
+/**
+ * @description - creates a production build of the application.
+ */
+function start() {
+  const commandLineArguments = process.argv.slice(2);
+  const argumentsObject = arrayToObject(commandLineArguments);
+  const dirname = path.resolve(__dirname, "../");
+  spawnSync("npm", ["run", "build", `--src_path=${process.env.PWD}`, `--app_name=${name || "catalyst_app"}`], {
+    cwd: dirname,
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      src_path: process.env.PWD,
+      build_output_path: BUILD_OUTPUT_PATH,
+      NODE_ENV: "production",
+      IS_DEV_COMMAND: true,
+      ...argumentsObject
+    }
+  });
+}
+start();

package/scripts/devServe.js

@@ -0,0 +1,43 @@
+"use strict";
+
+const {
+  spawnSync
+} = require("child_process");
+const path = require("path");
+const {
+  name
+} = require(`${process.env.PWD}/package.json`);
+const {
+  BUILD_OUTPUT_PATH
+} = require(`${process.env.PWD}/config/config.json`);
+function arrayToObject(array) {
+  const obj = {};
+  array.forEach(item => {
+    const [key, value] = item.split("=");
+    if (value) obj[key] = value;
+  });
+  return obj;
+}
+
+/**
+ * @description -  Serves production build of the application.
+ */
+
+function start() {
+  const commandLineArguments = process.argv.slice(2);
+  const argumentsObject = arrayToObject(commandLineArguments);
+  const dirname = path.resolve(__dirname, "../");
+  spawnSync("npm", ["run", "serve", `--src_path=${process.env.PWD}`, `--app_name=${name || "catalyst_app"}`], {
+    cwd: dirname,
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      src_path: process.env.PWD,
+      build_output_path: BUILD_OUTPUT_PATH,
+      NODE_ENV: "production",
+      IS_DEV_COMMAND: true,
+      ...argumentsObject
+    }
+  });
+}
+start();

package/scripts/loadScriptsBeforeServerStarts.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _cssModulesRequireHook = _interopRequireDefault(require("css-modules-require-hook"));
+var _cssModulesRequireHook = _interopRequireDefault(require("@dr.pogodin/css-modules-require-hook"));
 var _path = _interopRequireDefault(require("path"));
 var _moduleAlias = _interopRequireDefault(require("module-alias"));
 var _loadEnvironmentVariables = _interopRequireDefault(require("./loadEnvironmentVariables"));

package/scripts/serve.js

@@ -1,10 +1,5 @@
 "use strict";
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const {
   spawnSync
 } = require("child_process");
@@ -12,19 +7,37 @@ const path = require("path");
 const {
   name
 } = require(`${process.env.PWD}/package.json`);
+const {
+  BUILD_OUTPUT_PATH
+} = require(`${process.env.PWD}/config/config.json`);
+function arrayToObject(array) {
+  const obj = {};
+  array.forEach(item => {
+    const [key, value] = item.split("=");
+    if (value) obj[key] = value;
+  });
+  return obj;
+}
 
 /**
  * @description -  Serves production build of the application.
  */
 
 function start() {
+  const commandLineArguments = process.argv.slice(2);
+  const argumentsObject = arrayToObject(commandLineArguments);
   const dirname = path.resolve(__dirname, "../");
   spawnSync("npm", ["run", "serve", `--src_path=${process.env.PWD}`, `--app_name=${name || "catalyst_app"}`], {
     cwd: dirname,
     stdio: "inherit",
-    env: _objectSpread(_objectSpread({}, process.env), {}, {
-      src_path: process.env.PWD
-    })
+    env: {
+      ...process.env,
+      src_path: process.env.PWD,
+      build_output_path: BUILD_OUTPUT_PATH,
+      NODE_ENV: "production",
+      IS_DEV_COMMAND: false,
+      ...argumentsObject
+    }
   });
 }
 start();

package/scripts/start.js

@@ -1,26 +1,35 @@
 "use strict";
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const {
   spawnSync
 } = require("child_process");
 const path = require("path");
+function arrayToObject(array) {
+  const obj = {};
+  array.forEach(item => {
+    const [key, value] = item.split("=");
+    if (value) obj[key] = value;
+  });
+  return obj;
+}
 
 /**
  * @description - starts webpack dev server and node server.
  */
 function start() {
+  const commandLineArguments = process.argv.slice(2);
+  const argumentsObject = arrayToObject(commandLineArguments);
   const dirname = path.resolve(__dirname, "../");
   spawnSync("npm", ["run", "start", `--src_path=${process.env.PWD}`], {
     cwd: dirname,
     stdio: "inherit",
-    env: _objectSpread(_objectSpread({}, process.env), {}, {
-      src_path: process.env.PWD
-    })
+    env: {
+      ...process.env,
+      src_path: process.env.PWD,
+      NODE_ENV: "development",
+      IS_DEV_COMMAND: false,
+      ...argumentsObject
+    }
   });
 }
 start();

package/scripts/validator.js

@@ -44,8 +44,6 @@ const validateConfigFile = obj => {
         BUILD_OUTPUT_PATH: "",
         PUBLIC_STATIC_ASSET_PATH: "",
         PUBLIC_STATIC_ASSET_URL: "",
-        NODE_ENV: "",
-        BUILD_ENV: "",
         CLIENT_ENV_VARIABLES: [],
         ANALYZE_BUNDLE: ""
       };
@@ -78,8 +76,7 @@ const validateModuleAlias = obj => {
         "@server": "server",
         "@config": "config",
         "@css": "src/static/css",
-        "@routes": "src/js/routes/",
-        "@store": "src/js/store/index.js"
+        "@routes": "src/js/routes/"
       };
       for (let key in requiredModuleAliases) {
         if (!(key in obj)) throw new Error(`${key} module alias not defined inside package.json`);

package/server/renderer/document/Head.js

@@ -19,7 +19,7 @@ function Head(props) {
   const {
     pageCss,
     pageJS,
-    metaTagFunction,
+    metaTags,
     isBot,
     publicAssetPath,
     fetcherData
@@ -35,7 +35,7 @@ function Head(props) {
   }), publicAssetPath && /*#__PURE__*/_react.default.createElement("link", {
     rel: "dns-prefetch",
     href: publicAssetPath
-  }), metaTagFunction && metaTagFunction(fetcherData), !isBot && pageJS, !isBot && /*#__PURE__*/_react.default.createElement("style", {
+  }), metaTags && metaTags, !isBot && pageJS, !isBot && /*#__PURE__*/_react.default.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: pageCss
     }

package/server/renderer/handler.js

@@ -20,24 +20,27 @@ var _server2 = require("@loadable/server");
 var _server3 = require("react-dom/server");
 var _validator = require("../utils/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const {
   getRoutes
 } = require(`${process.env.src_path}/src/js/routes/utils.js`);
 const {
   default: CustomDocument
 } = require(`${process.env.src_path}/server/document.js`);
-const storePath = `${process.env.src_path}/src/js/store/index.js`;
+const storePath = _path.default.resolve(`${process.env.src_path}/src/js/store/index.js`);
 let createStore;
 if (_fs.default.existsSync(storePath)) {
-  const {
-    default: configureStore
-  } = require(storePath);
-  createStore = configureStore;
+  try {
+    const {
+      default: configureStore
+    } = require(`${process.env.src_path}/src/js/store/index.js`);
+    createStore = configureStore;
+  } catch (error) {
+    createStore = () => {
+      return {
+        getState: () => {}
+      };
+    };
+  }
 } else {
   createStore = () => {
     return {
@@ -89,9 +92,7 @@ const getMatchRoutes = (routes, req, res, store, context, fetcherData) => {
       matches.push({
         route,
         match,
-        serverSideFunction: wc && wc.serverSideFunction || (() => Promise.resolve()),
-        metaTagFunction: wc && wc.metaTagFunction || null,
-        serverFetcher: wc && wc.serverFetcher || (() => Promise.resolve())
+        serverSideFunction: wc && wc.serverSideFunction || (() => Promise.resolve())
       });
     }
     if (!match && route.routes) {
@@ -119,24 +120,25 @@ const getComponent = (store, context, req, fetcherData) => {
     intialData: fetcherData
   }))));
 };
-
 // sends document after rendering
-const renderMarkUp = async (errorCode, req, res, metaTagFunction, fetcherData, store, matches, context) => {
+const renderMarkUp = async (errorCode, req, res, metaTags, fetcherData, store, matches, context) => {
   const deviceDetails = (0, _userAgentUtil.getUserAgentDetails)(req.headers["user-agent"] || "");
   const isBot = deviceDetails.googleBot ? true : false;
 
   // Transforms Head Props
-  const shellStart = await _render.default.renderStart(res.locals.pageCss, res.locals.pageJS, metaTagFunction, isBot, fetcherData);
+  const shellStart = await _render.default.renderStart(res.locals.pageCss, res.locals.pageJS, metaTags, isBot, fetcherData);
   let state = store.getState();
   const jsx = webExtractor.collectChunks(getComponent(store, context, req, fetcherData));
 
   // Transforms Body Props
   const shellEnd = _render.default.renderEnd(webExtractor, state, res, jsx, errorCode, fetcherData);
-  const finalProps = _objectSpread(_objectSpread(_objectSpread({}, shellStart), shellEnd), {}, {
+  const finalProps = {
+    ...shellStart,
+    ...shellEnd,
     jsx: jsx,
     req,
     res
-  });
+  };
   let CompleteDocument = () => {
     if ((0, _validator.validateCustomDocument)(CustomDocument)) {
       return CustomDocument(finalProps);
@@ -148,7 +150,7 @@ const renderMarkUp = async (errorCode, req, res, metaTagFunction, fetcherData, s
         pageJS: finalProps.pageJS,
         pageCss: finalProps.pageCss,
         fetcherData: finalProps.fetcherData,
-        metaTagFunction: finalProps.metaTagFunction,
+        metaTags: finalProps.metaTags,
         publicAssetPath: finalProps.publicAssetPath
       }), /*#__PURE__*/_react.default.createElement(_document.Body, {
         initialState: finalProps.initialState,
@@ -194,7 +196,6 @@ async function _default(req, res) {
   try {
     let context = {};
     let fetcherData = {};
-    let metaTagFunction = null;
 
     // creates store
     const store = (0, _validator.validateConfigureStore)(createStore) ? createStore({}, req) : null;
@@ -204,39 +205,34 @@ async function _default(req, res) {
 
     // Matches req url with routes
     const matches = getMatchRoutes(routes, req, res, store, context, fetcherData);
+    const allMatches = (0, _router.matchRoutes)(getRoutes(), req.baseUrl);
+    let allTags = [];
 
     // Executing app server side function
     _App.default.serverSideFunction({
       store,
-      req
-    }).then(() => {
-      const serverSideFunction = matches.map(match => {
-        if (match?.metaTagFunction) {
-          metaTagFunction = match.metaTagFunction;
-        }
-        return match.serverSideFunction({
-          store
-        });
-      });
-
-      // Executing serverFetcher functions with serverDataFetcher provided by router and returning document
-      Promise.all(serverSideFunction).then(() => {
-        (0, _router.serverDataFetcher)({
-          routes: routes,
-          req,
-          url: req.originalUrl
-        }, {
-          store
-        }).then(res => {
-          fetcherData = res;
-        }).then(async () => await renderMarkUp(null, req, res, metaTagFunction, fetcherData, store, matches, context)).catch(async error => {
-          logger.error("Error in executting serverFetcher functions: " + error);
-          await renderMarkUp(404, req, res, metaTagFunction, fetcherData, store, matches, context);
-        });
+      req,
+      res
+    })
+    // Executing serverFetcher functions with serverDataFetcher provided by router and returning document
+    .then(() => {
+      (0, _router.serverDataFetcher)({
+        routes: routes,
+        req,
+        res,
+        url: req.originalUrl
+      }, {
+        store
+      }).then(res => {
+        fetcherData = res;
+        allTags = (0, _router.getMetaData)(allMatches, fetcherData);
+      }).then(async () => await renderMarkUp(null, req, res, allTags, fetcherData, store, matches, context)).catch(async error => {
+        logger.error("Error in executing serverFetcher functions: " + error);
+        await renderMarkUp(404, req, res, allTags, fetcherData, store, matches, context);
       });
     }).catch(error => {
       logger.error("Error in executing serverSideFunction inside App: " + error);
-      renderMarkUp(error.status_code, req, res, metaTagFunction, fetcherData, store, matches, context);
+      renderMarkUp(error.status_code, req, res, allTags, fetcherData, store, matches, context);
     });
   } catch (error) {
     logger.error("Error in handling document request: " + error.toString());

package/server/renderer/render.js

@@ -13,13 +13,24 @@ var _extract = require("./extract");
  * @param {boolean} isBot - checks if request is made by bot
  * @param {object} fetcherData - router fetched data
  */
-const renderStart = (pageCss, pageJS, metaTagFunction, isBot, fetcherData) => {
+const renderStart = (pageCss, pageJS, metaTags, isBot, fetcherData) => {
+  const {
+    IS_DEV_COMMAND,
+    WEBPACK_DEV_SERVER_HOSTNAME,
+    WEBPACK_DEV_SERVER_PORT
+  } = process.env;
+  let publicAssetPath = `${process.env.PUBLIC_STATIC_ASSET_URL}${process.env.PUBLIC_STATIC_ASSET_PATH}`;
+
+  // serves assets from localhost on running devBuild and devServe command
+  if (JSON.parse(IS_DEV_COMMAND)) {
+    publicAssetPath = `http://${WEBPACK_DEV_SERVER_HOSTNAME}:${WEBPACK_DEV_SERVER_PORT}/assets/`;
+  }
   return {
     pageCss,
     pageJS,
-    metaTagFunction,
+    metaTags,
     isBot,
-    publicAssetPath: `${process.env.PUBLIC_STATIC_ASSET_URL}${process.env.PUBLIC_STATIC_ASSET_PATH}`,
+    publicAssetPath,
     fetcherData
   };
 };

package/server/startServer.js

@@ -5,6 +5,7 @@ var _chokidar = _interopRequireDefault(require("chokidar"));
 var _path = _interopRequireDefault(require("path"));
 var _index = require("@server/index.js");
 var _validator = require("./utils/validator.js");
+var _picocolors = _interopRequireDefault(require("picocolors"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const env = process.env.NODE_ENV || "development";
 
@@ -58,7 +59,7 @@ watcher.on("all", (event, path) => {
       if (error) {
         console.log("An error occured while starting the Application server : ", error);
       } else {
-        console.log(`Application server is mounted on http://${host}:${port}.`);
+        console.log(_picocolors.default.cyan(_picocolors.default.bold(`Application server is mounted on ${_picocolors.default.yellow(`http://${host}:${port}`)}.`)));
       }
     });
   }

package/server/utils/metaTags.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeMetaTags = void 0;
+const mergeMetaTags = (parentTags, childTags) => {};
+exports.mergeMetaTags = mergeMetaTags;
+const typesOfMeta = {};
+
+// type
+// props
+// children

package/server/utils/userAgentUtil.js

@@ -6,11 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.getUserAgentDetails = void 0;
 var _uaParserJs = _interopRequireDefault(require("ua-parser-js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const googleBots = {
   "APIs-Google": "APIs-Google",
   AdSense: "Mediapartners-Google",
@@ -48,8 +43,9 @@ const getGoogleBot = ua => {
 const getUserAgentDetails = ua => {
   const agentDetails = (0, _uaParserJs.default)(ua);
   const googleBot = getGoogleBot(ua);
-  return _objectSpread(_objectSpread({}, agentDetails), {}, {
+  return {
+    ...agentDetails,
     googleBot
-  });
+  };
 };
 exports.getUserAgentDetails = getUserAgentDetails;

package/server/utils/validator.js

@@ -44,8 +44,6 @@ const validateConfigFile = obj => {
         BUILD_OUTPUT_PATH: "",
         PUBLIC_STATIC_ASSET_PATH: "",
         PUBLIC_STATIC_ASSET_URL: "",
-        NODE_ENV: "",
-        BUILD_ENV: "",
         CLIENT_ENV_VARIABLES: [],
         ANALYZE_BUNDLE: ""
       };
@@ -78,8 +76,7 @@ const validateModuleAlias = obj => {
         "@server": "server",
         "@config": "config",
         "@css": "src/static/css",
-        "@routes": "src/js/routes/",
-        "@store": "src/js/store/index.js"
+        "@routes": "src/js/routes/"
       };
       for (let key in requiredModuleAliases) {
         if (!(key in obj)) throw new Error(`${key} module alias not defined inside package.json`);

package/webpack/babel.config.client.js

@@ -11,7 +11,7 @@ var _default = exports.default = {
       browsers: "last 2 versions"
     }
   }], "@babel/preset-react"],
-  plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-react-jsx", "transform-class-properties", "transform-export-extensions", "syntax-dynamic-import", "@loadable/babel-plugin"],
+  plugins: ["@loadable/babel-plugin"],
   env: {
     production: {
       plugins: [require("./babel-plugins/remove-ssr.plugin").default, "transform-react-remove-prop-types"]

package/webpack/babel.config.ssr.js

@@ -11,7 +11,7 @@ var _default = exports.default = {
       node: "current"
     }
   }], "@babel/preset-react"],
-  plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-react-jsx", "transform-class-properties", "transform-export-extensions", "syntax-dynamic-import", "@loadable/babel-plugin"],
+  plugins: ["@loadable/babel-plugin"],
   env: {
     development: {
       plugins: ["react-refresh/babel"]

package/webpack/base.babel.js

@@ -46,10 +46,20 @@ ANALYZE_BUNDLE && new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
   contextRegExp: /moment$/
 })];
 const {
+  IS_DEV_COMMAND,
   PUBLIC_STATIC_ASSET_URL,
-  PUBLIC_STATIC_ASSET_PATH
+  PUBLIC_STATIC_ASSET_PATH,
+  WEBPACK_DEV_SERVER_HOSTNAME,
+  WEBPACK_DEV_SERVER_PORT,
+  NODE_SERVER_HOSTNAME,
+  NODE_SERVER_PORT
 } = process.env;
-let publicPath = `${PUBLIC_STATIC_ASSET_URL}${PUBLIC_STATIC_ASSET_PATH}`;
+let publicPath = isDev ? `http://${WEBPACK_DEV_SERVER_HOSTNAME}:${WEBPACK_DEV_SERVER_PORT}/` : `${PUBLIC_STATIC_ASSET_URL}${PUBLIC_STATIC_ASSET_PATH}`;
+
+// serves assets from local on running devBuild and devServe command
+if (JSON.parse(IS_DEV_COMMAND) && !isDev) {
+  publicPath = `http://${NODE_SERVER_HOSTNAME}:${NODE_SERVER_PORT}/assets/`;
+}
 var _default = exports.default = {
   context: _path.default.resolve(process.env.src_path),
   mode: isDev ? "development" : "production",

package/webpack/development.client.babel.js

@@ -12,7 +12,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const {
   WEBPACK_DEV_SERVER_PORT,
-  WEBPACK_DEV_SERVER_HOSTNAME
+  WEBPACK_DEV_SERVER_HOSTNAME,
+  NODE_SERVER_PORT,
+  NODE_SERVER_HOSTNAME
 } = process.env;
 const catalystConfig = require(_path.default.resolve(__dirname, "..", "config.json"));
 const plugins = require(_path.default.join(process.env.src_path, "webpackConfig.js"));
@@ -57,13 +59,14 @@ const webpackConfig = (0, _webpackMerge.default)(_baseBabel.default, {
 });
 console.info("Firing up catalyst dev server...\n");
 let devServer = new _webpackDevServer.default({
-  port: process.env.WEBPACK_DEV_SERVER_PORT,
-  host: process.env.WEBPACK_DEV_SERVER_HOSTNAME,
+  port: WEBPACK_DEV_SERVER_PORT,
+  host: WEBPACK_DEV_SERVER_HOSTNAME,
   static: {
     publicPath: webpackConfig.output.publicPath
   },
   hot: true,
   historyApiFallback: true,
+  open: [`http://${NODE_SERVER_HOSTNAME}:${NODE_SERVER_PORT}`],
   headers: {
     "Access-Control-Allow-Origin": "*"
   },

package/webpack/production.ssr.babel.js

@@ -36,7 +36,7 @@ const ssrConfig = mergeWithCustomize({
       name: false
     }
   },
-  plugins: [...plugins.ssrPrugins],
+  plugins: [...plugins.ssrPlugins],
   target: "node",
   entry: {
     handler: _path.default.resolve(__dirname, "..", "./server/renderer/handler.js")

package/webpack/scssParams.js

@@ -11,9 +11,17 @@ exports.imageUrl = exports.fontUrl = void 0;
 const imageUrl = () => {
   const {
     PUBLIC_STATIC_ASSET_URL,
-    PUBLIC_STATIC_ASSET_PATH
+    PUBLIC_STATIC_ASSET_PATH,
+    IS_DEV_COMMAND,
+    NODE_SERVER_HOSTNAME,
+    NODE_SERVER_PORT
   } = process.env;
   let publicPath = `${PUBLIC_STATIC_ASSET_URL}${PUBLIC_STATIC_ASSET_PATH}`;
+
+  // serves assets from localhost on running devBuild and devServe command
+  if (JSON.parse(IS_DEV_COMMAND)) {
+    publicPath = `http://${NODE_SERVER_HOSTNAME}:${NODE_SERVER_PORT}/${PUBLIC_STATIC_ASSET_PATH}`;
+  }
   const imagePath = JSON.stringify(`${publicPath}images/`);
   return imagePath;
 };
@@ -26,9 +34,17 @@ exports.imageUrl = imageUrl;
 const fontUrl = () => {
   const {
     PUBLIC_STATIC_ASSET_URL,
-    PUBLIC_STATIC_ASSET_PATH
+    PUBLIC_STATIC_ASSET_PATH,
+    IS_DEV_COMMAND,
+    NODE_SERVER_HOSTNAME,
+    NODE_SERVER_PORT
   } = process.env;
   let publicPath = `${PUBLIC_STATIC_ASSET_URL}${PUBLIC_STATIC_ASSET_PATH}`;
+
+  // serves assets from localhost on running devBuild and devServe command
+  if (JSON.parse(IS_DEV_COMMAND)) {
+    publicPath = `http://${NODE_SERVER_HOSTNAME}:${NODE_SERVER_PORT}/${PUBLIC_STATIC_ASSET_PATH}`;
+  }
   const fontPath = JSON.stringify(`${publicPath}fonts/`);
   return fontPath;
 };