Update app for latest Applura client and SSR server interfaces (#21)

gabesullice · web-flow · commit c3da22c705f3 · 2025-07-25T21:52:32.000+02:00
diff --git a/esbuild.config.js b/esbuild.config.js
@@ -0,0 +1,13 @@
+const esbuild = require('esbuild');
+
+esbuild.build({
+  entryPoints: ['src/render.js'],
+  bundle: true,
+  minify: true,
+  format: 'esm',
+  outfile: 'dist/render.js',
+  loader: {
+    '.js': 'jsx',
+    '.pcss': 'empty',
+  },
+}).catch(() => process.exit(1));
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,21 +8,24 @@
     "build": "npm run build:client && npm run build:server && npm run build:assets",
     "build:watch": "webpack --watch",
     "build:client": "webpack --config webpack.config.cjs",
-    "build:server": "webpack --config webpack.config.server.cjs",
+    "build:server": "esbuild src/render.js --loader:.js=jsx --loader:.pcss=empty --bundle --minify --format=esm --outfile=dist/render.js",
     "build:assets": "rm -rf dist/static dist/index.html && cp -r src/index.html src/static dist/"
   },
   "author": "Applura, Inc",
   "license": "MIT",
   "dependencies": {
     "dayjs": "^1.11.13",
+    "esbuild": "^0.25.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.22.15",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
     "css-loader": "^7.1.2",
+    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.5.1",
     "postcss-loader": "^8.1.1",
     "postcss-minify": "^1.1.0",
diff --git a/src/app.jsx b/src/app.jsx
@@ -21,7 +21,7 @@ const PageTypes = {
  */
 const App = ({ resource, problem }) => {
   if (problem) {
-    const statusCode = problem.response.status;
+    const statusCode = problem.status;
     const phrases = {
       403: 'Sign in or get out!',
       404: "Oops, this is not the page you're looking for.",
diff --git a/src/component/cards/cards.jsx b/src/component/cards/cards.jsx
@@ -1,26 +1,22 @@
 import React from "react";
 import './cards.pcss';
-import Link from "../link/link.jsx";
 
-/**
- * Nav renders a navigation resource.
- *
- * @param resource
- */
 const Cards = ({ cards }) => {
-  return  <div className="cards">
-    {cards.data.map(({ title, teaserIcon, teaserText, links }, i) => (
-      <Link key={i} title={title} href={links.get('canonical').href}>
-        <div key={i} className="card">
-          <div className={'card-icon ' + teaserIcon}></div>
-          <div className="card-content">
-            <div className="card-title">{title}</div>
-            <div className="card-description">{teaserText}</div>
+  return (
+    <div className="cards">
+      {cards.map(({ title, teaserIcon, teaserText, links }, i) => (
+        <a href={links.canonical.href}>
+          <div className="card">
+            <div className={`card-icon ${teaserIcon}`}></div>
+            <div className="card-content">
+              <div className="card-title">{title}</div>
+              <div className="card-description">{teaserText}</div>
+            </div>
           </div>
-        </div>
-      </Link>
-    ))}
-  </div>
+        </a>
+      ))}
+    </div>
+  );
 };
 
 export default Cards;
diff --git a/src/component/header/header.jsx b/src/component/header/header.jsx
@@ -1,18 +1,19 @@
 import React from "react";
 import Nav from "./../nav/nav.jsx";
 import "./header.pcss";
-import Link from "../link/link.jsx";
 
 const Header = ({ menu, links }) => {
-  const edit = links.get('edit-form');
+  const edit = links['edit-form'];
   return <header className="header">
     <div className="header-content">
-      <Nav menu={ menu.data } />
-      <div className="actions">
-        {edit && <Link href={edit.href} title={"Edit page"} className={"btn-primary"}/>}
-      </div>
+      <Nav menu={ menu } />
+      {edit && (
+        <div className="actions">
+          <a href={edit.href} title="Edit page" className="btn-primary">Edit page</a>
+        </div>
+      )}
     </div>
   </header>
 };
 
-export default Header;
+export default Header;
diff --git a/src/component/link/link.jsx b/src/component/link/link.jsx
diff --git a/src/component/nav/nav.jsx b/src/component/nav/nav.jsx
@@ -7,13 +7,15 @@ import "./nav.pcss";
  * @param resource
  */
 const Nav = ({ menu }) => {
-  return <div className="navigation">
-    <ul className="menu">
-      {menu.items.map(({ href, title }, i) => (
-        <li key={i}><a href={ href }>{ title }</a></li>
-      ))}
-    </ul>
-  </div>
+  return (
+    <div className="navigation">
+      <ul className="menu">
+        {menu.items.map(({ href, title }, i) => (
+          <li key={i}><a href={ href }>{ title }</a></li>
+        ))}
+      </ul>
+    </div>
+  )
 };
 
 export default Nav;
diff --git a/src/component/short-cards/short-cards.jsx b/src/component/short-cards/short-cards.jsx
@@ -1,29 +1,25 @@
 import React from "react";
 import "./short-cards.pcss";
-import Link from "./../link/link.jsx";
 
 /**
  * Nav renders a navigation resource.
- *
- * @param resource
  */
 const ShortCards = ({ cards }) => {
-  // Get the current URL
-  const currentUrl = window.location.href;
-
   return (
     <div className="short-cards">
-      {cards.data.map(({ title, teaserIcon, teaserText, links }, i) => {
-        const linkHref = new URL(links.get('canonical').href, window.location.origin).href;
-        // Check if the resolved link matches the current URL
-        const isActive = linkHref === currentUrl;
+      {cards.map(({ id, title, teaserIcon, teaserText, links }, i) => {
         return (
-          <Link key={i} className={`short-card-link ${isActive ? 'active' : ''}`} title={title} href={links.get('canonical').href}>
-            <div key={i} className={'short-card'}>
-              <div className={'short-card-icon ' + teaserIcon}></div>
+          <a
+            key={id}
+            className={`short-card-link`}
+            title={title}
+            href={links.canonical.href}
+          >
+            <div className="short-card">
+              <div className={`short-card-icon ${teaserIcon}`}></div>
               <div className="short-card-title">{title}</div>
             </div>
-          </Link>
+          </a>
         );
       })}
     </div>
diff --git a/src/component/text/text.jsx b/src/component/text/text.jsx
@@ -7,12 +7,18 @@ import ProcessedHTML from "../../component/processed-html/processed-html.jsx";
  * @param resource
  */
 const Text = ({ components }) => {
-  const {heading, content} = components.data;
+  const { heading, content } = components;
   return <div className="text-wrapper">
-    <h2 className="content-title">{heading}</h2>
-    <div className="content-description">
-      <ProcessedHTML html={content}/>
-    </div>
+    {heading ?
+      <h2 className="content-title">{heading}</h2>
+      : null
+    }
+    {content ?
+      <div className="content-description">
+        <ProcessedHTML html={content}/>
+      </div>
+      : null
+    }
   </div>
 };
 
diff --git a/src/index.html b/src/index.html
@@ -19,6 +19,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
     <!-- Use relative paths for assets. Applura will rewrite the "href" to point to the latest release on its CDN. -->
     <script type="module" src="/main.js"></script>
+    <link rel="stylesheet" href="/css/main.css" />
     <link rel="stylesheet" href="/static/mvp.css" />
     <link rel="stylesheet" href="/static/global.css" />
     <!-- <title> will be rewritten by the server as needed. -->
diff --git a/src/page/basic-page/basic-page.jsx b/src/page/basic-page/basic-page.jsx
@@ -14,15 +14,17 @@ import "./basic-page.pcss";
 const BasicPage = ({ fields }) => {
   // Extract the required fields from the resource fields.
   const { mainMenu, title, created, relatedLinks, body, links } = fields;
+  const cards = relatedLinks ? Object.values(relatedLinks) : [];
+
   return (
     <div id="basic-page">
       <Header menu={mainMenu} links={links}></Header>
       <main>
         <section className="basic-page-content">
-          {relatedLinks && relatedLinks.data.length > 0 ? (
+          {cards && cards.length > 0 ? (
             <div className="sidebar">
               <div className="sidebar-title">Dive Deeper</div>
-              <ShortCards cards={relatedLinks}></ShortCards>
+              <ShortCards cards={cards}></ShortCards>
             </div>
           ) : null}
           <div className="content">
diff --git a/src/page/landing-page/landing-page.jsx b/src/page/landing-page/landing-page.jsx
@@ -26,8 +26,12 @@ const LandingPage = ({ fields }) => {
         </div>
         <div className="background-image-section">
           <div className="container">
-            <Text components={text} />
-            <Cards cards={cards} />
+            {text ? (
+              <Text components={text} />
+            ) : null}
+            {cards ? (
+              <Cards cards={cards} />
+            ) : null}
           </div>
         </div>
       </div>
diff --git a/src/render.js b/src/render.js
@@ -8,7 +8,7 @@ import { renderToString } from "react-dom/server";
  * This is used for server-side rendering. Notice that the App component receives a "resource" parameter in the same
  * manner as in the browser-only Socket component.
  */
-const render = (resource) => renderToString(<App resource={resource} />);
+const render = ({resource, problem}) => renderToString(<App resource={resource} problem={problem} />);
 
 // It is important to export a function named "render" from this file. This is how the Applura service loads and renders
 // the application on the server. This file should not contain a default export.
diff --git a/webpack.config.cjs b/webpack.config.cjs
@@ -1,13 +1,13 @@
 const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 /**
  * This file configures webpack to generate a client-side bundle of your application.
  *
  * The output webpack generates with this configuration should be imported by your index.html file.
  */
-
 module.exports = {
-  mode: "development",
+  mode: "production",
   entry: "./src/index.js",
   output: {
     filename: "main.js",
@@ -22,18 +22,26 @@ module.exports = {
         use: {
           loader: "babel-loader",
           options: {
-            presets: ["@babel/preset-react"],
+            presets: ["@babel/preset-react", "@babel/preset-env"],
           },
         },
       },
       {
         test: /\.pcss$/,
         use: [
-          'style-loader', // Injects styles into DOM
-          'css-loader',   // Translates CSS into CommonJS
-          'postcss-loader'   // Compiles PostCss to CSS
-        ]
-      }
+          MiniCssExtractPlugin.loader, // Extracts CSS into separate files
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                auto: true, // Enable CSS modules for .pcss files
+                localIdentName: "[hash:base64:8]", // Minified class names
+              },
+            },
+          },
+          "postcss-loader", // Compiles PostCSS to CSS
+        ],
+      },
     ],
   },
   externalsType: "module",
@@ -45,4 +53,9 @@ module.exports = {
   experiments: {
     outputModule: true,
   },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "css/main.css",
+    }),
+  ],
 };
diff --git a/webpack.config.server.cjs b/webpack.config.server.cjs
