SEO Friendly Progressive Web Applications with Angular Universal

In this course we will create an Angular application that will serve as a public website. Normally there are quite a few trade-offs by using a Single Page Application for a public website. For instance, they are hard to index by search engines and if you link to them on social media you get a generic preview. Also, the initial rendering can take a while (especially on mobile devices) as the browser has to pull in all the JavaScript in order to render a working app.

By adding and configuring Angular Universal we add Server Side Rendering capabilities to our application. This helps prevent the issues mentioned above by pre-rendering the application on the server and serving this out to the user when she requests the app. Once the JavaScript has been loaded the app will seamlessly switch over to a ‘normal’ web application.

For good measures and to modernize our application we will add and configure a Service Worker that will allow for a native-like experience in the browser (splash screen, desktop icon, fast load, cached data, etc).

Course Content

Course Overview: SEO Friendly Progressive Web Applications with Angular Universal

Scaffold a New Angular App using Angular CLI

Add Bootstrap to an Angular CLI Project

Configure Defaults for Generating Code with Angular CLI

Create Application Layout with Components in an Angular CLI Project

Create Container Components for Retrieving Data in an Angular CLI Project

Use the Angular CLI Environment to Define Constants

Create an Angular Service to Retrieve Data from an API

Create Presentational Components for Displaying Data in an Angular CLI Project

Create Angular Resolvers to retrieve the product data from the Service

Server Side Render an Angular CLI Project with Angular Universal

Deploy an Angular CLI Project to now.sh

Add dynamic metadata to an Angular CLI Project

Make a Progressive Web Application from an Angular CLI project