feat: bundle and build using CLI server builder

Author: alan-agius4

modules/common/BUILD.bazel

@@ -23,6 +23,7 @@ ng_package(
     name = "npm_package",
     srcs = [":package.json"],
     entry_point = ":index.ts",
+    packages = ["//modules/common/schematics:npm_package"],
     readme_md = ":README.md",
     tags = ["release"],
     deps = [

modules/common/package.json

@@ -14,6 +14,7 @@
   "ng-update": {
     "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
   },
+  "schematics": "./schematics/collection.json",
   "repository": {
     "type": "git",
     "url": "https://github.com/angular/universal"

modules/common/schematics/BUILD.bazel

@@ -0,0 +1,61 @@
+load("//tools:defaults.bzl", "jasmine_node_test", "ng_test_library", "npm_package", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "schematics_assets",
+    srcs = glob([
+        "**/files/**/*",
+        "**/*.json",
+    ]),
+)
+
+ts_library(
+    name = "schematics",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "**/files/**/*",
+        ],
+    ),
+    module_name = "@nguniversal/common/schematics",
+    tsconfig = ":tsconfig.json",
+    deps = [
+        "@npm//@angular-devkit/core",
+        "@npm//@angular-devkit/schematics",
+        "@npm//@schematics/angular",
+        "@npm//@types/jasmine",
+        "@npm//rxjs",
+        "@npm//typescript",
+    ],
+)
+
+# This package is intended to be combined into the main @nguniversal/common 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"],
+)
+
+ng_test_library(
+    name = "schematics_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/files/**/*"],
+    ),
+    tsconfig = ":tsconfig.json",
+    deps = [
+        ":schematics",
+        "@npm//@angular-devkit/core",
+        "@npm//@angular-devkit/schematics",
+        "@npm//@schematics/angular",
+    ],
+)

modules/common/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "install": {
+      "description": "Adds Angular Universal to the application.",
+      "factory": "./install",
+      "schema": "./install/schema.json"
+    }
+  }
+}

modules/common/schematics/install/index.spec.ts

@@ -0,0 +1,55 @@
+/**
+ * @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 {Tree} from '@angular-devkit/schematics';
+import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
+
+import {collectionPath, createTestApp} from '../testing/test-app';
+
+import {Schema as UniversalOptions} from './schema';
+
+describe('Universal Schematic', () => {
+  const defaultOptions: UniversalOptions = {
+    clientProject: 'bar',
+  };
+
+  let schematicRunner: SchematicTestRunner;
+  let appTree: Tree;
+
+  beforeEach(async () => {
+    appTree = await createTestApp().toPromise();
+    schematicRunner = new SchematicTestRunner('schematics', collectionPath);
+  });
+
+  it('should update angular.json', async () => {
+    const tree = await schematicRunner
+      .runSchematicAsync('install', defaultOptions, appTree)
+      .toPromise();
+    const contents = JSON.parse(tree.readContent('angular.json'));
+    const architect = contents.projects.bar.architect;
+    expect(architect.build.configurations.production).toBeDefined();
+    expect(architect.build.options.outputPath).toBe('dist/bar/browser');
+    expect(architect.server.options.outputPath).toBe('dist/bar/server');
+
+    const productionConfig = architect.server.configurations.production;
+    expect(productionConfig.fileReplacements).toBeDefined();
+    expect(productionConfig.sourceMap).toBeDefined();
+    expect(productionConfig.optimization).toBeDefined();
+  });
+
+  it(`should update 'tsconfig.server.json' files with main file`, async () => {
+    const tree = await schematicRunner
+      .runSchematicAsync('install', defaultOptions, appTree)
+      .toPromise();
+
+    const contents = JSON.parse(tree.readContent('/projects/bar/tsconfig.server.json'));
+    expect(contents.files).toEqual([
+      'src/main.server.ts',
+      'server.ts',
+    ]);
+  });
+});

modules/common/schematics/install/index.ts

@@ -0,0 +1,131 @@
+/**
+ * @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 {
+  chain,
+  externalSchematic,
+  Rule,
+  SchematicsException,
+} from '@angular-devkit/schematics';
+import {normalize, join, parseJsonAst, JsonParseMode} from '@angular-devkit/core';
+import {updateWorkspace} from '@schematics/angular/utility/workspace';
+import {
+  findPropertyInAstObject,
+  appendValueInAstArray,
+} from '@schematics/angular/utility/json-utils';
+import {Schema as UniversalOptions} from './schema';
+import {stripTsExtension, getDistPaths, getClientProject} from './utils';
+
+function addScriptsRule(options: UniversalOptions): Rule {
+  return async host => {
+    const pkgPath = '/package.json';
+    const buffer = host.read(pkgPath);
+    if (buffer === null) {
+      throw new SchematicsException('Could not find package.json');
+    }
+
+    const {server: serverDist} = await getDistPaths(host, options.clientProject);
+    const pkg = JSON.parse(buffer.toString());
+    pkg.scripts = {
+      ...pkg.scripts,
+      'serve:ssr': `node ${serverDist}/main.js`,
+      'build:ssr': 'npm run build:client-and-server-bundles',
+      // tslint:disable-next-line: max-line-length
+      'build:client-and-server-bundles': `ng build --prod && ng run ${options.clientProject}:server:production`,
+    };
+
+    host.overwrite(pkgPath, JSON.stringify(pkg, null, 2));
+  };
+}
+
+function updateConfigFileRule(options: UniversalOptions): Rule {
+  return host => {
+    return updateWorkspace((async workspace => {
+      const clientProject = workspace.projects.get(options.clientProject);
+      if (clientProject) {
+        const buildTarget = clientProject.targets.get('build');
+        const serverTarget = clientProject.targets.get('server');
+
+        // We have to check if the project config has a server target, because
+        // if the Universal step in this schematic isn't run, it can't be guaranteed
+        // to exist
+        if (!serverTarget || !buildTarget) {
+          return;
+        }
+
+        const distPaths = await getDistPaths(host, options.clientProject);
+
+        serverTarget.options = {
+          ...serverTarget.options,
+          outputPath: distPaths.server,
+        };
+
+        serverTarget.options.main = join(
+          normalize(clientProject.root),
+          stripTsExtension(options.serverFileName) + '.ts',
+        );
+
+        buildTarget.options = {
+          ...buildTarget.options,
+          outputPath: distPaths.browser,
+        };
+      }
+    })) as unknown as Rule;
+  };
+}
+
+function updateServerTsConfigRule(options: UniversalOptions): Rule {
+  return async host => {
+    const clientProject = await getClientProject(host, options.clientProject);
+    const serverTarget = clientProject.targets.get('server');
+    if (!serverTarget || !serverTarget.options) {
+      return;
+    }
+
+    const tsConfigPath = serverTarget.options.tsConfig;
+    if (!tsConfigPath || typeof tsConfigPath !== 'string') {
+      // No tsconfig path
+      return;
+    }
+
+    const configBuffer = host.read(tsConfigPath);
+    if (!configBuffer) {
+      throw new SchematicsException(`Could not find (${tsConfigPath})`);
+    }
+
+    const content = configBuffer.toString();
+    const tsConfigAst = parseJsonAst(content, JsonParseMode.Loose);
+    if (!tsConfigAst || tsConfigAst.kind !== 'object') {
+      throw new SchematicsException(`Invalid JSON AST Object (${tsConfigPath})`);
+    }
+
+    const filesAstNode = findPropertyInAstObject(tsConfigAst, 'files');
+
+    if (filesAstNode && filesAstNode.kind === 'array') {
+      const recorder = host.beginUpdate(tsConfigPath);
+
+      appendValueInAstArray(
+        recorder,
+        filesAstNode,
+        stripTsExtension(options.serverFileName) + '.ts',
+      );
+
+      host.commitUpdate(recorder);
+    }
+  };
+}
+
+export default function (options: UniversalOptions): Rule {
+  return () => {
+    return chain([
+      externalSchematic('@schematics/angular', 'universal', options),
+      addScriptsRule(options),
+      updateServerTsConfigRule(options),
+      updateConfigFileRule(options),
+    ]);
+  };
+}

modules/common/schematics/install/schema.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "SchematicsCommonInstall",
+  "title": "Common Install Options Schema",
+  "type": "object",
+  "properties": {
+    "clientProject": {
+      "type": "string",
+      "description": "Name of related client app."
+    },
+    "appId": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The appId to use withServerTransition.",
+      "default": "serverApp"
+    },
+    "main": {
+      "type": "string",
+      "format": "path",
+      "description": "The name of the main entry-point file.",
+      "default": "main.server.ts"
+    },
+    "serverFileName": {
+      "type": "string",
+      "default": "server.ts",
+      "description": "The name of the server file."
+    },
+    "tsconfigFileName": {
+      "type": "string",
+      "default": "tsconfig.server",
+      "description": "The name of the TypeScript configuration file."
+    },
+    "appDir": {
+      "type": "string",
+      "format": "path",
+      "description": "The name of the application directory.",
+      "default": "app"
+    },
+    "rootModuleFileName": {
+      "type": "string",
+      "format": "path",
+      "description": "The name of the root module file",
+      "default": "app.server.module.ts"
+    },
+    "rootModuleClassName": {
+      "type": "string",
+      "description": "The name of the root module class.",
+      "default": "AppServerModule"
+    },
+    "skipInstall": {
+      "description": "Skip installing dependency packages.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "clientProject"
+  ]
+}

modules/common/schematics/install/schema.ts

@@ -0,0 +1,46 @@
+/**
+ * @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
+ */
+
+export interface Schema {
+  /**
+   * Name or index of related client app.
+   */
+  clientProject: string;
+  /**
+   * The appId to use withServerTransition.
+   */
+  appId?: string;
+  /**
+   * The name of the main entry-point file.
+   */
+  main?: string;
+  /**
+   * The name of the server file.
+   */
+  serverFileName?: string;
+  /**
+   * The name of the TypeScript configuration file.
+   */
+  tsconfigFileName?: string;
+  /**
+   * The name of the application directory.
+   */
+  appDir?: string;
+  /**
+   * The name of the root module file
+   */
+  rootModuleFileName?: string;
+  /**
+   * The name of the root module class.
+   */
+  rootModuleClassName?: string;
+  /**
+   * Skip installing dependency packages.
+   */
+  skipInstall?: boolean;
+}