This is the Reactus template engine
\n \n )\n}\n```\n\nNext start the server and visit `http://localhost:3000/`.\n\n```bash\n$ npx tsx server.ts\n```\n\n\n### Development Configuration\n\nThe following are valid options you can use during development.\n\n```js\ntype DevelopConfig = {\n //base path (used in vite)\n basePath: string,\n //client script route prefix used in the document markup\n //ie. /client/[id][extname]\n //\n //\n clientRoute: string,\n //template wrapper for the client script (tsx)\n clientTemplate: string,\n //filepath to a global css file\n cssFile?: string,\n //current working directory\n cwd: string,\n //template wrapper for the document markup (html)\n documentTemplate: string,\n //file system\n fs?: FileSystem,\n //vite plugins\n plugins: PluginOption[],\n //original vite options (overrides other settings related to vite)\n vite?: ViteConfig,\n //ignore files in watch mode\n watchIgnore?: string[]\n}\n```\n\n\n## Building Files\n\nThe following example shows how to use reactus to build your files \nfor production use. Create a `build.ts` file in your project root \nwith the following code.\n\n```js\nimport path from 'node:path';\nimport { build } from 'reactus';\n\nconst cwd = process.cwd();\nconst engine = build({\n cwd,\n //path where to save assets (css, images, etc)\n assetPath: path.join(cwd, 'public/assets'),\n //path where to save and load (live) the client scripts (js)\n clientPath: path.join(cwd, 'public/client'),\n //path where to save and load (live) the server script (js)\n pagePath: path.join(cwd, '.build/pages')\n});\n\n//add page templates to build\nawait engine.set('@/home');\n\n//build everything\nconst responses = [\n ...await engine.buildAllClients(),\n ...await engine.buildAllAssets(),\n ...await engine.buildAllPages()\n].map(response => {\n const results = response.results;\n if (typeof results?.contents === 'string') {\n results.contents = results.contents.substring(0, 100) + ' ...';\n }\n return results;\n});\n\nconsole.log(responses);\n```\n\nNext run the build.\n\n```bash\n$ npx tsx build.ts\n```\n\n### Build Configuration\n\nThe following are valid options you can use during build.\n\n```js\ntype BuildConfig = {\n //path where to save assets (css, images, etc)\n assetPath: string,\n //base path (used in vite)\n basePath: string,\n //path where to save the client scripts (js)\n clientPath: string,\n //template wrapper for the client script (tsx)\n clientTemplate: string,\n //filepath to a global css file\n cssFile?: string,\n //current working directory\n cwd: string,\n //file system\n fs?: FileSystem,\n //path where to save and load (live) the server script (js)\n pagePath: string,\n //template wrapper for the page script (tsx)\n pageTemplate: string,\n //vite plugins\n plugins: PluginOption[],\n}\n```\n\n## Previewing Production\n\nThe following example shows how to use reactus to preview your build \nfiles with `node:http`, that will be used in production before you \ndeploy. Install `sirv` to serve static assets.\n\n```bash\n$ npm i sirv\n```\n\nNext, create a `preview.ts` file in your project root with the \nfollowing code.\n\n```js\nimport { createServer } from 'node:http';\nimport path from 'node:path';\nimport sirv from 'sirv';\nimport { serve } from 'reactus';\n\nconst cwd = process.cwd();\nconst engine = serve({\n cwd,\n //ie. /client/[id][extname]\n //\n //\n clientRoute: '/client',\n //css route prefix used in the document markup\n //ie. /assets/[id][extname]\n //\n //\n cssRoute: '/assets',\n //path where to load the server script (js)\n pagePath: path.join(cwd, '.build/pages')\n});\n// Init `sirv` handler\nconst assets = sirv(path.join(cwd, 'public'), {\n maxAge: 31536000, // 1Y\n immutable: true\n});\n\nconst server = createServer(async (req, res) => {\n // home page\n if (req.url === '/') {\n res.setHeader('Content-Type', 'text/html');\n res.end(await engine.render('@/home'));\n return;\n }\n //static asset server\n assets(req, res);\n //if static asset was triggered\n if (res.headersSent) return;\n res.end('404 Not Found');\n});\n\nserver.listen(3000, () => {\n console.log('Server running at http://localhost:3000/');\n});\n```\n\nNext start the server and visit `http://localhost:3000/`.\n\n```bash\n$ npx tsx preview.ts\n```\n\n### Preview Configuration\n\nThe following are valid options you can use during preview.\n\n```js\ntype ProductionConfig = {\n //client script route prefix used in the document markup\n //ie. /client/[id][extname]\n //\n //\n clientRoute: string,\n //style route prefix used in the document markup\n //ie. /assets/[id][extname]\n //\n //\n cssRoute: string,\n //current working directory\n cwd: string,\n //template wrapper for the document markup (html)\n documentTemplate: string,\n //file system\n fs?: FileSystem,\n //path where to save and load (live) the server script (js)\n pagePath: string,\n //template wrapper for the page script (tsx)\n //vite plugins\n plugins: PluginOption[]\n}\n```\n\nSee [examples](https://github.com/stackpress/reactus/tree/main/examples)\nfor more examples with **TailwindCSS** and **UnoCSS**.","readmeFilename":"README.md"}