fastify-angular v1.3.0

fastify-angular

Fastify plugin for angular universal project w/ multiple locales.

Install

yarn add fastify-angular
or
npm install --save fastify-angular

Usage

Follow angular/universal-starter. Replace server.ts with following code.

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import * as fastify       from 'fastify';
import { enableProdMode } from '@angular/core';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

const PORT = +process.env.PORT || 4000;

// Fastify server
const app = fastify();

app
  .register(require('fastify-accepts'))
  .register(require('fastify-language-parser'), {
    order: ['header']
  })
  .register(require('fastify-angular'), {
    dist: __dirname,
    i18n: true,
    universal: true,
  })
  .listen(PORT, (err, address) => {
    if (err) {
      throw err;
    }
    console.log(`Node Fastify server listening on ${address}`);
  });

Options

This plugin allow you to specify options:

• dist optional. The dist folder path for angular output. For the recommended dist structure, __dirname should work. Default to ${process.pwd()}/dist.
• i18n boolean, optional. true for i18n project (multiple builds for each locale). Default to false.
• universal boolean, optional. true if this is an universal project (there will be a browser folder and a server folder under dist folder). Default to false.
• browser string, optional. browser folder for client side build.
• server string, optional. server folder for server side build.
• origin string, optional. Server origin which will be passed to angular as APP_BASE_HREF. Default to server address which determined after server started. e.g.: http://127.0.0.1:4000.

Recommend Dist Structure

dist
  |- browser
    |- en
      |- index.html
      |-...
    |- zh
      |- index.html
      |-...
  |- server
    |- en
      |- main.js
    |- zh
      |- main.js
  |- prerender.js
  |- server.js
  |- static.paths.js

Useful NPM Scripts

Scripts for Build for Multiple Locales

Use following scripts to build angular universal for multiple locales.

"build:ssr": "yarn build:bundle && yarn compile:server",
"compile:server": "tsc -p server.tsconfig.json",
"build:bundle": "DIST=dist CONF=production yarn build:i18n",
"build:i18n": "for lang in zh en; do LANG=$lang CONF=${CONF} DIST=${DIST} yarn build:lang:bundle; if [ $? -ne 0 ]; then echo ERROR; exit 666; fi; done",
"build:lang:bundle": "LANG=${LANG} CONF=${CONF} DIST=${DIST} yarn build:lang:browser && LANG=${LANG} CONF=${CONF} DIST=${DIST} yarn build:lang:server",
"build:lang:browser": "yarn build --configuration ${CONF} --output-path ${DIST}/browser/${LANG} --i18n-file src/locale/messages.${LANG}.xlf --i18n-locale ${LANG} --base-href /${LANG}/ ",
"build:lang:server": "ng run ng-universal-demo:server:${CONF} --output-path ${DIST}/server/${LANG}  --i18n-file src/locale/messages.${LANG}.xlf --i18n-locale ${LANG}",

yarn build:ssr will create dist folder as recommended above.

Scripts for Extract i18n

"xi18n": "yarn xi18n:aot && yarn xi18n:jit",
"xi18n:aot": "ng xi18n --i18n-locale en && xliffmerge --profile xliffmerge.json",
"xi18n:jit": "ngx-extractor -i \"src/**/*.ts\" -f xlf2 -o src/locale/runtime/messages.xlf -l en && xliffmerge --profile xliffmerge.runtime.json",

Use ngx-i18nsupport for better angular i18n workflow.