Feature: update to work for react 19 (#110)

Author: krishan711

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [MAJOR] Converted package into an es-module
 - [MINOR] Added react-app-ssr-vite to build SSR apps with vite
 - [MINOR] Added react-app-static-vite to build SSR apps with vite
+- [MAJOR] Update ssr and static rendering to work with react 19 (requires setting NODE_ENV externally)
 
 ### Changed
 

makefile

@@ -1,11 +1,11 @@
 install:
-	@ npm ci
+	@ npm ci --legacy-peer-deps
 
 install-updates:
-	@ npm install
+	@ npm install --legacy-peer-deps
 
 list-outdated: install
-	@ npm outdated
+	@ npm outdated --legacy-peer-deps
 
 lint-check:
 	@ node scripts/linting/run.js --config-modifier ./config.build.js

package-lock.json

@@ -5,7 +5,7 @@ import chalk from 'chalk';
 import { ESLint } from 'eslint';
 
 import { buildEslintConfig } from './eslint.config.js';
-import { removeUndefinedProperties, runParamsConfigModifier } from '../util.js';
+import { buildParams } from '../util.js';
 
 
 export const runLinting = async (inputParams = {}) => {
@@ -17,10 +17,7 @@ export const runLinting = async (inputParams = {}) => {
     outputFileFormat: undefined,
     fix: false,
   };
-  let params = { ...defaultParams, ...removeUndefinedProperties(inputParams) };
-  params = await runParamsConfigModifier(params);
-  process.env.NODE_ENV = params.dev ? 'development' : 'production';
-
+  const params = await buildParams(defaultParams, inputParams);
   const config = buildEslintConfig(params);
   const eslint = new ESLint({
     baseConfig: config,

scripts/linting/lint.js

@@ -3,13 +3,12 @@ import path from 'node:path';
 import { rolldown } from 'rolldown';
 
 import { buildModuleRolldownConfig } from './module.config.js';
-import { removeUndefinedProperties, runParamsConfigModifier } from '../util.js';
+import { buildParams } from '../util.js';
 
 
 export const buildModuleRolldown = async (inputParams = {}) => {
   const defaultParams = {
     configModifier: undefined,
-    dev: false,
     start: false,
     rolldownConfigModifier: undefined,
     name: undefined,
@@ -19,12 +18,7 @@ export const buildModuleRolldown = async (inputParams = {}) => {
     entryFilePath: path.join(process.cwd(), './src/index.ts'),
     outputDirectory: path.join(process.cwd(), './dist'),
   };
-  let params = { ...defaultParams, ...removeUndefinedProperties(inputParams) };
-  params = await runParamsConfigModifier(params);
-  // NOTE(krishan711): starting modules in dev mode doesn't work yet. Test in everyview console before re-enabling
-  params.dev = false;
-  process.env.NODE_ENV = params.dev ? 'development' : 'production';
-
+  const params = await buildParams(defaultParams, inputParams, false);
   let rolldownConfig = buildModuleRolldownConfig(params);
   if (params.rolldownConfigModifier) {
     rolldownConfig = params.rolldownConfigModifier(rolldownConfig);

scripts/module-rolldown/build.js

@@ -5,7 +5,6 @@ import { buildModuleRolldown } from './build.js';
 
 const params = program
   .option('-c, --config-modifier <path>')
-  .option('-d, --dev')
   .option('-s, --start')
   .parse(process.argv)
   .opts();

scripts/module-rolldown/run.js

@@ -5,12 +5,11 @@ import { fileURLToPath } from 'node:url';
 import { build, mergeConfig } from 'vite';
 
 import { buildReactAppViteConfig } from '../react-app-vite/app.config.js';
-import { removeUndefinedProperties, runParamsConfigModifier } from '../util.js';
+import { buildParams } from '../util.js';
 
 // NOTE(krishan711): most ideas from https://thenewstack.io/how-to-build-a-server-side-react-app-using-vite-and-express/
 export const buildSsrReactApp = async (inputParams = {}) => {
   const defaultParams = {
-    dev: false,
     start: false,
     port: 3000,
     configModifier: undefined,
@@ -28,8 +27,7 @@ export const buildSsrReactApp = async (inputParams = {}) => {
     publicDirectory: path.join(process.cwd(), './public'),
     appEntryFilePath: path.join(process.cwd(), './src/App.tsx'),
   };
-  let params = { ...defaultParams, ...removeUndefinedProperties(inputParams) };
-  params = await runParamsConfigModifier(params);
+  const params = await buildParams(defaultParams, inputParams, false);
   let viteConfig = buildReactAppViteConfig(params);
   if (params.viteConfigModifier) {
     viteConfig = params.viteConfigModifier(viteConfig);
@@ -39,19 +37,19 @@ export const buildSsrReactApp = async (inputParams = {}) => {
 
   const outputDirectoryPath = path.resolve(params.outputDirectory);
   const appEntryFilePath = path.resolve(params.appEntryFilePath);
-  const clientOutputDirectoryPath = path.join(outputDirectoryPath, '_client');
-  const ssrOutputDirectoryPath = path.join(outputDirectoryPath, '_ssr');
+  const clientDirectory = path.join(outputDirectoryPath, '_client');
+  const ssrDirectory = path.join(outputDirectoryPath, '_ssr');
   console.log('building app...');
   await build(mergeConfig(viteConfig, {
     build: {
-      outDir: clientOutputDirectoryPath,
+      outDir: clientDirectory,
     },
   }));
   console.log('building server app...');
   await build(mergeConfig(viteConfig, {
     build: {
       ssr: true,
-      outDir: ssrOutputDirectoryPath,
+      outDir: ssrDirectory,
       rollupOptions: {
         input: appEntryFilePath,
         // NOTE(krishan711): prevent the hashes in the names
@@ -63,8 +61,9 @@ export const buildSsrReactApp = async (inputParams = {}) => {
       },
     },
   }));
+  const appData = { name, port: params.port, defaultSeoTags: params.seoTags };
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
   fs.copyFileSync(path.join(__dirname, './server.js'), path.join(outputDirectoryPath, 'index.js'));
-  fs.writeFileSync(path.join(outputDirectoryPath, 'data.json'), JSON.stringify({ name, port: params.port, defaultSeoTags: params.seoTags }));
+  fs.writeFileSync(path.join(ssrDirectory, 'appData.json'), JSON.stringify(appData));
   console.log('Run `node dist/index.js` to start the server');
 };

scripts/react-app-ssr-vite/build.js

@@ -7,9 +7,6 @@ import { getPageData, renderViteHtml } from '@kibalabs/build/scripts/react-app-s
 import compression from 'compression';
 import express from 'express';
 
-import * as app from './_ssr/assets/App.js';
-import data from './data.json' with { type: 'json' };
-
 const shouldCompress = (req, res) => {
   if (req.headers['x-no-compression']) {
     return false;
@@ -18,17 +15,25 @@ const shouldCompress = (req, res) => {
 };
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const htmlTemplate = await fs.readFileSync(path.join(__dirname, '_client/index.html'), 'utf-8');
+const clientDirectory = path.join(__dirname, '_client');
+const ssrDirectory = path.join(__dirname, '_ssr');
+const app = (await import(path.join(ssrDirectory, 'assets/app.js')));
+const appData = (await import(path.join(ssrDirectory, 'appData.json'), { with: { type: 'json' } })).default;
+const htmlTemplate = await fs.readFileSync(path.join(clientDirectory, 'index.html'), 'utf-8');
 export const createAppServer = () => {
   const server = express();
   server.disable('x-powered-by');
-  server.use(express.static(path.join(__dirname, '_client'), { immutable: true, maxAge: '1y', index: false }));
+  server.use(express.static(clientDirectory, { immutable: true, maxAge: '1y', index: false }));
   server.use(compression({ filter: shouldCompress }));
   server.get('*', async (req, res) => {
+    const queryString = Object.entries(req.query)
+      .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+      .join('&');
+    console.log(`${req.method}:${req.path}:${queryString}`);
     const startTime = new Date();
     const page = { path: req.path };
-    const pageData = await getPageData(req.path, app.routes, app.globals);
-    const html = renderViteHtml(app.App, page, data.defaultSeoTags, data.name, pageData, htmlTemplate);
+    const pageData = (app.routes && app.globals) ? await getPageData(page.path, app.routes, app.globals) : null;
+    const html = await renderViteHtml(app.App, page, appData.defaultSeoTags, appData.name, pageData, htmlTemplate);
     // TODO(krishan711): move this stuff to a middleware
     if (process.env.NAME) {
       res.header('X-Server-Name', process.env.NAME);
@@ -41,14 +46,14 @@ export const createAppServer = () => {
     }
     const duration = (new Date() - startTime) / 1000.0;
     res.header('X-Response-Time', String(duration));
-    console.log(req.method, req.path, req.query, res.statusCode, duration);
+    console.log(`${req.method}:${req.path}:${queryString}:${res.statusCode}:${duration}`);
     res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
   });
   return server;
 };
 
 const host = '0.0.0.0';
-const port = data.port || 3000;
+const port = appData.port || 3000;
 const server = createAppServer();
 server.listen(port, host, () => {
   console.log(`Started server at http://${host}:${port}`);

scripts/react-app-ssr-vite/server.js

@@ -6,19 +6,18 @@ import { build, mergeConfig } from 'vite';
 
 import { getPageData, renderViteHtml } from '../react-app-static/static.js';
 import { buildReactAppViteConfig } from '../react-app-vite/app.config.js';
-import { removeUndefinedProperties, runParamsConfigModifier } from '../util.js';
+import { buildParams } from '../util.js';
 
 
 export const buildStaticReactApp = async (inputParams = {}) => {
   const defaultParams = {
-    dev: false,
     configModifier: undefined,
     polyfill: true,
     polyfillTargets: undefined,
     webpackConfigModifier: undefined,
     analyzeBundle: false,
     shouldAliasModules: true,
-    addHtmlOutput: false,
+    addHtmlOutput: true,
     addRuntimeConfig: true,
     runtimeConfigVars: {},
     seoTags: [],
@@ -28,8 +27,7 @@ export const buildStaticReactApp = async (inputParams = {}) => {
     publicDirectory: path.join(process.cwd(), './public'),
     appEntryFilePath: path.join(process.cwd(), './src/App.tsx'),
   };
-  let params = { ...defaultParams, ...removeUndefinedProperties(inputParams) };
-  params = await runParamsConfigModifier(params);
+  const params = await buildParams(defaultParams, inputParams, false);
   let viteConfig = buildReactAppViteConfig(params);
   if (params.viteConfigModifier) {
     viteConfig = params.viteConfigModifier(viteConfig);
@@ -39,19 +37,19 @@ export const buildStaticReactApp = async (inputParams = {}) => {
 
   const outputDirectoryPath = path.resolve(params.outputDirectory);
   const appEntryFilePath = path.resolve(params.appEntryFilePath);
-  const clientOutputDirectoryPath = path.join(outputDirectoryPath, '_client');
-  const ssrOutputDirectoryPath = path.join(outputDirectoryPath, '_ssr');
+  const clientDirectory = path.join(outputDirectoryPath, '_client');
+  const ssrDirectory = path.join(outputDirectoryPath, '_ssr');
   console.log('building app...');
   await build(mergeConfig(viteConfig, {
     build: {
-      outDir: clientOutputDirectoryPath,
+      outDir: clientDirectory,
     },
   }));
   console.log('building server app...');
   await build(mergeConfig(viteConfig, {
     build: {
       ssr: true,
-      outDir: ssrOutputDirectoryPath,
+      outDir: ssrDirectory,
       rollupOptions: {
         input: appEntryFilePath,
         // NOTE(krishan711): prevent the hashes in the names
@@ -63,17 +61,17 @@ export const buildStaticReactApp = async (inputParams = {}) => {
       },
     },
   }));
-
-  const app = (await import(path.join(ssrOutputDirectoryPath, 'assets/App.js')));
-  const htmlTemplate = await fs.readFileSync(path.join(clientOutputDirectoryPath, 'index.html'), 'utf-8');
+  const app = (await import(path.join(ssrDirectory, 'assets/app.js')));
+  const appData = { name, port: params.port, defaultSeoTags: params.seoTags };
+  const htmlTemplate = await fs.readFileSync(path.join(clientDirectory, 'index.html'), 'utf-8');
   // NOTE(krishan711): if this could be done in an parallel way it would be faster!
   params.pages.forEach(async (page) => {
     console.log(`Rendering page ${page.path} to ${page.filename}`);
     const pageData = (app.routes && app.globals) ? await getPageData(page.path, app.routes, app.globals) : null;
-    const output = renderViteHtml(app.App, page, params.seoTags, name, pageData, htmlTemplate);
+    const html = await renderViteHtml(app.App, page, appData.defaultSeoTags, appData.name, pageData, htmlTemplate);
     const outputPath = path.join(outputDirectoryPath, page.filename);
     fs.mkdirSync(path.dirname(outputPath), { recursive: true });
-    fs.writeFileSync(outputPath, output);
+    fs.writeFileSync(outputPath, html);
     console.log(`Done rendering page ${page.path}`);
   });
 };