Website deployment

.github/workflows/publish-next.yml

@@ -44,7 +44,7 @@ jobs:
         run: cd lib && npm run test
 
       - name: Build website
-        run: cd website && yarn build
+        run: cd website && SITE_VERSION=next yarn build
 
       - name: Publish NEXT version to npm
         run: |

scripts/release-website.js

@@ -52,6 +52,21 @@ const getVersionsInS3Bucket = async () => {
   return versionsFromPrevDirectory.concat(versions);
 };
 
+const buildSite = (version) => {
+  return new Promise((resolve, reject) => {
+    console.log(`Building site with version ${version}/`);
+    exec(`SITE_VERSION=${version} yarn build`, (error, stdout, stderr) => {
+      if (error) {
+        throw new Error(error.message);
+      }
+      if (stderr) {
+        throw new Error(stderr);
+      }
+      resolve(stdout);
+    });
+  });
+};
+
 const removeBucket = (version) => {
   return new Promise((resolve, reject) => {
     console.log(`Removing s3://${BUCKET_NAME}/${DIRECTORY}${version}/`);
@@ -113,6 +128,7 @@ const deploy = async () => {
   );
   const existingVersionsInBucket = await getVersionsInS3Bucket();
   const isNewLatest = !existingVersionsInBucket.includes(majorVersionToDeploy);
+  await buildSite(majorVersionToDeploy);
   await removeBucket(majorVersionToDeploy);
   await moveToBucket(majorVersionToDeploy);
   const listAvailableVersions = await getVersionsInS3Bucket();

website/next.config.js

@@ -1,3 +1,5 @@
+const isProd = process.env.NODE_ENV === "production";
+
 /** @type {import('next').NextConfig} */
 module.exports = {
   images: {
@@ -31,4 +33,6 @@ module.exports = {
       "/": { page: "/overview/introduction" },
     };
   },
+  assetPrefix: isProd ? `/halstack/${process.env.SITE_VERSION}` : undefined,
+  basePath: isProd ? `/halstack/${process.env.SITE_VERSION}` : undefined,
 };

website/screens/common/Image.tsx

@@ -1,7 +1,7 @@
 import NextImage from "next/image";
 
 const customLoader = ({ src }: { src: string }) => {
-  return src;
+  return process.env.NODE_ENV === "production" ? src.replace("//", "/") : src;
 };
 
 type ImageProps = {

website/screens/common/sidenav/SidenavLogo.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
-import Image from "../Image";
-import halstackLogo from "../images/halstack_logo.svg";
+import Image from "@/common/Image";
+import halstackLogo from "@/common/images/halstack_logo.svg";
 
 const SidenavLogo = () => {
   return (