Talk for online webcast at Front-Bay Meetup

1. Janet Maldonado
@rianet

2. 1. Traditional Page Vs SPAs
2. The problem
3. What is Angular Universal?
4. Pre-Requisites
5. How to set it up
6. Demo
7. References
What we’ll cover

3. Traditional Page vs SPA
Initial Request
HTML
Form POST
HTML
CLIENT
SERVER
Initial Request
HTML
XHR
JSON
CLIENT
SERVER
refresh

4. The Problem

5. Stats
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

6. What is Angular
Universal?
SEO
Fast
Load
“Server-side Rendering for
Angular apps”.
It’s the middleware that
sits between node.js and
Angular.
UX

7. Pre-requisites

8. 0. Create your angular app and install
@angular/platform-server
1. Prepare your app for Universal rendering
2. Create a server main file and tsconfig to
build it
3. Create a new project in .angular-cli.json
4. Create your server to test it
How to set it up?

9. 0. Create your angular app and
Install @angular/platform-server
$ ng new app-universal-demo
$ cd app-universal-demo
$ npm install
Make sure you have angular-cli 1.3 installed
Platform server should be same version as other angular packages
$ npm install --save-dev @angular/platform-server

10. 1. Prepare your app for Universal
rendering
src/app/app.module.ts: src/app/app.server.module.ts:

11. 2. Create a server main file and
tsconfig to build it
src/main.server.ts: src/tsconfig.server.json:

12. 3. Create a new app in .angular-cli.json
Build the project:
# This builds the client application in
dist/
$ ng build --prod
# This builds the server bundle in dist-
server/
$ ng build --prod --app 1
.angular-cli.json:

13. 4. Create your server to test it
Build the project:
$ node server
server.js:
Run the server:

14. 1.Angular docs
[https://angular.io/docs]
2. Angular-cli
[https://github.com/angular/angular-cli]
3. Angular-universal
[https://universal.angular.io]
4. Express
[https://expressjs.com]
Referencias