feat: Use prerender and dynamic render #8

Author: Gorniv

Dockerfile.ssr

@@ -4,6 +4,7 @@ COPY . /app
 WORKDIR /app
 RUN npm install
 RUN npm run build:universal
+RUN npm run generate:prerender
 
 FROM node:8-alpine
 

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "ssr": "npm run build:universal && npm run server",
+    "ssr": "npm run build:universal && npm run generate:prerender && npm run server",
     "ssr:debug": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true  && ng run universal-demo:server:dev && webpack && node server.js",
     "ssr:cw": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true --watch",
     "ssr:sw": "ng run universal-demo:server:dev --watch",

prerender.ts

@@ -57,7 +57,11 @@ ROUTES.forEach(route => {
 
     // Make sure the directory structure is there
     if (!existsSync(fullPath)) {
-        mkdirSync(fullPath);
+        let syncpath = BROWSER_FOLDER;
+        route.split('/').forEach(element => {
+            syncpath = syncpath + '/' + element;
+            mkdirSync(syncpath);
+        });
     }
 
     // Writes rendered HTML to index.html, replacing the file if it already exists.

server.ts

@@ -35,6 +35,7 @@ const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(`./dist-server/mai
 import { ngExpressEngine } from '@nguniversal/express-engine';
 import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
 const PORT = process.env.PORT || 4000;
+import { ROUTES } from './static.paths';
 
 enableProdMode();
 
@@ -88,6 +89,7 @@ app.set('view engine', 'html');
 app.set('views', 'src');
 
 app.get('*.*', express.static(path.join(__dirname, '.', 'dist')));
+app.get(ROUTES, express.static(path.join(__dirname, '.', 'static')));
 
 app.get('*', (req, res) => {
   global['navigator'] = req['headers']['user-agent'];

src/app/app.routing.ts

@@ -10,6 +10,7 @@ const routes: Routes = [
       { path: 'home', loadChildren: './home/home.module#HomeModule' },
       { path: 'mock', loadChildren: './mock-server-browser/mock-server-browser.module#MockServerBrowserModule' },
       { path: 'back', loadChildren: './transfer-back/transfer-back.module#TransferBackModule' },
+      { path: 'static/back', loadChildren: './transfer-back/transfer-back.module#TransferBackModule' },
       { path: '**', loadChildren: './not-found/not-found.module#NotFoundModule' },
     ]
   }

src/app/home/home.component.html

@@ -1,3 +1,2 @@
 <h1>{{ "home.title" | translate }}</h1>
-<p>{{ "home.text" | translate }}</p>
-
+<p>{{ "home.text" | translate }}</p>

src/app/shared/layouts/sidebar/sidebar.component.ts

@@ -4,6 +4,7 @@ const LINKS: any[] = [
   { link: '/home', name: 'home', icon: 'home' },
   { link: '/mock', name: 'mock', icon: 'info_outline' },
   { link: '/back', name: 'back-http', icon: 'swap_vert' },
+  { link: '/static/back', name: 'static-back-http', icon: 'swap_vert' },
 ];
 
 @Component({

src/assets/i18n/en.json

@@ -3,7 +3,8 @@
   "sidebar": {
     "home": "Home",
     "mock": "Mock",
-    "back-http": "Back http"
+    "back-http": "Back http",
+    "static-back-http": "Static `Back http`"
   },
   "home": {
     "title": "Home page",

src/assets/i18n/ru.json

@@ -3,7 +3,8 @@
   "sidebar": {
     "home": "Главная",
     "mock": "Мокап",
-    "back-http": "Http на бэк"
+    "back-http": "Http на бэк",
+    "static-back-http": "Статическая `Http на бэк`"
   },
   "home": {
     "title": "Главная страница",

static.paths.ts

@@ -1,4 +1,3 @@
 export const ROUTES = [
-  '/',
-  '/back',
+  '/static/back',
 ];