feat(schematics): add prerendering scripts to express-schematic #1206

MarkPieszak · 2019-07-19T20:39:17Z

Prerendering Added
Sitemap auto creation for prerendering
- Has "hostname" where you prepend your URL for all routes (https://mysite.com) etc
Updated webpack, tsconfig conditionally if prerendering is skipped
Basic prerender script setup
- Errors in prerendering get propagated so if anything goes wrong it won't finish.

routes.json
Routes create sitemap.xml for prerendering.

Example:

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

vikerman · 2019-07-23T19:18:12Z

Please see if you can add an option to the schematics to just add the prender parts - So that it can be added to an existing Universal project.

…ously installed schematics

MarkPieszak · 2019-07-23T19:41:01Z

Added Flag --prerenderOnly (defaults to False), to only add prerender scripts, file, and add the needed exports to main.server @vikerman

alan-agius4 · 2019-08-13T10:12:01Z

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

-  "include": ["<%= stripTsExtension(serverFileName) %>.ts"]
+  "include": [
+    "<%= stripTsExtension(serverFileName) %>.ts",
+    "<%= stripTsExtension(prerenderFileName) %>.ts"


Shouldn't this be excluded when using skipPrerender?

I cannot find anywhere were an existing the server.tsconfig is being modified, since when not using skipUniversal option the tsconfig will be created by the @schematics/angular universal schematic.

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

Line 292 in 2aeb2ba

noop() : externalSchematic('@schematics/angular', 'universal', options),

https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/universal/files/root/__tsconfigFileName__.json.template

alan-agius4 · 2019-08-13T10:12:04Z

modules/express-engine/schematics/install/files/root/webpack.server.config.js

-    server: './<%= stripTsExtension(serverFileName) %>.ts'
+    server: './<%= stripTsExtension(serverFileName) %>.ts',
+    // This is our script for Static Prerendering
+    prerender: './<%= stripTsExtension(prerenderFileName) %>.ts'


Shouldn't this be excluded when using skipPrerender?

Yes it should, let me know if I did the templating incorrectly, I couldn't find many good examples within other CLI schematics! :)

<%= skipPrerender ? '' : '"<%= stripTsExtension(prerenderFileName) %>.ts"' %>

alan-agius4 · 2019-08-13T10:19:51Z

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

@@ -16,5 +16,7 @@
      "dom"
    ]
  },
-  "include": ["<%= stripTsExtension(serverFileName) %>.ts"]
+  "include": [


You are missing the closing ]

Thank you, fixed!

alan-agius4 · 2019-08-13T10:24:48Z

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

+  }
+
+  // Writes rendered HTML to index.html, replacing the file if it already exists.
+  previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {


If there is an error here, would this throw with unhandled promise rejection?

Yes it actually throws it regardless, which is great! For example a (<any>window).test = '123'; thrown in an app components code (that will pass ng build, etc) will throw an error when trying to build the prerender like shown below.

alan-agius4 · 2019-08-20T15:51:20Z

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

+import {join} from 'path';
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP, provideModuleMap, renderModuleFactory, enableProdMode} = require('./<%= getServerDistDirectory() %>/main');


Aren't renderModuleFactory, enableProdMode in @angular/platform-server and @angular/core?

Yes they are but they're actually exported in the server/main.ts file. This prevents us from having 2 copies of Angular.
Something @vikerman actually figured out!

alan-agius4 · 2019-09-03T13:06:33Z

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

@@ -16,5 +16,8 @@
      "dom"
    ]
  },
-  "include": ["<%= stripTsExtension(serverFileName) %>.ts"]
+  "include": [
+    "<%= stripTsExtension(serverFileName) %>.ts"<%= skipPrerender ? '' : ',' %>


This can be simplified a bit.

"include": [ "<%= stripTsExtension(serverFileName) %>.ts"<% if (!skipPrerender) { %>, <%= stripTsExtension(prerenderFileName) %>.ts"<% } %> ]

You can do if's 😆 🤦‍♂
I was working on this way way too early this morning!
Let me clean this up

Haha happens to me as well 😜

Fixed everything thanks again Alan, great catches :)

alan-agius4 · 2019-09-03T13:07:03Z

modules/express-engine/schematics/install/files/root/webpack.server.config.js

+    server: './<%= stripTsExtension(serverFileName) %>.ts',
+    <%= skipPrerender ? "" : "// This is our script for Static Prerendering" %>
+    <%= skipPrerender ? "" : "prerender: './<%= stripTsExtension(prerenderFileName) %>.ts'"
+


Nit: remove extra line

alan-agius4 · 2019-09-03T13:10:15Z

modules/express-engine/schematics/install/files/root/webpack.server.config.js

@@ -7,7 +7,10 @@ module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
-    server: './<%= stripTsExtension(serverFileName) %>.ts'
+    server: './<%= stripTsExtension(serverFileName) %>.ts',
+    <%= skipPrerender ? "" : "// This is our script for Static Prerendering" %>


Same here

entry: { // This is our Express server for Dynamic universal server: './<%= stripTsExtension(serverFileName) %>.ts'<% if(!skipPrerender) { %>, // This is our script for Static Prerendering "prerender": './<%= stripTsExtension(prerenderFileName) %>.ts' %><% } %> },

alan-agius4 · 2019-09-04T10:57:40Z

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

@@ -194,12 +219,16 @@ function addExports(options: UniversalOptions): Rule {
    const mainSourceFile = getTsSourceFile(host, mainPath);
    let mainText = getTsSourceText(host, mainPath);
    const mainRecorder = host.beginUpdate(mainPath);
+    const enableProdModeExport = generateExport(mainSourceFile, ['enableProdMode'],


Nit: we should actually check if these exports already exists prior to adding them. Since, we will add these exports in the universal schematics as well

alan-agius4 · 2019-09-04T11:47:36Z

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

@@ -194,12 +219,16 @@ function addExports(options: UniversalOptions): Rule {
    const mainSourceFile = getTsSourceFile(host, mainPath);
    let mainText = getTsSourceText(host, mainPath);
    const mainRecorder = host.beginUpdate(mainPath);
+    const enableProdModeExport = generateExport(mainSourceFile, ['enableProdMode'],
+      '@angular/core');
+    const renderModuleFactoryExport = generateExport(mainSourceFile, ['renderModuleFactory'],


Will this target version 8 or 9? Is so probable we should change renderModuleFactory to renderModule

Some more context here: angular/angular-cli#15517

Actually regarding the later two comments if we wait for version 9 you don’t need to add them because they will be adde by default in the cli version 9.

Also, for existing project I will do a migration to add these exports

alan-agius4 · 2019-09-04T12:43:17Z

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

+const routeData = require('./routes.json');
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();


Is this still needed since it's already defined in main.server.ts?

alan-agius4 · 2019-09-04T13:43:42Z

modules/express-engine/schematics/install/schema.json

@@ -25,6 +25,11 @@
      "format": "path",


skipPrerender doesn't seem to be defined in the schema.

vikerman · 2019-12-06T17:37:30Z

Superseded by #1357

angular-automatic-lock-bot · 2020-01-06T08:02:27Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

initial schematic additions

49c446e

googlebot added the cla: yes label Jul 19, 2019

add package scripts

723274d

MarkPieszak requested review from vikerman and CaerusKaru and removed request for vikerman July 19, 2019 20:55

MarkPieszak marked this pull request as ready for review July 19, 2019 20:55

vikerman suggested changes Jul 23, 2019

View reviewed changes

modules/express-engine/schematics/install/files/root/__prerenderFileName@stripTsExtension__.ts Outdated Show resolved Hide resolved

fix: ensure we create exports within main.server for prerendering

74439c0

vikerman suggested changes Jul 23, 2019

View reviewed changes

modules/express-engine/schematics/install/files/root/__prerenderFileName@stripTsExtension__.ts Outdated Show resolved Hide resolved

MarkPieszak added 2 commits July 23, 2019 14:59

move angular core import to main.server

7d2a286

clean up npm scripts

722f3dd

vikerman approved these changes Jul 23, 2019

View reviewed changes

feat: add prerendering-only ability for schematic to install on previ…

b1defe3

…ously installed schematics

fix: update flag to --prerenderOnly

2aeb2ba

alan-agius4 reviewed Aug 13, 2019

View reviewed changes

alan-agius4 reviewed Aug 20, 2019

View reviewed changes

MarkPieszak added 2 commits September 3, 2019 07:14

fix templating

bff5e73

add route.json and sitemap builder for prerendering

ea2853a

alan-agius4 reviewed Sep 3, 2019

View reviewed changes

MarkPieszak added 2 commits September 3, 2019 14:39

fix template ifs

7cf2c46

cleanup sitemap generator

9edda23

alan-agius4 reviewed Sep 4, 2019

View reviewed changes

MarkPieszak mentioned this pull request Sep 17, 2019

Guide/Universal: Describe how to pre-generate HTML files angular/angular#23024

Closed

kuncevic mentioned this pull request Sep 24, 2019

(docs): angular universal prerender #1254

Closed

KingDarBoja mentioned this pull request Nov 11, 2019

[Bug/Enhancement] Update prerendering script maciejtreder/ng-toolkit#724

Closed

vikerman closed this Dec 6, 2019

chrisguttandin mentioned this pull request Dec 7, 2019

npx error chrisguttandin/angular-prerender#25

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 6, 2020

CaerusKaru deleted the feat/express-schematic-prerendering branch January 6, 2020 20:58

feat(schematics): add prerendering scripts to express-schematic #1206

feat(schematics): add prerendering scripts to express-schematic #1206

Uh oh!

Conversation

MarkPieszak commented Jul 19, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vikerman commented Jul 23, 2019

Uh oh!

MarkPieszak commented Jul 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MarkPieszak Sep 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vikerman commented Dec 6, 2019

Uh oh!

angular-automatic-lock-bot bot commented Jan 6, 2020

Uh oh!

Uh oh!

MarkPieszak commented Jul 19, 2019 •

edited

Loading

MarkPieszak commented Jul 23, 2019 •

edited

Loading

MarkPieszak Sep 3, 2019 •

edited

Loading