YoVDO

SEO Friendly Progressive Web Applications with Angular Universal

Offered By: egghead.io

Tags

Mobile Development Courses Web Development Courses Search Engine Optimization (SEO) Courses Bootstrap Courses Progressive Web Applications Courses Code Generation Courses Service Workers Courses Server-Side Rendering Courses

Course Description

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

Related Courses

Offline-First Progressive Web Apps (PWA) in Vue.js
egghead.io
Progressive Web Apps in React with create-react-app
egghead.io
Exploring Service Workers
Frontend Masters
Let's Build an Offline-First Vue App
Laracasts
Angular: Progressive Web Apps
LinkedIn Learning