https://github.com/stackpress/reactus
Reactive React Template Engine
https://github.com/stackpress/reactus
Last synced: about 1 year ago
JSON representation
Reactive React Template Engine
- Host: GitHub
- URL: https://github.com/stackpress/reactus
- Owner: stackpress
- License: apache-2.0
- Created: 2025-03-14T12:06:05.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-30T07:48:02.000Z (about 1 year ago)
- Last Synced: 2025-03-30T07:51:14.207Z (about 1 year ago)
- Language: TypeScript
- Size: 493 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ☢️ Reactus
[](https://www.npmjs.com/package/reactus)
[](https://github.com/stackpress/reactus/commits/main/)
[](https://github.com/stackpress/reactus/blob/main/LICENSE)
Reactive React Template Engine
## Install
```bash
npm i -D typescript ts-node tsx @types/node @types/react @types/react-dom
npm i reactus react react-dom
```
## Development Server
The following example shows how to use reactus in development mode
with `node:http`. Create a `server.ts` file in your project root
with the following code.
```js
import { createServer } from 'node:http';
import { dev } from 'reactus';
const engine = dev({ cwd: process.cwd() });
const server = createServer(async (req, res) => {
//handles public, assets and hmr
await engine.http(req, res);
//if middleware was triggered
if (res.headersSent) return;
// home page
if (req.url === '/') {
res.setHeader('Content-Type', 'text/html');
res.end(await engine.render('@/home', { title: 'Home' }));
return;
}
res.end('404 Not Found');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});
```
Then create a `home.tsx` file in your project root
with the following code.
```js
export default function HomePage() {
return (
<>
Reactus
This is the Reactus template engine
>
)
}
```
Next start the server and visit `http://localhost:3000/`.
```bash
$ npx tsx server.ts
```
### Development Configuration
The following are valid options you can use during development.
```js
type DevelopConfig = {
//base path (used in vite)
basePath: string,
//client script route prefix used in the document markup
//ie. /client/[id][extname]
//
//
clientRoute: string,
//template wrapper for the client script (tsx)
clientTemplate: string,
//filepath to a global css file
cssFile?: string,
//current working directory
cwd: string,
//template wrapper for the document markup (html)
documentTemplate: string,
//file system
fs?: FileSystem,
//vite plugins
plugins: PluginOption[],
//original vite options (overrides other settings related to vite)
vite?: ViteConfig,
//ignore files in watch mode
watchIgnore?: string[]
}
```
## Building Files
The following example shows how to use reactus to build your files
for production use. Create a `build.ts` file in your project root
with the following code.
```js
import path from 'node:path';
import { build } from 'reactus';
const cwd = process.cwd();
const engine = build({
cwd,
//path where to save assets (css, images, etc)
assetPath: path.join(cwd, 'public/assets'),
//path where to save and load (live) the client scripts (js)
clientPath: path.join(cwd, 'public/client'),
//path where to save and load (live) the server script (js)
pagePath: path.join(cwd, '.build/pages')
});
//add page templates to build
await engine.set('@/home');
//build everything
const responses = [
...await engine.buildAllClients(),
...await engine.buildAllAssets(),
...await engine.buildAllPages()
].map(response => {
const results = response.results;
if (typeof results?.contents === 'string') {
results.contents = results.contents.substring(0, 100) + ' ...';
}
return results;
});
console.log(responses);
```
Next run the build.
```bash
$ npx tsx build.ts
```
### Build Configuration
The following are valid options you can use during build.
```js
type BuildConfig = {
//path where to save assets (css, images, etc)
assetPath: string,
//base path (used in vite)
basePath: string,
//path where to save the client scripts (js)
clientPath: string,
//template wrapper for the client script (tsx)
clientTemplate: string,
//filepath to a global css file
cssFile?: string,
//current working directory
cwd: string,
//file system
fs?: FileSystem,
//path where to save and load (live) the server script (js)
pagePath: string,
//template wrapper for the page script (tsx)
pageTemplate: string,
//vite plugins
plugins: PluginOption[],
}
```
## Previewing Production
The following example shows how to use reactus to preview your build
files with `node:http`, that will be used in production before you
deploy. Install `sirv` to serve static assets.
```bash
$ npm i sirv
```
Next, create a `preview.ts` file in your project root with the
following code.
```js
import { createServer } from 'node:http';
import path from 'node:path';
import sirv from 'sirv';
import { serve } from 'reactus';
const cwd = process.cwd();
const engine = serve({
cwd,
//ie. /client/[id][extname]
//
//
clientRoute: '/client',
//css route prefix used in the document markup
//ie. /assets/[id][extname]
//
//
cssRoute: '/assets',
//path where to load the server script (js)
pagePath: path.join(cwd, '.build/pages')
});
// Init `sirv` handler
const assets = sirv(path.join(cwd, 'public'), {
maxAge: 31536000, // 1Y
immutable: true
});
const server = createServer(async (req, res) => {
// home page
if (req.url === '/') {
res.setHeader('Content-Type', 'text/html');
res.end(await engine.render('@/home'));
return;
}
//static asset server
assets(req, res);
//if static asset was triggered
if (res.headersSent) return;
res.end('404 Not Found');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});
```
Next start the server and visit `http://localhost:3000/`.
```bash
$ npx tsx preview.ts
```
### Preview Configuration
The following are valid options you can use during preview.
```js
type ProductionConfig = {
//client script route prefix used in the document markup
//ie. /client/[id][extname]
//
//
clientRoute: string,
//style route prefix used in the document markup
//ie. /assets/[id][extname]
//
//
cssRoute: string,
//current working directory
cwd: string,
//template wrapper for the document markup (html)
documentTemplate: string,
//file system
fs?: FileSystem,
//path where to save and load (live) the server script (js)
pagePath: string,
//template wrapper for the page script (tsx)
//vite plugins
plugins: PluginOption[]
}
```
See [examples](https://github.com/stackpress/reactus/tree/main/examples)
for more examples with **TailwindCSS** and **UnoCSS**.