SEO Friendly Progressive Web Applications with Angular Universal
Offered By: egghead.io
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).
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.jsegghead.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