[part-19] Created a production build setup

- Netlify CMS is now excluded from production builds - Unused artifacts are now manually removed after production build - Added additional "package.json" scripts for build processes - Removed Internet Explorer support with "browserslist" config - Added "pathPrefix" controls to publish site under a subfolder
xkema · Aug 19, 2022 · 2b54740 · 2b54740
1 parent 577853d
commit 2b54740
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 28 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,6 +1,16 @@
 // gatsby-config.js
 
-module.exports = {
+/**
+ * A flag to control Netlify CMS avbailability on production builds.
+ * (CMS will only be avaiable on local development environment.)
+ */
+let includeNetlifyCms = process.env.NODE_ENV === 'development';
+
+/**
+ * Reference as a variable to modify it on runtime.
+ */
+const gatsbyConfig = {
+  pathPrefix: `/blog-demo-going-local-and-free-with-gatsby-and-netlify-cms`,
   plugins: [
     {
       resolve: `gatsby-source-filesystem`,
@@ -51,6 +61,12 @@ module.exports = {
         }
       }
     },
-    `gatsby-plugin-netlify-cms`
   ]
 }
+
+// Include Netlify CMS plugin if environment is local. (See the top!)
+if (includeNetlifyCms) {
+  gatsbyConfig.plugins.push(`gatsby-plugin-netlify-cms`);
+}
+
+module.exports = gatsbyConfig;
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,6 +1,6 @@
 // gatby-node.js
 
-const { accessSync, constants } = require('fs');
+const { accessSync, constants, rmSync, rmdirSync } = require('fs');
 const { createFilePath } = require('gatsby-source-filesystem');
 const path = require('path');
 
@@ -78,3 +78,20 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
     }
   }
 }
+
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
+  // Skip "source-map" creation for js files.
+  if (stage === 'build-javascript') {
+    actions.setWebpackConfig({
+      devtool: false
+    });
+  }
+}
+
+exports.onPostBuild = () => {
+  // Delete unused artifacts and Netlify CMS configuration on production build.
+  rmSync(`./public/webpack.stats.json`);
+  rmSync(`./public/chunk-map.json`);
+  rmSync(`./public/admin/config.yml`);
+  rmdirSync(`./public/admin/`);
+}
diff --git a/package.json b/package.json
@@ -5,7 +5,11 @@
   "main": "index.js",
   "scripts": {
     "start": "gatsby clean && gatsby develop --host 0.0.0.0",
-    "proxy": "npx netlify-cms-proxy-server"
+    "proxy": "npx netlify-cms-proxy-server",
+    "clean": "gatsby clean",
+    "build": "gatsby clean && gatsby build",
+    "build:serve": "gatsby clean && gatsby build && gatsby serve",
+    "build:path-prefix": "gatsby clean && gatsby build --prefix-paths"
   },
   "repository": {
     "type": "git",
@@ -42,5 +46,6 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "tailwindcss": "^3.1.8"
-  }
+  },
+  "browserslist": "> 0.25%, not dead, not ie 11"
 }
diff --git a/src/components/Seo.js b/src/components/Seo.js
@@ -1,22 +1,25 @@
 import { useLocation } from '@reach/router';
+import { withPrefix } from 'gatsby';
 import React from 'react'
 import { Helmet } from 'react-helmet'
 
 const Seo = (props) => {
   // Get location data from the router.
   const location = useLocation();
 
+  const prefixPathWithoutTrailingSlash = withPrefix('/').slice(0, -1);
+
   const pageMeta = {
     title: props.settings.siteTitle,
     description: '',
-    imageSrc: '/img/static-img-og-fallback.jpg',
+    imageSrc: `${prefixPathWithoutTrailingSlash}/img/static-img-og-fallback.jpg`,
   }
 
   if (props.page !== undefined) {
     pageMeta.title = props.page.title;
     pageMeta.description = props.page.description;
     if (props.page.featuredImage?.childImageSharp.resize.src) {
-      pageMeta.imageSrc = props.page.featuredImage?.childImageSharp.resize.src;
+      pageMeta.imageSrc = `${prefixPathWithoutTrailingSlash}${props.page.featuredImage?.childImageSharp.resize.src}`;
     }
   }
 
@@ -43,14 +46,24 @@ const Seo = (props) => {
       <meta name="twitter:image:alt" content={pageMeta.description} />
 
       {/* favicon */}
-      <link rel="shortcut icon" href="/img/static-img-favicon.png"></link>
+      <link rel="shortcut icon" href={`${prefixPathWithoutTrailingSlash}/img/static-img-favicon.png`}></link>
 
       {/* other */}
-      <body className='
+      <body className={`
         bg-stone-50
         bg-[url(/img/static-img-bg-noisy-texture.png)]
-        bg-fixed'>
+        bg-fixed`}>
       </body>
+
+      {/* A fix to avoid "mini-css-extract-plugin" plugin's "Error: Can't resolve '${prefixPathWithoutTrailingSlash}/img/static-img-bg-noisy-texture.png ...' error. (This error rises only if you use a path prefix.) */}
+      {/* Can be removed removed after removal of sub-folder deployment and using a static URL for the background image! */}
+      <style>
+        {`
+          body {
+            background-image: url(${prefixPathWithoutTrailingSlash}/img/static-img-bg-noisy-texture.png) !important;
+          }
+        `}
+      </style>
     </Helmet>
   )
 }

diff --git a/src/templates/contact-template.js b/src/templates/contact-template.js
@@ -4,9 +4,6 @@ import Layout from '../components/Layout.js';
 import PageHeader from '../components/PageHeader.js';
 
 const ContactTemplate = (props) => {
-
-  console.log(props);
-
   return (
     <Layout page={props.data.markdownRemark.frontmatter}>
       <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />

diff --git a/src/templates/default-template.js b/src/templates/default-template.js
@@ -6,9 +6,6 @@ import Layout from '../components/Layout.js';
 import PageHeader from '../components/PageHeader.js';
 
 const DefaultTemplate = (props) => {
-
-  console.log(props);
-
   return (
     <Layout page={props.data.markdownRemark.frontmatter}>
       <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />

diff --git a/src/templates/design-template.js b/src/templates/design-template.js
@@ -7,9 +7,6 @@ import Layout from '../components/Layout.js';
 import PageHeader from '../components/PageHeader.js';
 
 const DesignTemplate = (props) => {
-
-  console.log(props.data);
-
   return (
     <Layout page={props.data.markdownRemark.frontmatter}>
       <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />

diff --git a/src/templates/designs-template.js b/src/templates/designs-template.js
@@ -8,9 +8,6 @@ import PageHeader from '../components/PageHeader.js';
 
 
 const DesignsTemplate = (props) => {
-
-  console.log(props.data);
-
   return (
     <Layout page={props.data.markdownRemark.frontmatter}>
       <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />

diff --git a/src/templates/index-template.js b/src/templates/index-template.js
@@ -4,9 +4,6 @@ import React from 'react'
 import Layout from '../components/Layout.js';
 
 const IndexTemplate = (props) => {
-
-  console.log(props.data);
-
   return (
     <Layout page={props.data.markdownRemark.frontmatter}>
         <div className='

diff --git a/src/templates/page-template.js b/src/templates/page-template.js
@@ -6,9 +6,6 @@ import Layout from '../components/Layout.js';
 import PageHeader from '../components/PageHeader.js';
 
 const PageTemplate = (props) => {
-
-  console.log(props.data);
-
   return (
     <Layout page={props.data.markdownRemark.frontmatter}>
       <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />