Builder
Usage
# Build application
<pm> run build
# Build application for production
<pm> run build:prod
Steps
Setup
- Copy files in temporary
dist-build directory
- with the markdown feature: compile the
markdownSources folders into /generated/*.json manifests
Base steps
- Add tags to
index.html (script, stylesheet) and validate it. It must contain an id="app" element when the app uses the router (the router mounts views into it) or generateSEOFiles (pages are prerendered into it).
- Validate application routes - fail if duplicates are found. Skipped when no app code imports
routes.ts and generateSEOFiles is off: an app that mounts its components without the router needs no routes file.
- Merge HTML templates: each
.html template goes into its component or view, in place of __TEMPLATE_PLACEHOLDER__
- Compile TypeScript (type-checking only in production). It runs on the merged files, so the expressions in
.html templates are type-checked too; errors are reported at their .html file and line. tsc runs on dist-build through a generated dist-build/tsconfig.json that extends yours (removed at the end of the build)
- Minify HTML templates
- Compile styles (including Tailwind CSS with
tailwind option enabled)
- with i18n option enabled: Merge locales into a single
.json file
- Run esbuild: bundles the app into
bundle.js (minified in production). Each dynamic import() becomes a separate chunk in chunks/, only downloaded the first time it runs; that's how lazy routes work. Code shared by several chunks goes into its own chunk too.
Production-only steps
- Hash files (except
chunks/, whose names esbuild already hashes, and the copied src/app/src/core sources)
- with generateSEOFiles option enabled: Generate static
.html files for routes configured in config/seo.json
- Compress files in Gzip (
.gz) and Brotli (.br) formats, last, so prerendered pages, index.html, sitemap.xml and robots.txt are compressed too (the copied sources aren't)
- Remove unused folders and
nutin.config.js.
Final step
- Rename
dist-build to dist
Notes
- You can configure SASS paths to be compiled in
nutin.config.js.
- You can configure ESBuild options in
nutin.config.js.
- The browser bundle only gets the runtime part of
nutin.config.js: the tooling-only keys (builder, testinNutin, dockerPorts, markdownSources) are left out.
- If you need new asset formats to be included in the built output, add them in
tools/builder/app/binary-extensions.js.