About Sergeant
A lightweight micro-services producing deno-[p]react SSG-first SEO-friendly framework.
- Produces bundles within seconds for 100s of apps.
- Cross-compile from multiple projects
- Supports scss
- Scaffolding
- Has livereload
- denocacheusage: 10MB only, bundle sizes less than 20KB (if u use preact), and 200KB for react.
Compare this with 200MB-400MB node_modules for a react hello world project.
Sergeant is production ready from Day-1
✨ Sergeant 🫡 A front-end microservices framework!
███████╗███████╗██████╗ ██████╗ ███████╗ █████╗ ███╗ ██╗████████╗
██╔════╝██╔════╝██╔══██╗██╔════╝ ██╔════╝██╔══██╗████╗ ██║╚══██╔══╝
███████╗█████╗ ██████╔╝██║ ███╗█████╗ ███████║██╔██╗ ██║ ██║
╚════██║██╔══╝ ██╔══██╗██║ ██║██╔══╝ ██╔══██║██║╚██╗██║ ██║
███████║███████╗██║ ██║╚██████╔╝███████╗██║ ██║██║ ╚████║ ██║
╚══════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠃⠀⠀⠘⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⢀⣾⣷⡀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁⠀⣰⣿⡟⢻⣿⣆⠀⠈⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⡿⠟⠁⠀⣠⣾⣿⠋⠀⠀⠙⣿⣷⣄⠀⠈⠻⢿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⠀⠀⣠⣾⣿⠟⠁⢀⣴⣦⡀⠈⠻⣿⣷⣄⡀⠀⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣴⣿⣿⡿⠋⠀⣠⣾⡿⢿⣷⣄⠀⠙⢿⣿⣿⣦⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⠟⠋⠀⢀⣼⣿⠟⠀⠀⠻⣿⣷⡀⠀⠙⠻⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⠁⠀⣠⣴⣿⡿⠁⠀⣠⣄⠀⠘⢿⣿⣶⣄⠀⠈⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣤⣾⣿⡿⠋⠀⢀⣾⣿⣿⣷⡀⠀⠙⢿⣿⣷⣤⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⢀⣴⣿⣿⣿⣿⣿⣿⣦⡀⠀⠙⢿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⠉⠀⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡀⠀⠉⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣠⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣄⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
Building enabled apps:
Building: apps/app2
apps/app2/dist/app-esbuild.main.js 160 KB
Building: apps/app1
apps/app1/dist/app-esbuild.main.js 10 KB
Done
Philosophy
- No breaking changes (versioned imports)
- SSG over SSR
- Always bundle to one-file for 1-SPA
More...
- Support bundling multiple apps, SPAs via micro-services / app-routing
- Support progressive and offline apps
Commands
sergeant
sergeant build
sergeant serve
sergeant serve --dev
Install
Only need deno to install sergeant (esbuild is automatically imported):
sergeant
deno install -A -f -n sergeant https://cdn.jsdelivr.net/gh/scriptmaster/sergeant/sergeant.ts
Only need deno and sergeant and you can do sergeant or sergeant serve
Build All apps:
sergeant build
Live Dev Server all apps:
sergeant serve
Build specific app:
sergeant build
Live Dev Server specific app:
sergeant serve
Installing Deno
https://docs.deno.com/runtime/manual/getting_started/installation
Windows x64:
Using PowerShell (Windows): irm https://deno.land/install.ps1 | iex
Or Using Chocolatey:
choco install deno
MacOS: brew install deno
Deno Plugins:
Uses: https://github.com/scriptmaster/esbuild_deno_loader https://deno.land/x/esbuild_plugin_sass_deno https://github.com/esbuild/community-plugins#plugins-for-deno
Security of packages
How packages are downloaded?
Packages are primarily downloaded as ESM modules from https://esm.sh/package/ (instead of registry.npmjs.org).
- It can be swapped to use enterprise ESM packages repository.
- Packages
The package can be looked up in ./vendor/ and ./node_modules/ in the format mod.ts index.mjs index.cjs index.js
DI
React Context API is an incorrect implementation of a simple DI with prop drilling. In apps containing 20+ dependencies to provider, the context pattern could become 20+ nested nodes.
DI enables you to directly provide the service/implementation for the consumer.
deno.json
Extra watch dirs
Create app level deno.json and configure watching extra deps:
{ "watch": "emeraldcss" }
denopkg.com
To use GitHub as a package registry for Deno, you only need to replace github.com with denopkg.com like this: https://denopkg.com/user/repo or repo@tag/path/to/file
Example:
import { opn } from 'https://denopkg.com/hashrock/deno-opn/opn.ts' opn('https://denopkg.com')