@lamnhan/ngxer v0.0.6
@lamnhan/ngxer
Tool for prerendering Angular apps
- Getting started
- This is this for?
- How does it do it?
- Tutorials
- Command overview
- Command reference
- Detail API reference
Getting started
Install globally:
npm install -g @lamnhan/ngxerInit the project:
ngxer initOr, using npx:
npx @lamnhan/ngxer initEdit .ngxerrc.json, then generate content:
ngxer generateThis is this for?
This tool is use to preprender Angular apps, so that you do not need to use SSR and can be deploy to any static hosting.
- No SSR needed
- I18N prerender
- Firebase Hosting i18n supported
- No script and legacy client
- In-app splashcreen
- Prerender data forwading
- Site map generation
How does it do it?
The CLI read your configs from .ngxerrc.json file. The out property is where the ng build outputs the app to be deployed.
Then, it read the index.html and extract all the info of your app, styles and scripts. The index.html will be use as a template for outputing other static files.
For path rendering, you provide the path to a route. The CLI launch a server and browse to the url using Puppeteer, it extract the page content, everything inside router-outlet. Then save the final static file to its proper location.
For database rendering, the CLI fetch documents from a collection, then save HTML files to their locations.
It also output the sitemap.xml if you want.
Tutorials
Hint, use can avoid theses steps by using pre-build app with Mola.
See an example project at: https://github.com/themolacms/starter-blank
Prerequirement
Only ANGULAR, you hear me right the Angular gang.
Database render only support Firestore for now.
Database document schema must follow @lamnhan/schemata.
Add config
ngxer initThe file .ngxerrc.json is added to the project root.
Open the file and set out path and app url:
{
"out": "...",
"url": "..."
}Modify index.html
See the example: https://github.com/themolacms/starter-blank/blob/main/src/index.html
Add schema to html the tag:
<html itemscope itemtype="http://schema.org/WebPage" lang="en"></html>Add all the meta tags, see the example above:
<!-- Meta tags -->
<meta name="description" content="The Starter Blank theme preview." />
<link rel="canonical" href="https://starter-blank-preview.lamnhan.com/" />
<!-- ... -->Note, same property tags must have the same value. For example, the tag name="description" and itemprop="description" have the same value. Tip: use VSCode Ctrl+D to select and replace all.
Modify app.component.html
The main page content must be put under a main tag, this should be the only main tag in your application.
<main id="page-container">
<router-outlet></router-outlet>
</main>Not recommended, if not you must specify the contentBetweens for page content extraction, again, the tag should be unique:
{
"contentBetweens": ['</router-outlet>', 'Tool for prerendering Angular apps
ngxer generate|gngxer init|i [projectPath]ngxer remove|x <paths...> --keep-cachengxer report|r --detailngxer update|u <paths...> --livengxer helpngxer *
Generate static content.
Usage:
ngxer generate
ngxer gAdd ngxer to a project.
Usage:
ngxer init [projectPath]
ngxer i [projectPath]Parameters:
[projectPath]: Custom path to the project
Remove a generated content.
Usage:
ngxer remove <paths...> --keep-cache
ngxer x <paths...> --keep-cacheParameters:
<paths...>: List of paths to be removed
Options:
-k, --keep-cache: Remove HTML file, but keep cache.
Show generated statistics.
Usage:
ngxer report --detail
ngxer r --detailOptions:
-d, --detail: Show detail.
Update a static.
Usage:
ngxer update <paths...> --live
ngxer u <paths...> --liveParameters:
<paths...>: List of paths to be updated
Options:
-l, --live: Re-rendering with live data.
Display help.
Usage:
ngxer helpAny other command is not suppoted.
Usage:
ngxer <cmd>License
@lamnhan/ngxer is released under the MIT license.