The newline Guide to Angular Universal
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!
What You Will Learn
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
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.
This course is 40+ lessons where we walk through a step-by-step tutorial to optimize an Angular app from a Lighthouse score 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
TransferStateto 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.
The Era of Single-Page Applications
Introduction to Guide to Angular Universal
This lesson answers the questions "What do I need to accomplish the course?" "What software is needed?" "What should I know about Angular and other technologies?" "What should I do to accomplish the course offline?"
Building the app
Introduction to Newline guide to building a React App with MobX State Tree
Setup the base project for our Hooks deep dive examples.
Building the backend
In this lesson you will prepare the application backend an entry gate for communicating with persistance layer and hosting Angular application bundle.
Setting up MongoDB
Every application needs a persistence layer. This lesson will show you how to enroll for free Atlas cloud MongoDB instance. You will also feed your database with data.
Building the API - querying products
Once the database is set up and ready, you need to establish a connection with it. That's what you're going to do in this part of the course. Apart of that you will create backend API to get list of products and their descriptions.
Building the API - user interaction
We're building software for people, and we need to give them a way to communicate with it. This lesson will show you how to prepare an API for user interaction like loging in and adding products to list of favorites. Moreover you will be introduced to the security essentials like cookies encryption and password hashing.
When the backend is ready, it's time for frontend. In this lesson you will integrate user API with Angular. You will implement the user authentication flow.
Building the Products Service
Our application would be nothing without the data. In this course part you will display products images, description and prices in your Angular application.
Deploying and Measuring Performance
Every journey has some end. At the end of software development is production. It's time to deploy your application to Heroku and test with multiple tools how it performs.
Applying Angular Universal
In the previous module, you've built a fully functional production-ready application. Unfortunately, like other single-page applications, this application has its weaknesses. In this module, you will learn how to address one of them and render HTML content on the server.
Applying Universal Schematics
The easiest way to enhance your Angular project with new functionalities is to use Schematics - a set of instruction for CLI on how to change the project and install new dependencies. Let's do that with Angular Universal and review what Schematics did for us.
Once the application is said to be SEO friendly and performance optimized by schemtaics - let's check that in battlefield. In this lesson you will deploy your project to Heroku and measure its performance.
Adding Internationalization with SSR - The Browser Is Not The Server
Unfortunately, schematics are not a magic wand and they won't solve all of your problems. Sometimes your project needs to be adjusted to do not break Server-Side Rendering process. Here's what might go wrong, and how to address that.
Robots and Sitemap
In this lesson, you will add even more for SEO. Your application deserves robots.txt and proper sitemap.
Next step in SEO is to set up meta-tags. If you want to know how to do it in Angular, this lesson will help you to find the answer.
This lesson summarize what you've learned in this module; SEO & SSR
Browser vs. Server
Using Secrets with Angular Universal
Querying the Database from Angular
One of possible improvements is to perform queries against MongoDB directly from Angular Universal. In this lesson you will create a service which does this job.
Once your MongoService is in place, you need to prepare a server-equivalent of ProductsService. This service will query MongoService for products list and descriptions and embed those in the HTML rendered by Angular Universal.
Working With Cookies in Angular
Next step is to create a server-equivalent of service responsible for user interactions. This lesson will show you how to read HTTP requests in Angular, get cookies from it and decrypt them.
Transfering data between server and browser
Does it make sense to request products list from the back-end when it's already included in redered view? In this module, you will add a mechanism that embeds the data retrieved during rendering into the application bundle. As a result, the application initialized in the browser will use that data instead of querying the backend.
Say Hello to TransferState, a key-value registry that is passed along with the application bundle, from the server-side angular to the browser-side part of the application. In this lesson you will learn how frontend can get to know what backend has already do (ie retrieving data from DB); thanks to that you can avoid repeating those steps and offload your application backend.
Next step is to get know a TransferHttpCacheModule, which provides the TransferState functionality "out of the box" for the HTTP calls.
Handling long-running API calls
Long running API calls can affect your application rendering time, that might lead to the SEO disaster. In this lesson you will learn how you can protect your application against such situation.
In this module, you've learned how to pass data between the server and the browser using the `TransferState` registry. You've also introduced `TransferHttpCacheModule` that passes data obtained via HTTP during server-side rendering to the browser. You've learned how to abandon long-running REST API calls that affect rendering performance.
Caching with Redis
Wanna be a performance beast? It's time to cache! In this module, you will use the Redis database to implement server-side caching and improve Time To First Byte. From now on, only selected requests will trigger the rendering process. The rendered output will be kept in Redis for a specified period of time. Subsequent requests will be served with data retrieved from Redis.
First things first. Let's install the Redis DB on your machine and provision it in the Heroku environment.
In this lesson you will create a Node.JS middle-ware, that will be responsible for caching rendered views inside Redis database.
Tuning the application
Faster! Faster! Faster! In this lesson you will enable gzip compression, defer the CSS, lazy-load images and more. All to make it faster!
After fishing this module, your application will gain up to 95 points in the PageInsights speed audit. You've learned how to apply server-side caching to avoid redundant rendering and serve the client with content from the Redis database. You've also applied a few techniques to improve your application's performance.
Testing an Angular Universal application can be tricky. In this module, you will learn how to create tests that are specific to Angular Universal applications.
Unit Tests - Stubbing PLATFORM_ID
How to verify your application behavior in different environments? In this lesson you will get to know how you can stub the PLATFORM_ID injection token and HTTP request, for tests purpose.
Unit Tests - long-running API calls
Next step is to simulate a long-running API and verify how server-side Angular deals with it. This lesson will demonstrate you how to do that.
Unit Tests - server-specific services
Last but not least of your unit tests, should be to verify the server-specific services. In this lesson you will learn how to enforce Karma to run tests against code that includes server-specific objects and libraries.
E2E - testing TransferState
In this lesson you will learn how you can verify the TransferState registry content in your E2E tests.
E2E - Mocking MongoDB
This lesson is going to show you how to mock your data-source - MongoDB - for the E2E tests purpose. Thanks to using mongo-unit you will be able to perform actions that changes data in your DB, during E2E testing.
In this course module, you've learned how to test your Angular Universal application. You've written both unit tests and end-to-end tests.
In this module, you'll learn how to adjust the Angular application to be pre-renderable. Such prepared application can be deployed on static hosting like GitHub pages and still be SEO friendly! You will feed your application with data retrieved from MongoDB during the prerendering process.
Prerendering Angular application
What is prerendering and how Angular Universal supports it? This lesson will answer that questio and show you what steps you need to take, to make your application prerenderable.
After finishing this module, you will know how prerendering works, how to prepare backend for prerendered Angular application and how to utilize MongoDB connection during prerendering process.
Comparing --prod Universal & Prerender
That was a bumpy ride, but definetely worth it. In this lesson we will summarize what you've learned so far and how ng --prod differentiate from Universal and Prerendered application.
Frequently Asked Questions
Who is this course for?
This course is for developers who have an essential exposure to Angular, and want to make a deep dive into the Angular Universal world.
What if I need help?
You can ask us questions anytime through the community Discord channel, starting a discussion in the course, or by sending us a message.
Improve your Lighthouse score to 95
Build blazing fast, SEO-ready Angular apps
Integrate Angular with MongoDB, Redis, and CDNs
46 lessons (12m)
1 complete project
3,500 lines of code