@wix/origami-site-express 0.1.1 → 0.1.2

package/README.md

@@ -8,6 +8,8 @@ The site has no server code. Its scripts call the bin:
 | Script | Command | What it does |
 |---|---|---|
 | `yarn dev` | `origami-site-express dev` | Vite in middleware mode + Express + the core in dev mode: hot reload, live routing |
+| `yarn build` | `origami-site-express build` | Vite client build into `dist/client`, the route table into `dist/server/origami-routes.json` |
+| `yarn start` | `origami-site-express start` | Serves `dist/` with the core in prod mode. No Vite at runtime. Refuses to start without a matching build. |
 
 `PORT` sets the port (default 3000). `yarn dev` listens on `localhost` only, because it serves the site's source
 through Vite; set `HOST=0.0.0.0` to reach it from another machine or a container. `VITE_WIX_CLIENT_ID` and `VITE_WIX_METASITE_ID` come from `.env`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-express",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Run an exported Wix origami site on Node with Express and Vite.",
   "type": "module",
   "files": [
@@ -65,5 +65,5 @@
       ]
     }
   },
-  "falconPackageHash": "e086a1a7b335a7b5bb3e16de019acaf488e4463e5a1f1c51b567acab"
+  "falconPackageHash": "3470a27832e07e4b9235a2df50d0c09302d980f76639e8987884ee39"
 }

package/src/adapter/index.d.ts

@@ -1,4 +1,4 @@
 import type { OrigamiAdapter } from '@wix/origami-site/types'
 /** The adapter descriptor the CLI and the conformance suite load from `@wix/origami-site-express/adapter`. */
-declare const adapter: Omit<OrigamiAdapter, 'project'>
+declare const adapter: OrigamiAdapter
 export default adapter

package/src/adapter/index.js

@@ -1,12 +1,14 @@
 import { readFileSync } from 'node:fs'
 import { driver } from './driver.js'
+import { project } from './project.js'
 
 const pkg = JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8'))
 
-/** @type {Omit<import('@wix/origami-site/types').OrigamiAdapter, 'project'>} */
+/** @type {import('@wix/origami-site/types').OrigamiAdapter} */
 export default {
     name: pkg.name,
     version: pkg.version,
     framework: { name: 'express', range: pkg.dependencies.express },
+    project: ctx => project(ctx, pkg.version),
     conformance: driver,
 }

package/src/adapter/project.js

@@ -0,0 +1,19 @@
+/** What the CLI writes for an Express site. Pure: no file system or network.
+ * @param {import('@wix/origami-site/types').ProjectContext} ctx @param {string} version
+ * @returns {import('@wix/origami-site/types').ProjectFiles} */
+export function project(ctx, version) {
+    return {
+        files: {},
+        packageJson: {
+            scripts: { dev: 'origami-site-express dev', build: 'origami-site-express build', start: 'origami-site-express start' },
+            dependencies: { '@wix/origami-site': ctx.coreVersion, '@wix/origami-site-express': `^${version}` },
+        },
+        readme: `### Run the site
+- \`yarn dev\`: local server on http://localhost:3000 with hot reload.
+- \`yarn build\`: builds into \`dist/\`.
+- \`yarn start\`: serves the build. Set \`PORT\` to change the port.
+
+### Settings
+\`VITE_WIX_CLIENT_ID\` and \`VITE_WIX_METASITE_ID\` in \`.env\` are used by both the browser and the server.`,
+    }
+}

package/src/index.d.ts

@@ -1,3 +1,7 @@
 export type CommandOptions = { root: string }
 /** `origami-site-express dev`: Vite in middleware mode + Express + the core, live. */
 export function dev(options: CommandOptions): Promise<void>
+/** `origami-site-express build`: Vite client build into dist/client, route table into dist/server. */
+export function build(options: CommandOptions): Promise<void>
+/** `origami-site-express start`: serves the build with the core in prod mode. */
+export function start(options: CommandOptions): Promise<void>

package/src/index.js

@@ -1 +1,7 @@
-export { dev } from './server/dev.js'
+// Each command loads only its own module, so `start` never loads Vite.
+/** @type {typeof import('./index.js').dev} */
+export const dev = async options => (await import('./server/dev.js')).dev(options)
+/** @type {typeof import('./index.js').build} */
+export const build = async options => (await import('./server/build.js')).build(options)
+/** @type {typeof import('./index.js').start} */
+export const start = async options => (await import('./server/prod.js')).start(options)

package/src/server/build.js

@@ -0,0 +1,25 @@
+import { rm } from 'node:fs/promises'
+import { join } from 'node:path'
+import { build as viteBuild } from 'vite'
+import react from '@vitejs/plugin-react'
+import { importCoreBuild, importCoreServer } from './core.js'
+import { CLIENT_ENTRY } from './manifest.js'
+
+/** `origami-site-express build`: the Vite client build, then the route table it was built from.
+ * @param {{ root: string }} options */
+export async function build({ root }) {
+    const { readSiteTree, writeBuiltTable } = await importCoreServer(root)
+    const { origamiVitePlugins } = await importCoreBuild(root)
+    // One read: the browser's page list and the server's routes come from the same table.
+    const table = await readSiteTree(root)
+    // A build that fails after Vite replaced dist/client must not leave the old table for start to accept.
+    await rm(join(root, 'dist/server/origami-routes.json'), { force: true })
+    const siteTree = { table: async () => table, onTableChange: () => () => {} }
+    await viteBuild({
+        root, configFile: false, mode: 'production',
+        plugins: [...origamiVitePlugins({ root, siteTree }), react()],
+        build: { outDir: 'dist/client', emptyOutDir: true, manifest: true, rolldownOptions: { input: CLIENT_ENTRY } },
+    })
+    // Last, so a failed client build never leaves a table that start would accept.
+    await writeBuiltTable(join(root, 'dist/server'), table)
+}

package/src/server/env.js

@@ -10,6 +10,6 @@ export function siteOptions(env) {
 export const port = () => Number(process.env.PORT ?? 3000)
 
 /** Dev serves the site's source through Vite, so it stays on this machine unless HOST says otherwise.
- * 127.0.0.1, not localhost: on macOS localhost binds only ::1. Start listens on every interface, for Docker.
+ * 127.0.0.1, not localhost: on macOS localhost binds only ::1. Start listens on every interface so the deployed site is reachable.
  * @param {'dev' | 'prod'} mode */
 export const host = mode => process.env.HOST || (mode === 'dev' ? '127.0.0.1' : undefined)

package/src/server/manifest.js

@@ -0,0 +1,37 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+export const CLIENT_ENTRY = 'src/site/_generated/client.jsx'
+
+/** Reads dist/client/.vite/manifest.json once, and returns the asset tags for each page.
+ * @param {string} root */
+export function readManifest(root) {
+    /** @type {Record<string, { file: string, css?: string[], imports?: string[] }>} */
+    const manifest = JSON.parse(readFileSync(join(root, 'dist/client/.vite/manifest.json'), 'utf8'))
+    const entry = manifest[CLIENT_ENTRY]
+    if (!entry) throw new Error(`${CLIENT_ENTRY} is missing from the build manifest: run yarn build again.`)
+    /** The chunk, its static imports and all their CSS, imports' CSS first: the order Vite applies it in.
+     * @param {string} key */
+    const assets = (key, files = new Set(), css = new Set()) => {
+        const chunk = manifest[key]
+        if (!chunk || files.has(chunk.file)) return { files, css }
+        files.add(chunk.file)
+        for (const child of chunk.imports ?? []) assets(child, files, css)
+        for (const file of chunk.css ?? []) css.add(file)
+        return { files, css }
+    }
+    const shared = assets(CLIENT_ENTRY)
+    /** @param {{ itemPath?: string }} page */
+    return page => {
+        // The page chunk loads in parallel with the entry instead of after it. The built-in 404 has no itemPath: no preload.
+        const own = page.itemPath ? assets(`src/${page.itemPath}/_generated/index.jsx`) : { files: new Set(), css: new Set() }
+        const preload = [...shared.files, ...own.files].filter(file => file !== entry.file)
+        return {
+            head: [
+                ...[...new Set([...shared.css, ...own.css])].map(file => `<link rel="stylesheet" href="/${file}" />`),
+                ...[...new Set(preload)].map(file => `<link rel="modulepreload" href="/${file}" />`),
+            ].join('\n    '),
+            body: `<script type="module" src="/${entry.file}"></script>`,
+        }
+    }
+}

package/src/server/prod.js

@@ -0,0 +1,32 @@
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import { join } from 'node:path'
+import express from 'express'
+import { importCoreNode, importCoreServer } from './core.js'
+import { catchAll } from './bridge.js'
+import { pageHtml } from './shell.js'
+import { readManifest } from './manifest.js'
+import { port, siteOptions } from './env.js'
+import { serve } from './lifecycle.js'
+
+/** `origami-site-express start`: the build output and the core in prod mode. No Vite at runtime.
+ * @param {{ root: string }} options */
+export async function start({ root }) {
+    // Values already in process.env win, so the host's environment overrides .env.
+    if (existsSync(join(root, '.env'))) process.loadEnvFile(join(root, '.env'))
+    const { readBuiltTable, createSite, errorResponse, serializePageData } = await importCoreServer(root)
+    const node = await importCoreNode(root)
+    const table = await readBuiltTable(join(root, 'dist/server'))
+    const site = await createSite({ root, mode: 'prod', table, ...siteOptions(process.env) })
+    const assetsFor = readManifest(root)
+    const app = express()
+    app.disable('x-powered-by')
+    // index: false keeps / from serving a stray index.html; redirect: false lets /somedir reach the core.
+    app.use('/assets', express.static(join(root, 'dist/client/assets'), { index: false, redirect: false, maxAge: '1y', immutable: true }))
+    app.use(express.static(join(root, 'dist/client'), { index: false, redirect: false }))
+    app.use(catchAll({
+        mode: 'prod', errorResponse, node, getSite: async () => site,
+        renderPage: async resolution => pageHtml(resolution, { serializePageData, ...assetsFor(resolution.page) }),
+    }))
+    await serve(createServer(app), { port: port(), onClose: () => site.close() })
+}