Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

SEO Friendly Progressive Web Applications with Angular Universal

via egghead.io

Overview

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).

Syllabus

  • 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

Taught by

Bram Borggreve

Reviews

4.3 rating at egghead.io based on 138 ratings

Start your review of SEO Friendly Progressive Web Applications with Angular Universal

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.