@nerest/nerest 0.0.3 → 0.0.4

package/README.md

@@ -12,9 +12,12 @@ npm i --save @nerest/nerest react react-dom
 
 ## Points of Interest
 
-- SSR server entry: [server/index.ts](server/index.ts)
+- SSR server entry:
+  - Development: [server/development.ts](server/development.ts)
+  - Production: [server/production.ts](server/production.ts)
 - Hydrating client entry: [client/index.ts](client/index.ts)
 - CLI entry: [bin/index.ts](bin/index.ts)
+- Production build script: [build/index.ts](build/index.ts)
 
 ## Conventions
 
@@ -32,6 +35,28 @@ The app directory should contain a `schema.json` file that describes the schema
 
 OpenAPI specification is compiled automatically based on the provided schemas and becomes available at `/api/json`. It can also be explored through Swagger UI that becomes available at `/api`.
 
+## Configuration
+
+Different aspects of Nerest apps can be configured via environment variables, JSON configuration and runtime hooks written in TypeScript. Examples of all kinds of configuration can be viewed in the [nerest-harness](https://github.com/nerestjs/harness) repository.
+
+### Environment Variables
+
+#### Buildtime
+
+- `NEREST_STATIC_PATH` is required for production build and must contain the URL of where the client static assets will be deployed. It lets the server-side renderer return their paths in the assets field of the response.
+
+#### Runtime
+
+All environment variables prefixed with `NEREST_` will be bundled with your app during buildtime. You can access them in the code using the special `import.meta.env` object. For example, `import.meta.env.NEREST_SOMEVAR` will be statically replaced during buildtime with the value of this environment variable on the build machine.
+
+### JSON Configuration
+
+TODO
+
+### Runtime Hooks
+
+TODO
+
 ## Development
 
 Run the build script to build the framework.
@@ -41,4 +66,4 @@ npm install
 npm run build
 ```
 
-Use [nerest-harness](https://github.com/nerestjs/harness) with `npm link` to test changes locally.
+Use [nerest-harness](https://github.com/nerestjs/harness) to test changes locally.

package/bin/build.ts

@@ -0,0 +1,8 @@
+import { buildMicroFrontend } from '../build';
+
+// Produce the production build of the Nerest micro frontend
+export async function build() {
+  console.log('Nerest is preparing production build...');
+  await buildMicroFrontend();
+  console.log('Nerest build is finished');
+}

package/bin/index.ts

@@ -1,9 +1,15 @@
 #!/usr/bin/env node
 // All executions of `nerest <command>` get routed through here
+import 'dotenv/config';
+
+import { build } from './build';
 import { watch } from './watch';
 
+// TODO: add CLI help and manual, maybe use a CLI framework like oclif
 async function cliEntry(args: string[]) {
-  if (args[0] === 'watch') {
+  if (args[0] === 'build') {
+    await build();
+  } else if (args[0] === 'watch') {
     await watch();
   }
 }

package/bin/watch.ts

@@ -1,18 +1,9 @@
-import { createServer } from '../server';
+import { runDevelopmentServer } from '../server/development';
 
 // Start dev server in watch mode, that restarts on file change
 // and rebuilds the client static files
 export async function watch() {
   // TODO: will be replaced with nerest logger
   console.log('Starting Nerest watch...');
-
-  const { app } = await createServer();
-
-  // TODO: remove hardcoded port
-  await app.listen({
-    host: '0.0.0.0',
-    port: 3000,
-  });
-
-  console.log('Nerest is listening on 0.0.0.0:3000');
+  await runDevelopmentServer();
 }

package/build/index.ts

@@ -0,0 +1,82 @@
+import path from 'path';
+import fs from 'fs/promises';
+
+import vite from 'vite';
+import type { InlineConfig } from 'vite';
+
+import { loadApps } from '../server/parts/apps';
+
+export async function buildMicroFrontend() {
+  const root = process.cwd();
+  const staticPath = process.env.NEREST_STATIC_PATH;
+
+  // TODO: The path where the client files are deployed is built-in during
+  // the initial build, but the client scripts aren't using it, so maybe it should
+  // be a runtime env variable for the server instead?
+  if (!staticPath) {
+    throw new Error(
+      'NEREST_STATIC_PATH environment variable is not set but is required for the production build'
+    );
+  }
+
+  // Build client
+  // TODO: extract shared parts between build/index.ts and server/index.ts
+  // into a shared config
+  const clientConfig: InlineConfig = {
+    root,
+    appType: 'custom',
+    envPrefix: 'NEREST_',
+    build: {
+      // Manifest is needed to report used assets in SSR handles
+      manifest: true,
+      modulePreload: false,
+      rollupOptions: {
+        input: '/node_modules/@nerest/nerest/client/index.ts',
+        output: {
+          dir: 'build',
+          entryFileNames: `client/assets/[name].js`,
+          chunkFileNames: `client/assets/[name].js`,
+          assetFileNames: `client/assets/[name].[ext]`,
+        },
+      },
+    },
+  };
+
+  console.log('Producing production client build...');
+  await vite.build(clientConfig);
+
+  console.log('Producing Nerest manifest file...');
+  await buildAppsManifest(root, staticPath);
+
+  // Build server using the client manifest
+  const serverConfig: InlineConfig = {
+    root,
+    appType: 'custom',
+    envPrefix: 'NEREST_',
+    build: {
+      emptyOutDir: false,
+      modulePreload: false,
+      // This is an important setting for producing a server build
+      ssr: true,
+      rollupOptions: {
+        input: '/node_modules/@nerest/nerest/server/production.ts',
+        output: {
+          dir: 'build',
+          entryFileNames: `server.mjs`,
+        },
+      },
+    },
+  };
+
+  console.log('Producing production server build...');
+  await vite.build(serverConfig);
+}
+
+async function buildAppsManifest(root: string, staticPath: string) {
+  const apps = await loadApps(root, staticPath);
+  await fs.writeFile(
+    path.join(root, 'build/nerest-manifest.json'),
+    JSON.stringify(apps),
+    { encoding: 'utf-8' }
+  );
+}

package/dist/bin/build.d.ts

@@ -0,0 +1 @@
+export declare function build(): Promise<void>;

package/dist/bin/build.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.build = void 0;
+const build_1 = require("../build");
+// Produce the production build of the Nerest micro frontend
+async function build() {
+    console.log('Nerest is preparing production build...');
+    await (0, build_1.buildMicroFrontend)();
+    console.log('Nerest build is finished');
+}
+exports.build = build;

package/dist/bin/index.d.ts

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-export {};
+import 'dotenv/config';

package/dist/bin/index.js

@@ -2,9 +2,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // All executions of `nerest <command>` get routed through here
+require("dotenv/config");
+const build_1 = require("./build");
 const watch_1 = require("./watch");
+// TODO: add CLI help and manual, maybe use a CLI framework like oclif
 async function cliEntry(args) {
-    if (args[0] === 'watch') {
+    if (args[0] === 'build') {
+        await (0, build_1.build)();
+    }
+    else if (args[0] === 'watch') {
         await (0, watch_1.watch)();
     }
 }

package/dist/bin/watch.js

@@ -1,18 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.watch = void 0;
-const server_1 = require("../server");
+const development_1 = require("../server/development");
 // Start dev server in watch mode, that restarts on file change
 // and rebuilds the client static files
 async function watch() {
     // TODO: will be replaced with nerest logger
     console.log('Starting Nerest watch...');
-    const { app } = await (0, server_1.createServer)();
-    // TODO: remove hardcoded port
-    await app.listen({
-        host: '0.0.0.0',
-        port: 3000,
-    });
-    console.log('Nerest is listening on 0.0.0.0:3000');
+    await (0, development_1.runDevelopmentServer)();
 }
 exports.watch = watch;

package/dist/build/index.d.ts

@@ -0,0 +1 @@
+export declare function buildMicroFrontend(): Promise<void>;

package/dist/build/index.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMicroFrontend = void 0;
+const path_1 = __importDefault(require("path"));
+const promises_1 = __importDefault(require("fs/promises"));
+const vite_1 = __importDefault(require("vite"));
+const apps_1 = require("../server/parts/apps");
+async function buildMicroFrontend() {
+    const root = process.cwd();
+    const staticPath = process.env.NEREST_STATIC_PATH;
+    // TODO: The path where the client files are deployed is built-in during
+    // the initial build, but the client scripts aren't using it, so maybe it should
+    // be a runtime env variable for the server instead?
+    if (!staticPath) {
+        throw new Error('NEREST_STATIC_PATH environment variable is not set but is required for the production build');
+    }
+    // Build client
+    // TODO: extract shared parts between build/index.ts and server/index.ts
+    // into a shared config
+    const clientConfig = {
+        root,
+        appType: 'custom',
+        envPrefix: 'NEREST_',
+        build: {
+            // Manifest is needed to report used assets in SSR handles
+            manifest: true,
+            modulePreload: false,
+            rollupOptions: {
+                input: '/node_modules/@nerest/nerest/client/index.ts',
+                output: {
+                    dir: 'build',
+                    entryFileNames: `client/assets/[name].js`,
+                    chunkFileNames: `client/assets/[name].js`,
+                    assetFileNames: `client/assets/[name].[ext]`,
+                },
+            },
+        },
+    };
+    console.log('Producing production client build...');
+    await vite_1.default.build(clientConfig);
+    console.log('Producing Nerest manifest file...');
+    await buildAppsManifest(root, staticPath);
+    // Build server using the client manifest
+    const serverConfig = {
+        root,
+        appType: 'custom',
+        envPrefix: 'NEREST_',
+        build: {
+            emptyOutDir: false,
+            modulePreload: false,
+            // This is an important setting for producing a server build
+            ssr: true,
+            rollupOptions: {
+                input: '/node_modules/@nerest/nerest/server/production.ts',
+                output: {
+                    dir: 'build',
+                    entryFileNames: `server.mjs`,
+                },
+            },
+        },
+    };
+    console.log('Producing production server build...');
+    await vite_1.default.build(serverConfig);
+}
+exports.buildMicroFrontend = buildMicroFrontend;
+async function buildAppsManifest(root, staticPath) {
+    const apps = await (0, apps_1.loadApps)(root, staticPath);
+    await promises_1.default.writeFile(path_1.default.join(root, 'build/nerest-manifest.json'), JSON.stringify(apps), { encoding: 'utf-8' });
+}

package/dist/server/development.d.ts

@@ -0,0 +1 @@
+export declare function runDevelopmentServer(): Promise<void>;

package/dist/server/{index.js → development.js}

@@ -3,20 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createServer = void 0;
-// This is the nerest server entrypoint
+exports.runDevelopmentServer = void 0;
+// This is the nerest development server entrypoint
 const path_1 = __importDefault(require("path"));
 const vite_1 = __importDefault(require("vite"));
 const fastify_1 = __importDefault(require("fastify"));
 const static_1 = __importDefault(require("@fastify/static"));
-const apps_1 = require("./apps");
-const render_1 = require("./render");
-const preview_1 = require("./preview");
-const validator_1 = require("./validator");
-const swagger_1 = require("./swagger");
-// TODO: this turned out to be a dev server, production server
-// will most likely be implemented separately
-async function createServer() {
+const apps_1 = require("./parts/apps");
+const render_1 = require("./parts/render");
+const preview_1 = require("./parts/preview");
+const validator_1 = require("./parts/validator");
+const swagger_1 = require("./parts/swagger");
+async function runDevelopmentServer() {
     const root = process.cwd();
     // TODO: move build config into a separate file
     // TODO: look at @vitejs/plugin-react (everything seems fine without it though)
@@ -24,6 +22,7 @@ async function createServer() {
     const config = {
         root,
         appType: 'custom',
+        envPrefix: 'NEREST_',
         server: { middlewareMode: true },
         build: {
             // Manifest is needed to report used assets in SSR handles
@@ -34,18 +33,25 @@ async function createServer() {
             rollupOptions: {
                 input: '/node_modules/@nerest/nerest/client/index.ts',
                 output: {
-                    entryFileNames: `assets/[name].js`,
-                    chunkFileNames: `assets/[name].js`,
-                    assetFileNames: `assets/[name].[ext]`,
+                    dir: 'build',
+                    entryFileNames: `client/assets/[name].js`,
+                    chunkFileNames: `client/assets/[name].js`,
+                    assetFileNames: `client/assets/[name].[ext]`,
                 },
             },
         },
+        // TODO: this doesn't seem to work without the index.html file entry and
+        // produces warnings in dev mode. look into this maybe
+        optimizeDeps: {
+            disabled: true,
+        },
     };
     // Build the clientside assets and watch for changes
     // TODO: this should probably be moved from here
     await startClientBuildWatcher(config);
     // Load app entries following the `apps/{name}/index.tsx` convention
-    const apps = await (0, apps_1.loadApps)(root);
+    // TODO: remove hardcoded port
+    const apps = await (0, apps_1.loadApps)(root, 'http://0.0.0.0:3000/');
     // Start vite server that will be rendering SSR components
     const viteSsr = await vite_1.default.createServer(config);
     const app = (0, fastify_1.default)();
@@ -57,8 +63,7 @@ async function createServer() {
     for (const appEntry of Object.values(apps)) {
         const { name, entry, examples, schema } = appEntry;
         const routeOptions = {};
-        // TODO: report error if schema is missing, unless this app is client-only.
-        // TODO: disallow apps without schemas in production build
+        // TODO: report error if schema is missing, unless this app is client-only
         if (schema) {
             routeOptions.schema = {
                 // Use description as Swagger summary, since summary is visible
@@ -79,7 +84,11 @@ async function createServer() {
             const ssrComponent = await viteSsr.ssrLoadModule(entry, {
                 fixStacktrace: true,
             });
-            return (0, render_1.renderApp)(appEntry, ssrComponent.default, request.body);
+            return (0, render_1.renderApp)({
+                name,
+                assets: appEntry.assets,
+                component: ssrComponent.default,
+            }, request.body);
         });
         for (const [exampleName, example] of Object.entries(examples)) {
             // Validate example against schema when specified
@@ -100,7 +109,11 @@ async function createServer() {
                 const ssrComponent = await viteSsr.ssrLoadModule(entry, {
                     fixStacktrace: true,
                 });
-                const { html, assets } = (0, render_1.renderApp)(appEntry, ssrComponent.default, example);
+                const { html, assets } = (0, render_1.renderApp)({
+                    name,
+                    assets: appEntry.assets,
+                    component: ssrComponent.default,
+                }, example);
                 reply.type('text/html');
                 return (0, preview_1.renderPreviewPage)(html, assets);
             });
@@ -108,7 +121,7 @@ async function createServer() {
     }
     // TODO: only do this locally, load from CDN in production
     await app.register(static_1.default, {
-        root: path_1.default.join(root, 'dist'),
+        root: path_1.default.join(root, 'build'),
         // TODO: maybe use @fastify/cors instead
         setHeaders(res) {
             res.setHeader('Access-Control-Allow-Origin', '*');
@@ -116,9 +129,14 @@ async function createServer() {
             res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, Authorization');
         },
     });
-    return { app };
+    // TODO: remove hardcoded port
+    await app.listen({
+        host: '0.0.0.0',
+        port: 3000,
+    });
+    console.log('Nerest is listening on 0.0.0.0:3000');
 }
-exports.createServer = createServer;
+exports.runDevelopmentServer = runDevelopmentServer;
 // TODO: this should probably be moved from here
 async function startClientBuildWatcher(config) {
     const watcher = (await vite_1.default.build(config));

package/dist/server/loaders/assets.d.ts

@@ -0,0 +1,2 @@
+import type { Manifest } from 'vite';
+export declare function loadAppAssets(appName: string, manifest: Manifest, staticPath: string): string[];

package/dist/server/loaders/assets.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadAppAssets = void 0;
+// Extracts the list of assets for a given app from the manifest file
+function loadAppAssets(appName, manifest, staticPath) {
+    // TODO: handling errors and potentially missing entries
+    // All apps share the same JS entry that dynamically imports the chunks of the apps
+    // that are used on the page based on their name
+    const clientEntryJs = manifest['node_modules/@nerest/nerest/client/index.ts'].file;
+    // Each app has its own CSS bundles, if it imports any CSS
+    const appCss = manifest[`apps/${appName}/index.tsx`].css ?? [];
+    return [clientEntryJs, ...appCss].map((x) => staticPath + x);
+}
+exports.loadAppAssets = loadAppAssets;

package/dist/server/loaders/manifest.d.ts

@@ -0,0 +1 @@
+export declare function loadAppManifest(root: string): Promise<any>;

package/dist/server/loaders/manifest.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadAppManifest = void 0;
+const path_1 = __importDefault(require("path"));
+const promises_1 = __importDefault(require("fs/promises"));
+// Manifest is used to provide assets list for every app
+// for use with SSR
+async function loadAppManifest(root) {
+    // TODO: error handling
+    const manifestPath = path_1.default.join(root, 'build', 'manifest.json');
+    const manifestData = await promises_1.default.readFile(manifestPath, { encoding: 'utf8' });
+    return JSON.parse(manifestData);
+}
+exports.loadAppManifest = loadAppManifest;

package/dist/server/{apps.d.ts → parts/apps.d.ts}

@@ -6,6 +6,6 @@ export type AppEntry = {
     examples: Record<string, unknown>;
     schema: Record<string, unknown> | null;
 };
-export declare function loadApps(root: string): Promise<{
+export declare function loadApps(root: string, deployedStaticPath: string): Promise<{
     [k: string]: AppEntry;
 }>;

package/dist/server/{apps.js → parts/apps.js}

@@ -6,26 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadApps = void 0;
 const path_1 = __importDefault(require("path"));
 const promises_1 = __importDefault(require("fs/promises"));
-const assets_1 = require("./app-parts/assets");
-const examples_1 = require("./app-parts/examples");
-const schema_1 = require("./app-parts/schema");
+const assets_1 = require("../loaders/assets");
+const examples_1 = require("../loaders/examples");
+const schema_1 = require("../loaders/schema");
+const manifest_1 = require("../loaders/manifest");
 // Build the record of the available apps by convention
 // apps -> /apps/{name}/index.tsx
 // examples -> /apps/{name}/examples/{example}.json
-async function loadApps(root) {
+async function loadApps(root, deployedStaticPath) {
     const appsRoot = path_1.default.join(root, 'apps');
-    const manifest = await loadManifest(root);
+    const manifest = await (0, manifest_1.loadAppManifest)(root);
     const appsDirs = (await promises_1.default.readdir(appsRoot, { withFileTypes: true }))
         .filter((d) => d.isDirectory())
         .map((d) => d.name);
     const apps = [];
     for (const appDir of appsDirs) {
-        apps.push(await loadApp(appsRoot, appDir, manifest));
+        apps.push(await loadApp(appsRoot, appDir, manifest, deployedStaticPath));
     }
     return Object.fromEntries(apps);
 }
 exports.loadApps = loadApps;
-async function loadApp(appsRoot, name, manifest) {
+async function loadApp(appsRoot, name, manifest, deployedStaticPath) {
     // TODO: report problems with loading entries, assets and/or examples
     const appRoot = path_1.default.join(appsRoot, name);
     return [
@@ -34,17 +35,9 @@ async function loadApp(appsRoot, name, manifest) {
             name,
             root: appRoot,
             entry: path_1.default.join(appRoot, 'index.tsx'),
-            assets: (0, assets_1.loadAppAssets)(manifest, name),
+            assets: (0, assets_1.loadAppAssets)(name, manifest, deployedStaticPath),
             examples: await (0, examples_1.loadAppExamples)(appRoot),
             schema: await (0, schema_1.loadAppSchema)(appRoot),
         },
     ];
 }
-// Manifest is used to provide assets list for every app
-// for use with SSR
-async function loadManifest(root) {
-    // TODO: error handling
-    const manifestPath = path_1.default.join(root, 'dist', 'manifest.json');
-    const manifestData = await promises_1.default.readFile(manifestPath, { encoding: 'utf8' });
-    return JSON.parse(manifestData);
-}

package/dist/server/parts/render.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type RenderProps = {
+    name: string;
+    assets: string[];
+    component: React.ComponentType;
+};
+export declare function renderApp({ name, assets, component }: RenderProps, props?: Record<string, unknown>): {
+    html: string;
+    assets: string[];
+};
+export {};

package/dist/server/{render.js → parts/render.js}

@@ -7,9 +7,8 @@ exports.renderApp = void 0;
 const react_1 = __importDefault(require("react"));
 const server_1 = require("react-dom/server");
 const nanoid_1 = require("nanoid");
-function renderApp(appEntry, appComponent, props = {}) {
-    const { name, assets } = appEntry;
-    const html = renderSsrComponent(name, appComponent, props);
+function renderApp({ name, assets, component }, props = {}) {
+    const html = renderSsrComponent(name, component, props);
     return { html, assets };
 }
 exports.renderApp = renderApp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nerest/nerest",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "React micro frontend framework",
   "homepage": "https://github.com/nerestjs/nerest#readme",
   "repository": {
@@ -13,6 +13,7 @@
   "files": [
     "/dist",
     "/bin",
+    "/build",
     "/client",
     "/server",
     "/README.md"
@@ -46,29 +47,30 @@
     ]
   },
   "dependencies": {
-    "@fastify/static": "^6.9.0",
-    "@fastify/swagger": "^8.3.1",
-    "@fastify/swagger-ui": "^1.4.0",
+    "@fastify/static": "^6.10.2",
+    "@fastify/swagger": "^8.5.1",
+    "@fastify/swagger-ui": "^1.8.1",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
+    "dotenv": "^16.1.4",
     "fast-uri": "^2.2.0",
-    "fastify": "^4.13.0",
-    "nanoid": "^3.3.4",
-    "vite": "^4.1.4"
+    "fastify": "^4.17.0",
+    "nanoid": "^3.3.6",
+    "vite": "^4.3.9"
   },
   "devDependencies": {
-    "@tinkoff/eslint-config": "^1.50.1",
-    "@tinkoff/eslint-config-react": "^1.50.2",
-    "@tinkoff/prettier-config": "^1.47.1",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "jest": "^29.4.3",
-    "lint-staged": "^13.1.2",
+    "@tinkoff/eslint-config": "^1.52.1",
+    "@tinkoff/eslint-config-react": "^1.52.1",
+    "@tinkoff/prettier-config": "^1.52.1",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "jest": "^29.5.0",
+    "lint-staged": "^13.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "simple-git-hooks": "^2.8.1",
     "sort-package-json": "^2.4.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/server/{index.ts → development.ts}

@@ -1,4 +1,4 @@
-// This is the nerest server entrypoint
+// This is the nerest development server entrypoint
 import path from 'path';
 import type { ServerResponse } from 'http';
 
@@ -10,15 +10,13 @@ import type { RouteShorthandOptions } from 'fastify';
 import fastify from 'fastify';
 import fastifyStatic from '@fastify/static';
 
-import { loadApps } from './apps';
-import { renderApp } from './render';
-import { renderPreviewPage } from './preview';
-import { validator } from './validator';
-import { setupSwagger } from './swagger';
+import { loadApps } from './parts/apps';
+import { renderApp } from './parts/render';
+import { renderPreviewPage } from './parts/preview';
+import { validator } from './parts/validator';
+import { setupSwagger } from './parts/swagger';
 
-// TODO: this turned out to be a dev server, production server
-// will most likely be implemented separately
-export async function createServer() {
+export async function runDevelopmentServer() {
   const root = process.cwd();
 
   // TODO: move build config into a separate file
@@ -27,6 +25,7 @@ export async function createServer() {
   const config: InlineConfig = {
     root,
     appType: 'custom',
+    envPrefix: 'NEREST_',
     server: { middlewareMode: true },
     build: {
       // Manifest is needed to report used assets in SSR handles
@@ -37,12 +36,18 @@ export async function createServer() {
       rollupOptions: {
         input: '/node_modules/@nerest/nerest/client/index.ts',
         output: {
-          entryFileNames: `assets/[name].js`,
-          chunkFileNames: `assets/[name].js`,
-          assetFileNames: `assets/[name].[ext]`,
+          dir: 'build',
+          entryFileNames: `client/assets/[name].js`,
+          chunkFileNames: `client/assets/[name].js`,
+          assetFileNames: `client/assets/[name].[ext]`,
         },
       },
     },
+    // TODO: this doesn't seem to work without the index.html file entry and
+    // produces warnings in dev mode. look into this maybe
+    optimizeDeps: {
+      disabled: true,
+    },
   };
 
   // Build the clientside assets and watch for changes
@@ -50,7 +55,8 @@ export async function createServer() {
   await startClientBuildWatcher(config);
 
   // Load app entries following the `apps/{name}/index.tsx` convention
-  const apps = await loadApps(root);
+  // TODO: remove hardcoded port
+  const apps = await loadApps(root, 'http://0.0.0.0:3000/');
 
   // Start vite server that will be rendering SSR components
   const viteSsr = await vite.createServer(config);
@@ -68,8 +74,7 @@ export async function createServer() {
 
     const routeOptions: RouteShorthandOptions = {};
 
-    // TODO: report error if schema is missing, unless this app is client-only.
-    // TODO: disallow apps without schemas in production build
+    // TODO: report error if schema is missing, unless this app is client-only
     if (schema) {
       routeOptions.schema = {
         // Use description as Swagger summary, since summary is visible
@@ -92,8 +97,11 @@ export async function createServer() {
         fixStacktrace: true,
       });
       return renderApp(
-        appEntry,
-        ssrComponent.default,
+        {
+          name,
+          assets: appEntry.assets,
+          component: ssrComponent.default,
+        },
         request.body as Record<string, unknown>
       );
     });
@@ -124,8 +132,11 @@ export async function createServer() {
             fixStacktrace: true,
           });
           const { html, assets } = renderApp(
-            appEntry,
-            ssrComponent.default,
+            {
+              name,
+              assets: appEntry.assets,
+              component: ssrComponent.default,
+            },
             example as Record<string, unknown>
           );
 
@@ -139,7 +150,7 @@ export async function createServer() {
 
   // TODO: only do this locally, load from CDN in production
   await app.register(fastifyStatic, {
-    root: path.join(root, 'dist'),
+    root: path.join(root, 'build'),
     // TODO: maybe use @fastify/cors instead
     setHeaders(res: ServerResponse) {
       res.setHeader('Access-Control-Allow-Origin', '*');
@@ -151,7 +162,13 @@ export async function createServer() {
     },
   });
 
-  return { app };
+  // TODO: remove hardcoded port
+  await app.listen({
+    host: '0.0.0.0',
+    port: 3000,
+  });
+
+  console.log('Nerest is listening on 0.0.0.0:3000');
 }
 
 // TODO: this should probably be moved from here

package/server/loaders/assets.ts

@@ -0,0 +1,19 @@
+import type { Manifest } from 'vite';
+
+// Extracts the list of assets for a given app from the manifest file
+export function loadAppAssets(
+  appName: string,
+  manifest: Manifest,
+  staticPath: string
+) {
+  // TODO: handling errors and potentially missing entries
+  // All apps share the same JS entry that dynamically imports the chunks of the apps
+  // that are used on the page based on their name
+  const clientEntryJs =
+    manifest['node_modules/@nerest/nerest/client/index.ts'].file;
+
+  // Each app has its own CSS bundles, if it imports any CSS
+  const appCss = manifest[`apps/${appName}/index.tsx`].css ?? [];
+
+  return [clientEntryJs, ...appCss].map((x) => staticPath + x);
+}

package/server/loaders/manifest.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import fs from 'fs/promises';
+
+// Manifest is used to provide assets list for every app
+// for use with SSR
+export async function loadAppManifest(root: string) {
+  // TODO: error handling
+  const manifestPath = path.join(root, 'build', 'manifest.json');
+  const manifestData = await fs.readFile(manifestPath, { encoding: 'utf8' });
+  return JSON.parse(manifestData);
+}

package/server/{apps.ts → parts/apps.ts}

@@ -2,9 +2,10 @@ import path from 'path';
 import fs from 'fs/promises';
 import type { Manifest } from 'vite';
 
-import { loadAppAssets } from './app-parts/assets';
-import { loadAppExamples } from './app-parts/examples';
-import { loadAppSchema } from './app-parts/schema';
+import { loadAppAssets } from '../loaders/assets';
+import { loadAppExamples } from '../loaders/examples';
+import { loadAppSchema } from '../loaders/schema';
+import { loadAppManifest } from '../loaders/manifest';
 
 export type AppEntry = {
   name: string;
@@ -18,9 +19,9 @@ export type AppEntry = {
 // Build the record of the available apps by convention
 // apps -> /apps/{name}/index.tsx
 // examples -> /apps/{name}/examples/{example}.json
-export async function loadApps(root: string) {
+export async function loadApps(root: string, deployedStaticPath: string) {
   const appsRoot = path.join(root, 'apps');
-  const manifest = await loadManifest(root);
+  const manifest = await loadAppManifest(root);
 
   const appsDirs = (await fs.readdir(appsRoot, { withFileTypes: true }))
     .filter((d) => d.isDirectory())
@@ -28,7 +29,7 @@ export async function loadApps(root: string) {
 
   const apps: Array<[name: string, entry: AppEntry]> = [];
   for (const appDir of appsDirs) {
-    apps.push(await loadApp(appsRoot, appDir, manifest));
+    apps.push(await loadApp(appsRoot, appDir, manifest, deployedStaticPath));
   }
 
   return Object.fromEntries(apps);
@@ -37,7 +38,8 @@ export async function loadApps(root: string) {
 async function loadApp(
   appsRoot: string,
   name: string,
-  manifest: Manifest
+  manifest: Manifest,
+  deployedStaticPath: string
 ): Promise<[name: string, entry: AppEntry]> {
   // TODO: report problems with loading entries, assets and/or examples
   const appRoot = path.join(appsRoot, name);
@@ -47,18 +49,9 @@ async function loadApp(
       name,
       root: appRoot,
       entry: path.join(appRoot, 'index.tsx'),
-      assets: loadAppAssets(manifest, name),
+      assets: loadAppAssets(name, manifest, deployedStaticPath),
       examples: await loadAppExamples(appRoot),
       schema: await loadAppSchema(appRoot),
     },
   ];
 }
-
-// Manifest is used to provide assets list for every app
-// for use with SSR
-async function loadManifest(root: string) {
-  // TODO: error handling
-  const manifestPath = path.join(root, 'dist', 'manifest.json');
-  const manifestData = await fs.readFile(manifestPath, { encoding: 'utf8' });
-  return JSON.parse(manifestData);
-}

package/server/{render.ts → parts/render.ts}

@@ -2,15 +2,17 @@ import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { nanoid } from 'nanoid';
 
-import type { AppEntry } from './apps';
+type RenderProps = {
+  name: string;
+  assets: string[];
+  component: React.ComponentType;
+};
 
 export function renderApp(
-  appEntry: AppEntry,
-  appComponent: React.ComponentType,
+  { name, assets, component }: RenderProps,
   props: Record<string, unknown> = {}
 ) {
-  const { name, assets } = appEntry;
-  const html = renderSsrComponent(name, appComponent, props);
+  const html = renderSsrComponent(name, component, props);
   return { html, assets };
 }
 

package/server/production.ts

@@ -0,0 +1,105 @@
+// This is the nerest production server entrypoint
+import path from 'path';
+import fs from 'fs/promises';
+
+import fastify from 'fastify';
+import type { RouteShorthandOptions } from 'fastify';
+
+import type { AppEntry } from './parts/apps';
+import { renderApp } from './parts/render';
+import { setupSwagger } from './parts/swagger';
+import { validator } from './parts/validator';
+import { renderPreviewPage } from './parts/preview';
+
+// TODO: refactor to merge the similar parts between production and development server?
+async function runProductionServer() {
+  const root = process.cwd();
+
+  // TODO: error handling for file reading
+  const apps = JSON.parse(
+    await fs.readFile(path.join(root, 'build/nerest-manifest.json'), {
+      encoding: 'utf-8',
+    })
+  ) as Record<string, AppEntry>;
+
+  const components = import.meta.glob('/apps/*/index.tsx', {
+    import: 'default',
+    eager: true,
+  }) as Record<string, React.ComponentType>;
+
+  const app = fastify();
+
+  // Setup schema validation. We have to use our own ajv instance that
+  // we can use both to validate request bodies and examples against
+  // app schemas
+  app.setValidatorCompiler(({ schema }) => validator.compile(schema));
+
+  await setupSwagger(app);
+
+  for (const appEntry of Object.values(apps)) {
+    const { name, examples, schema, assets } = appEntry;
+    const component = components[`/apps/${name}/index.tsx`];
+
+    const routeOptions: RouteShorthandOptions = {};
+
+    // TODO: report error if schema is missing, unless this app is client-only
+    // TODO: disallow apps without schemas in production build
+    if (schema) {
+      routeOptions.schema = {
+        // Use description as Swagger summary, since summary is visible
+        // even when the route is collapsed in the UI
+        summary: schema.description as string,
+        // TODO: do we need to mix in examples like in the development server?
+        body: schema,
+      };
+    }
+
+    // POST /api/{name} -> render app with request.body as props
+    app.post(`/api/${name}`, routeOptions, (request) =>
+      renderApp(
+        { name, assets, component },
+        request.body as Record<string, unknown>
+      )
+    );
+
+    for (const [exampleName, example] of Object.entries(examples)) {
+      // GET /api/{name}/examples/{example} -> render a preview page
+      // with a predefined example body
+      const exampleRoute = `/api/${name}/examples/${exampleName}`;
+      app.get(
+        exampleRoute,
+        {
+          schema: {
+            // Add a clickable link to the example route in route's Swagger
+            // description so it's easier to navigate to
+            description: `Open sandbox: [${exampleRoute}](${exampleRoute})`,
+          },
+        },
+        async (_, reply) => {
+          const { html, assets: outAssets } = renderApp(
+            {
+              name,
+              assets,
+              component,
+            },
+            example as Record<string, unknown>
+          );
+
+          reply.type('text/html');
+
+          return renderPreviewPage(html, outAssets);
+        }
+      );
+    }
+  }
+
+  // TODO: remove hardcoded port
+  await app.listen({
+    host: '0.0.0.0',
+    port: 3000,
+  });
+
+  console.log('Nerest is listening on 0.0.0.0:3000');
+}
+
+runProductionServer();

package/dist/client/entry.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/client/entry.js

@@ -1,3 +0,0 @@
-const apps = import.meta.glob('/apps/*/index.tsx', { import: 'default' });
-console.log(apps);
-export {};

package/dist/server/app-parts/assets.d.ts

@@ -1,2 +0,0 @@
-import type { Manifest } from 'vite';
-export declare function loadAppAssets(manifest: Manifest, appName: string): string[];

package/dist/server/app-parts/assets.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadAppAssets = void 0;
-// TODO: this is not as simple in the real world
-const publicPath = process.env.PUBLIC_PATH ?? 'http://0.0.0.0:3000/';
-// Extracts the list of assets for a given app from the manifest file
-function loadAppAssets(manifest, appName) {
-    const entries = Object.entries(manifest);
-    // TODO: handling errors and potentially missing entries
-    const clientEntryJs = entries.find(([_, entry]) => entry.isEntry)?.[1].file;
-    const appCss = entries.find(([name, _]) => name.includes(`/${appName}/index.tsx`))?.[1]
-        .css ?? [];
-    return [clientEntryJs, ...appCss].map((x) => publicPath + x);
-}
-exports.loadAppAssets = loadAppAssets;

package/dist/server/app-parts/preview.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderPreviewPage = void 0;
-function renderPreviewPage(html, assets) {
-    const { scripts, styles } = mapAssets(assets);
-    return `
-  <html>
-  <head>
-    ${styles.join('\n')}
-  </head>
-  <body>
-    ${html}
-    ${scripts.join('\n')}
-  </body>
-  </html>
-  `;
-}
-exports.renderPreviewPage = renderPreviewPage;
-function mapAssets(assets) {
-    const scripts = assets
-        .filter((src) => src.endsWith('.js'))
-        .map((src) => `<script type="module" src="${src}"></script>`);
-    const styles = assets
-        .filter((src) => src.endsWith('.css'))
-        .map((src) => `<link rel="stylesheet" href="${src}">`);
-    return { scripts, styles };
-}

package/dist/server/assets.d.ts

@@ -1 +0,0 @@
-export declare function getAppAssets(appName: string, root: string): Promise<string[]>;

package/dist/server/assets.js

@@ -1,28 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAppAssets = void 0;
-const path_1 = __importDefault(require("path"));
-const promises_1 = __importDefault(require("fs/promises"));
-// TODO: way more complicated in the real world
-const publicPath = process.env.PUBLIC_PATH ?? 'http://127.0.0.1:3000/';
-async function getAppAssets(appName, root) {
-    const manifest = await loadManifest(root);
-    const assets = extractAssetsFromManifest(manifest, appName);
-    return assets.map((x) => publicPath + x);
-}
-exports.getAppAssets = getAppAssets;
-async function loadManifest(root) {
-    const manifestPath = path_1.default.join(root, 'dist', 'manifest.json');
-    const manifestData = await promises_1.default.readFile(manifestPath, { encoding: 'utf8' });
-    return JSON.parse(manifestData);
-}
-function extractAssetsFromManifest(manifest, appName) {
-    const entries = Object.entries(manifest);
-    const clientEntryJs = entries.find(([_, entry]) => entry.isEntry)?.[1].file;
-    const appCss = entries.find(([name, _]) => name.includes(`/${appName}/index.tsx`))?.[1]
-        .css ?? [];
-    return [clientEntryJs, ...appCss];
-}

package/dist/server/entry.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function renderSsrComponent(appName: string, AppComponent: React.ComponentType, props?: Record<string, unknown>): string;

package/dist/server/entry.js

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderSsrComponent = void 0;
-const react_1 = __importDefault(require("react"));
-const server_1 = require("react-dom/server");
-const nanoid_1 = require("nanoid");
-function renderSsrComponent(appName, AppComponent, props = {}) {
-    const html = (0, server_1.renderToString)(react_1.default.createElement(AppComponent, { ...props }));
-    const appId = (0, nanoid_1.nanoid)();
-    const container = `<div data-app-name="${appName}" data-app-id="${appId}">${html}</div>`;
-    const script = `<script type="application/json" data-app-id="${appId}">${JSON.stringify(props)}</script>`;
-    return container + script;
-}
-exports.renderSsrComponent = renderSsrComponent;

package/dist/server/index.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="node" />
-import type { ServerResponse } from 'http';
-export declare function createServer(): Promise<{
-    app: import("fastify").FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof ServerResponse>, import("http").IncomingMessage, ServerResponse<import("http").IncomingMessage>, import("fastify").FastifyBaseLogger, import("fastify").FastifyTypeProviderDefault> & PromiseLike<import("fastify").FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof ServerResponse>, import("http").IncomingMessage, ServerResponse<import("http").IncomingMessage>, import("fastify").FastifyBaseLogger, import("fastify").FastifyTypeProviderDefault>>;
-}>;

package/dist/server/preview.d.ts

@@ -1 +0,0 @@
-export declare function renderPreviewPage(html: string, assets: string[]): string;

package/dist/server/render.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { AppEntry } from './apps';
-export declare function renderApp(appEntry: AppEntry, appComponent: React.ComponentType, props?: Record<string, unknown>): {
-    html: string;
-    assets: string[];
-};

package/server/app-parts/assets.ts

@@ -1,17 +0,0 @@
-import type { Manifest } from 'vite';
-
-// TODO: this is not as simple in the real world
-const publicPath = process.env.PUBLIC_PATH ?? 'http://0.0.0.0:3000/';
-
-// Extracts the list of assets for a given app from the manifest file
-export function loadAppAssets(manifest: Manifest, appName: string) {
-  const entries = Object.entries(manifest);
-
-  // TODO: handling errors and potentially missing entries
-  const clientEntryJs = entries.find(([_, entry]) => entry.isEntry)?.[1].file;
-  const appCss =
-    entries.find(([name, _]) => name.includes(`/${appName}/index.tsx`))?.[1]
-      .css ?? [];
-
-  return [clientEntryJs, ...appCss].map((x) => publicPath + x);
-}