feat(express-engine): add schematics (#1051)

* Adds schematics to the Express Engine that allow
for easier installation. This is basically an
enhanced version of the vanilla Universal schematic
that is available by default, where this one adds
the Express Engine, a sample Express server, as well
as some other necessary dependencies
* Credit to @devversion on the Material team for the
entire Bazel setup

Fixes #968

Author: CaerusKaru

BUILD.bazel

@@ -14,16 +14,20 @@ alias(
 node_modules_filegroup(
     name = "node_modules",
     packages = [
+        "bytebuffer",
         "express",
         "hapi",
         "jasmine",
+        "protobufjs",
         "rxjs",
         "tsickle",
         "tslib",
         "tsutils",
         "typescript",
         "zone.js",
         "@angular",
+        "@angular-devkit",
+        "@schematics",
         "@types",
     ],
 )

modules/express-engine/BUILD.bazel

@@ -21,6 +21,7 @@ ng_package(
         ":package.json",
     ],
     entry_point = "modules/express-engine/index.js",
+    packages = ["//modules/express-engine/schematics:npm_package"],
     readme_md = ":README.md",
     deps = [
         ":express-engine",

modules/express-engine/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-server": "NG_VERSION",
     "express": "EXPRESS_VERSION"
   },
+  "schematics": "./schematics/collection.json",
   "ng-update": {
     "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
   },

modules/express-engine/schematics/BUILD.bazel

@@ -0,0 +1,57 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library", "npm_package")
+load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
+
+filegroup(
+    name = "schematics_assets",
+    srcs = glob([
+        "**/files/**/*",
+        "**/*.json",
+    ]) + [
+        "README.md",
+    ],
+)
+
+ts_library(
+    name = "schematics",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "**/files/**/*",
+            "test-setup/**/*",
+        ],
+    ),
+    module_name = "@nguniversal/express-engine/schematics",
+    tsconfig = ":tsconfig.json",
+)
+
+# This package is intended to be combined into the main @nguniversal/express-engine package as a dep.
+npm_package(
+    name = "npm_package",
+    srcs = [":schematics_assets"],
+    deps = [":schematics"],
+)
+
+### Testing rules
+
+jasmine_node_test(
+    name = "unit_tests",
+    srcs = [":schematics_test_sources"],
+    data = [":schematics_assets"],
+)
+
+ts_library(
+    name = "schematics_test_sources",
+    testonly = True,
+    srcs = glob(
+        [
+            "**/*.spec.ts",
+            "test-setup/**/*.ts",
+        ],
+        exclude = ["**/files/**/*"],
+    ),
+    tsconfig = ":tsconfig.json",
+    deps = [":schematics"],
+)

modules/express-engine/schematics/README.md

@@ -0,0 +1,13 @@
+# Angular Universal Express-Engine Schematics
+A collection of Schematics for Angular Universal Express-Engine.
+
+## Collection
+
+### Install
+Adds Angular Universal Express Engine and its dependencies and pre-configures the application. 
+
+- Runs the default Angular Universal schematic to add Universal capabilities to an application
+- Adds Express-Engine, NgModule-Factory-Loader, ts-loader, and webpack to `package.json`
+- Adds a sample Express server file
+
+Command: `ng add @nguniversal/express-engine`

modules/express-engine/schematics/collection.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds Angular Universal Express Engine to the application without affecting any templates",
+      "factory": "./install",
+      "schema": "./install/schema.json",
+      "aliases": ["express-engine-shell"]
+    },
+  }
+}

modules/express-engine/schematics/install/files/root/__serverFileName@stripTsExtension__.ts

@@ -0,0 +1,50 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import {enableProdMode} from '@angular/core';
+// Express Engine
+import {ngExpressEngine} from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
+
+import * as express from 'express';
+import {join} from 'path';
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || <%= serverPort %>;
+const DIST_FOLDER = join(process.cwd(), 'dist');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./server/main');
+
+// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));
+
+app.set('view engine', 'html');
+app.set('views', join(DIST_FOLDER, 'browser'));
+
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Server static files from /browser
+app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
+  maxAge: '1y'
+}));
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});

modules/express-engine/schematics/install/files/root/__serverFileName@stripTsExtension__.tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  },
+  "include": ["<%= stripTsExtension(serverFileName) %>.ts"]
+}

modules/express-engine/schematics/install/index.spec.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
+import {Schema as UniversalOptions} from './schema';
+import {collectionPath, createTestApp} from '../test-setup/test-app';
+import {Tree} from '@angular-devkit/schematics';
+
+describe('Universal Schematic', () => {
+  const defaultOptions: UniversalOptions = {
+    clientProject: 'bar',
+  };
+
+  let schematicRunner: SchematicTestRunner;
+  let appTree: Tree;
+
+  beforeEach(() => {
+    appTree = createTestApp();
+    schematicRunner = new SchematicTestRunner('schematics', collectionPath);
+  });
+
+  it('should add dependency: @nguniversal/module-map-ngfactory-loader', () => {
+    const tree = schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    const filePath = '/package.json';
+    const contents = tree.readContent(filePath);
+    expect(contents).toMatch(/\"@nguniversal\/module-map-ngfactory-loader\": \"/);
+  });
+
+  it('should add dependency: @nguniversal/express-engine', () => {
+    const tree = schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    const filePath = '/package.json';
+    const contents = tree.readContent(filePath);
+    expect(contents).toMatch(/\"@nguniversal\/express-engine\": \"/);
+  });
+
+  it('should add dependency: express', () => {
+    const tree = schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    const filePath = '/package.json';
+    const contents = tree.readContent(filePath);
+    expect(contents).toMatch(/\"express\": \"/);
+  });
+
+  it('should install npm dependencies', () => {
+    schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    expect(schematicRunner.tasks.length).toBe(2);
+    expect(schematicRunner.tasks[0].name).toBe('node-package');
+    expect((schematicRunner.tasks[0].options as {command: string}).command).toBe('install');
+  });
+});

modules/express-engine/schematics/install/index.ts

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {
+  basename,
+  experimental,
+  join,
+  normalize,
+  parseJson,
+  strings,
+} from '@angular-devkit/core';
+import {
+  Rule,
+  SchematicContext,
+  SchematicsException,
+  Tree,
+  apply,
+  chain,
+  mergeWith,
+  move,
+  template,
+  url,
+  noop,
+  filter,
+  externalSchematic,
+} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
+import {getWorkspace} from '@schematics/angular/utility/config';
+import {Schema as UniversalOptions} from './schema';
+
+
+function getClientProject(
+  host: Tree, options: UniversalOptions,
+): experimental.workspace.WorkspaceProject {
+  const workspace = getWorkspace(host);
+  const clientProject = workspace.projects[options.clientProject];
+  if (!clientProject) {
+    throw new SchematicsException(`Client app ${options.clientProject} not found.`);
+  }
+
+  return clientProject;
+}
+
+function getClientArchitect(
+  host: Tree,
+  options: UniversalOptions,
+): experimental.workspace.WorkspaceTool {
+  const clientArchitect = getClientProject(host, options).architect;
+
+  if (!clientArchitect) {
+    throw new Error('Client project architect not found.');
+  }
+
+  return clientArchitect;
+}
+
+function addDependenciesAndScripts(options: UniversalOptions): Rule {
+  return (host: Tree) => {
+
+    const pkgPath = '/package.json';
+    const buffer = host.read(pkgPath);
+    if (buffer === null) {
+      throw new SchematicsException('Could not find package.json');
+    }
+
+    const pkg = JSON.parse(buffer.toString());
+
+    pkg.dependencies['@nguniversal/express-engine'] = '0.0.0-PLACEHOLDER';
+    pkg.dependencies['@nguniversal/module-map-ngfactory-loader'] = '0.0.0-PLACEHOLDER';
+    pkg.dependencies['express'] = 'EXPRESS_VERSION';
+
+    pkg.scripts['serve:ssr'] = 'node dist/server';
+    pkg.scripts['build:ssr'] = 'npm run build:client-and-server-bundles && npm run compile:server';
+    pkg.scripts['build:client-and-server-bundles'] =
+      `ng build --prod && ng run ${options.clientProject}:server:production`;
+    pkg.scripts['compile:server'] =
+      `tsc -p ${options.serverFileName.replace(/\.ts$/, '')}.tsconfig.json`;
+
+    host.overwrite(pkgPath, JSON.stringify(pkg, null, 2));
+
+    return host;
+  };
+}
+
+export default function (options: UniversalOptions): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    const clientProject = getClientProject(host, options);
+    if (clientProject.projectType !== 'application') {
+      throw new SchematicsException(`Universal requires a project type of "application".`);
+    }
+    const clientArchitect = getClientArchitect(host, options);
+    const tsConfigExtends = basename(clientArchitect.build.options.tsConfig);
+    const rootInSrc = clientProject.root === '';
+    const tsConfigDirectory = join(normalize(clientProject.root), rootInSrc ? 'src' : '');
+
+    if (!options.skipInstall) {
+      context.addTask(new NodePackageInstallTask());
+    }
+
+    const rootSource = apply(url('./files/root'), [
+      options.skipServer ? filter(path => !path.startsWith('__serverFileName')) : noop(),
+      template({
+        ...strings,
+        ...options as object,
+        stripTsExtension: (s: string) => { return s.replace(/\.ts$/, ''); },
+        tsConfigExtends,
+        rootInSrc,
+      }),
+      move(tsConfigDirectory),
+    ]);
+
+    return chain([
+      externalSchematic('@schematics/angular', 'universal', options),
+      mergeWith(rootSource),
+      addDependenciesAndScripts(options),
+    ]);
+  };
+}