The Era of Single-Page Applications

Course prerequisites

Introduction

Application overview

Setting up the Project

Building the backend

Setting up MongoDB

Building the API - querying products

Building the API - user interaction

User Authentication

Building the Products Service

Deploying and Measuring Performance

Building the app

Angular Universal

Applying Universal Schematics

Measuring Performance

Adding Internationalization with SSR - The Browser Is Not The Server

Robots and Sitemap

Applying Angular Universal

Using Secrets with Angular Universal

Querying the Database from Angular

Server-Specific Service

Working With Cookies in Angular

Noscript

Browser vs. Server

Introducing TransferState

TransferHttpCacheModule

Handling long-running API calls

Transfering data between server and browser

Installing Redis

Redis middleware

Tuning the application

Caching with Redis

Unit Tests - Stubbing PLATFORM_ID

Unit Tests - long-running API calls

Unit Tests - server-specific services

E2E - testing TransferState

E2E - Mocking MongoDB

Testing

Module Overview

Prerendering Angular application

Summary

Prerendering

Comparing --prod Universal & Prerender

In this course, we'll create a complete Angular application that is Server-Side-Rendered with Angular Universal.

The application will be optimized for the best possible performance and will be tuned for real-world production use. For example, we'll use Redis for server-side caching, create protected routes, and get great SEO benefits with a snappy user experience.

![](https://s3.amazonaws.com/assets.fullstack.io/n/20201111013120117_features%402x.png)

This course is 40+ lessons where we walk through a step-by-step tutorial to optimize an Angular app from a [Lighthouse score](https://web.dev/performance-scoring/) of 66 (the default) to a blazing-fast score of 95 (!)

The problem with "normal" Angular apps is that they don't run until our user has downloaded the entire application - but with SSR, we'll _render our Angular app on the server_.

**The result is that your app will load super-fast, you'll improve your SEO, you will delight your users.**

Along the way, we'll learn production deployment techniques like:

* how to use a CDN (Content Delivery Network) for global performance and 
* how to deploy to Heroku and retrieve data from a MongoDB database
* How to measure and improve metrics like time-to-first-byte and time to first-contentful-paint
* How to add data like internationalization with SSR
* How to manage **security** and **secrets** in your SSR build
* How **fetch server-side queries from the database**
* How to use `TransferState` to eliminate duplicate client-side queries
* How to _test_ server-side rendered apps
* How to pre-render static pages

By the end of this course you'll understand how to create Angular apps with real-world, production-level performance.

Master Production-Ready SSR and Deployments with Angular

In this course I'll show you how to enhance existing Angular application with Angular Universal, how to optimize its performance and what are Server-Side Rendering best practices. You'll see how to improve PageSpeed Insights score from 66 to 95 points!

The newline Guide to Angular Universal

How to make SEO friendly Angular application

What problems Angular Universal can solve

How to integrate Angular Universal application with MongoDB and Redis cache

Preparing server-specific Angular services and logic paths in the server and browser common code

How to create transfer data between server and browser using TransferState

Importance of optimizing server-side REST calls

How to manipulatie Angular application <title> and <meta> tags

How to Unit test and e2e test Angular Universal application

How to prepare your application for prerendering

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Featured Podcast

A Software Engineer's Guide to Venture Capital with AngelList Engineer Sumukh Sridhara

The newline Guide to Angular Universal

Welcome: Introduction

Introduction:

Start Here

Introduction:

The Era of Single-Page Applications

Introduction:

Course prerequisites

Module 1: Building the app

Lesson 1:

Application overview

Lesson 2:

Setting up the Project

Lesson 3:

Building the backend

Lesson 4:

Setting up MongoDB

Lesson 5:

Building the API - querying products

Lesson 6:

Building the API - user interaction

Lesson 7:

User Authentication

Lesson 8:

Building the Products Service

Lesson 9:

Deploying and Measuring Performance

Module 2: Applying Angular Universal

Lesson 1:

Angular Universal

Lesson 2:

Applying Universal Schematics

Lesson 3:

Measuring Performance

Lesson 4:

Adding Internationalization with SSR - The Browser Is Not The Server

Lesson 5:

Robots and Sitemap

Lesson 6:

SEO

Module 3: Browser vs. Server

Lesson 1:

Using Secrets with Angular Universal

Lesson 2:

Querying the Database from Angular

Lesson 3:

Server-Specific Service

Lesson 4:

Working With Cookies in Angular

Lesson 5:

Noscript

Module 4: Transfering data between server and browser

Lesson 1:

Introducing TransferState

Lesson 2:

TransferHttpCacheModule

Lesson 3:

Handling long-running API calls

Module 5: Caching with Redis

Lesson 1:

Installing Redis

Lesson 2:

Redis middleware

Lesson 3:

Tuning the application

Module 6: Testing

Lesson 1:

Unit Tests - Stubbing PLATFORM_ID

Lesson 2:

Unit Tests - long-running API calls

Lesson 3:

Unit Tests - server-specific services