Autoplay

    Course Overview: SEO Friendly Progressive Web Applications with Angular Universal

    Bram BorggreveBram Borggreve

    In this course we are going to build an Angular app from scratch using Angular CLI. The app that we are going to build is a simple product list and detail page. After this is done we will implement a common pattern by separating our components between Container components and Presentational components. We create a Service to handle our API calls, and make use of Angular Resolvers to fetch the data before the components are displayed.

    At this point our actual app is ready and we will move on by adding Server Side Rendering using Angular Universal. We will deploy the app to now.sh and add dynamic metadata to our pages. The app is now Search Engine Friendly and also has richt previews when being shared on social media. We will wrap the course up by adding a Service Worker using Angular PWA.

    When you finish this course you will be comfortable in creating a modern, Search Engine Friendly application in Angular, from scratch or use the patterns in your existing applications.

    angularAngular
    ^6.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 In this course, we're going to build an Angular app from scratch using Angular CLI. The app that we are going to build is a simple product list and detail page.

    00:08 We'll create the app, add some default settings, and then move on to styling our app using bootstrap. After this is done, we'll implement a common pattern by separating out our components between container components and presentational components.

    00:21 We'll create a service to handle our API calls and make use of Angular Resolvers to fetch the data before the components are displayed.

    00:29 When the actual app is ready, we'll move on by adding service side rendering using Angular Universal. We'll deploy the app to now.sh and add dynamic metadata to the patches.

    00:38 The app is then search engine friendly and has rich previews when being shared in social media. We'll wrap the course up by adding a service worker using Angular PWA.

    00:47 After finishing this course, you'll be comfortable in creating a modern search engine friendly site in Angular from scratch or use the patterns in your existing applications.

    Discuss

    Discuss