Getting Started

1. Create an Angular workspace

ng add @nguniversal/express-engine

2. After creating an Angular project, go to its directory and type in these command in the terminal to install Angular Universal

ng add @nguniversal/express-engine

3. Test if the Server Sider rendering is working in the browser

ng add @nguniversal/express-engine

Note: there are automatically added scripts for SSR and you can view it under package.json.

4. Packages were added for Universal

app.component.ts

import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'angularPractice';
  
  constructor (
    @Inject(PLATFORM_ID) private platformId: Object
  ) { }
  
  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      console.log('Run in the browser, Insert code - Good for localstorage or browser only API');
    }
  }
}

---

Deploy to Node JS Server

Easy way to build server side code. Use Nest JS

ng add @nestjs/ng-universal

You need to host the SSR in any Node JS server like AWS ElasticBeanstalk, Heroku or Firebase Cloud Function

To these hosts, you need to upload your dist/ folder along with the package.json file. On the web server, you then have to ensure that npm install is executed, followed by npm serve:ssr.

---

Deploying to Firebase using Cloud Functions

Preparations

● Test the live served app on localhost:4200 (login, database access etc.)

● Stop the server (Ctrl + C)

● Test the SSR functionality by running npm run build:ssr and npm run serve:ssr (localhost:4000).

● Stop the server (Ctrl + C).

Install Firebase Tools and initialize the project

● If you didn't install the Firebase Command Line Tools already before, run npm install -g firebase-tools

● Run firebase login, providing your Firebase credentials (email/password) if requested.

● Run firebase init

Answer some questions

● Are you ready to proceed?

Type y and hit ENTER.

● "Which firebase CLI features do you want to setup?"

Choose ...

(*) Functions
(*) Hosting

Click and drag to move ... , selecting both with the SPACE key, and hitting ENTER.

"Select a default Firebase project for this directory?"

Select one with the ARROW keys and hit ENTER.

"What language would you like to use to write Cloud Functions?"

Select TypeScript with the ARROW keys and hit ENTER.

"Do you want to use TSLint?"

Type y and hit ENTER.

"Do you want to install dependencies with npm now?"

Type y and hit ENTER.

"What do you want to use as your public directory?"

Type dist/browser and hit ENTER (Please note: this is different from deploying an app without Universal!).

"Configure as a single page app?"

Type y and hit ENTER.

File index.html already exists. Overwrite?

Type n (important!) and hit ENTER.

Fold/Unfold the project in your IDE so that all new files are visible.

---

Modify Files ...

1. In firebase.json replace "destination": "/index.html" by "function": "ssr"

2. In server.ts, add export to the app initialization: export const app = express();

and comment out the last three lines app.listen(...)

3. In webpack.server.config.js, add two new entries to output like this:

output: {
  path: path.join(__dirname, 'dist'),
  library: 'app',
  libraryTarget: 'umd',
  filename: '[name].js',
},

4. Rebuild your app running npm run build:ssr.

5. In the terminal move to the functions folder: cd functions

6. Install an npm package for filesystem access: npm i fs-extra

7. Inside the functions folder create a new file named copy-angular-app.js, with this content:

  const fs = require('fs-extra');
  s.copy('../dist', './dist');

8. In functions/package.json, (not in the project's package.json!) change the build entry like this:

"build": "node copy-angular-app && tsc",

9. In functions/src/index.ts, replace the default comment by these lines (keeping the import in line 1):

const universal = require(`${process.cwd()}/dist/server`).app;
export const ssr = functions.https.onRequest(universal);

10. In the terminal make sure that you are in the functions directory, and there run npm run build to copy the dist folder into the functions folder.

---

Deploy your app

● You can serve your app locally before deployment, on localhost:5000, by running firebase serve (if you want).

● Stop the server Ctrl + C.

● Then you can deploy the app by running firebase deploy and visit it via the url which is displayed in the terminal.