@lamnhan/ngxer

Tool for prerendering Angular apps

Usage no npm install needed!

<script type="module">
  import lamnhanNgxer from 'https://cdn.skypack.dev/@lamnhan/ngxer';
</script>

README

Getting started

Install globally:

npm install -g @lamnhan/ngxer

Init the project:

ngxer init

Or, using npx:

npx @lamnhan/ngxer init

Edit .ngxerrc.json, then generate content:

ngxer generate

This 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 init

The 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>', '

Command overview

Tool for prerendering Angular apps

Command reference

generate

Generate static content.

Usage:

ngxer generate
ngxer g

init

Add ngxer to a project.

Usage:

ngxer init [projectPath]
ngxer i [projectPath]

Parameters:

  • [projectPath]: Custom path to the project

remove

Remove a generated content.

Usage:

ngxer remove <paths...> --keep-cache
ngxer x <paths...> --keep-cache

Parameters:

  • <paths...>: List of paths to be removed

Options:

  • -k, --keep-cache: Remove HTML file, but keep cache.

report

Show generated statistics.

Usage:

ngxer report --detail
ngxer r --detail

Options:

  • -d, --detail: Show detail.

update

Update a static.

Usage:

ngxer update <paths...> --live
ngxer u <paths...> --live

Parameters:

  • <paths...>: List of paths to be updated

Options:

  • -l, --live: Re-rendering with live data.

help

Display help.

Usage:

ngxer help

*

Any other command is not suppoted.

Usage:

ngxer <cmd>

License

@lamnhan/ngxer is released under the MIT license.