Chore: Update environment variables and improve build configurations

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

.env.development

@@ -1 +1 @@
-GATSBY_GRAPHQL_IDE=playground
+# GATSBY_GRAPHQL_IDE=playground

gatsby-config.js

@@ -1,12 +1,19 @@
 /* eslint-env node */
 
+const isDevelopment = process.env.NODE_ENV === "development";
 const isProduction = process.env.NODE_ENV === "production";
 const isFullSiteBuild = process.env.BUILD_FULL_SITE === "true";
 const HEAVY_COLLECTIONS = ["members", "integrations"];
 const collectionIgnoreGlobs = isFullSiteBuild
   ? []
   : HEAVY_COLLECTIONS.map((name) => `**/${name}/**`);
-// const isDevelopment = process.env.NODE_ENV === "development";
+const devFlags = isDevelopment
+  ? {
+    PARALLEL_SOURCING: true,
+    PRESERVE_FILE_DOWNLOAD_CACHE: true,
+    PRESERVE_WEBPACK_CACHE: true,
+  }
+  : {};
 
 module.exports = {
   siteMetadata: {
@@ -21,8 +28,8 @@ module.exports = {
   },
   flags: {
     FAST_DEV: true,
-    PARALLEL_SOURCING: false, // Disable parallel sourcing to reduce memory pressure
     DEV_SSR: false,
+    ...devFlags,
   },
   trailingSlash: "never",
   plugins: [
@@ -518,4 +525,4 @@ module.exports = {
     "gatsby-plugin-meta-redirect",
     // make sure this is always the last one
   ],
-};
+};

gatsby-node.js

@@ -11,6 +11,8 @@ const slugify = require("./src/utils/slugify");
 const { paginate } = require("gatsby-awesome-pagination");
 const { createFilePath } = require("gatsby-source-filesystem");
 const config = require("./gatsby-config");
+const isDevelopment = process.env.NODE_ENV === "development";
+const isProduction = process.env.NODE_ENV === "production";
 const {
   componentsData,
 } = require("./src/sections/Projects/Sistent/components/content");
@@ -57,8 +59,16 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions;
 
   const envCreatePage = (props) => {
+    const pageConfig = { ...props };
+
+    if (isDevelopment) {
+      pageConfig.defer = true;
+    } else if (isProduction) {
+      pageConfig.mode = "SSR";
+    }
+
     if (process.env.CI === "true") {
-      const { path, matchPath, ...rest } = props;
+      const { path, matchPath, ...rest } = pageConfig;
 
       createRedirect({
         fromPath: `/${path}/`,
@@ -73,7 +83,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         ...rest,
       });
     }
-    return createPage(props);
+    return createPage(pageConfig);
   };
 
   const blogPostTemplate = path.resolve("src/templates/blog-single.js");
@@ -537,7 +547,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   };
 
-  createComponentPages(createPage, components);
+  createComponentPages(envCreatePage, components);
 };
 
 // slug starts and ends with '/' so parts[0] and parts[-1] will be empty

package.json

@@ -10,9 +10,9 @@
     "url": "https://layer5.io"
   },
   "scripts": {
-    "build": "cross-env BUILD_FULL_SITE=true NODE_OPTIONS=--max-old-space-size=16384 gatsby build",
+    "build": "cross-env BUILD_FULL_SITE=true NODE_OPTIONS=--max-old-space-size=8192 gatsby build",
     "clean": "gatsby clean && rimraf node_modules",
-    "develop": "cross-env BUILD_FULL_SITE=true NODE_OPTIONS=--max-old-space-size=16384 env-cmd -f .env.development gatsby develop",
+    "develop": "cross-env BUILD_FULL_SITE=true NODE_OPTIONS=--max-old-space-size=8192 env-cmd -f .env.development gatsby develop",
     "develop:lite": "cross-env BUILD_FULL_SITE=false NODE_OPTIONS=--max-old-space-size=8192 env-cmd -f .env.development gatsby develop",
     "dev": "npm run develop",
     "start": "npm run develop",

src/sections/Learn-Layer5/Chapters/index.js

@@ -70,6 +70,18 @@ const Chapters = ({ chapterData, courseData, location, serviceMeshesList, TOCDat
   const findServiceMeshImage = (images, serviceMesh) => images.find(image => image.name.toLowerCase() == serviceMesh);
   const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 
+  const missingServiceMeshImages = availableServiceMeshesArray
+    .filter(({ section }) => {
+      const meshImage = findServiceMeshImage(serviceMeshImages, section);
+      return !(meshImage && meshImage.imagepath?.childImageSharp?.gatsbyImageData);
+    })
+    .map(({ section }) => section);
+
+  if (missingServiceMeshImages.length > 0) {
+    const context = chapterData?.fields?.slug || "unknown-chapter";
+    throw new Error(`[Chapters] Missing meshesYouLearn image data for: ${missingServiceMeshImages.join(", ")} (chapter: ${context}).`);
+  }
+
   const ServiceMeshesAvailable = ({ serviceMeshes }) => serviceMeshes.map((sm, index) => {
     return (
       <>