Angular 8 Real World WebApp Development w/ Node.js & MariaDB

Build a real world web app by creating your own SEO-friendly blog with Angular Universal, Node.js, Sequelize & MariaDB.

4.85 (80 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Angular 8 Real World WebApp Development w/ Node.js & MariaDB
2,352
students
9 hours
content
Oct 2019
last update
$69.99
regular price

What you will learn

Build an Angular (Universal) web application from the ground up

Implement a NodeJs web service in the backend

Use the relational database management system MariaDB

Implement authentication with JSON Web Tokens (JWT)

Use object-relational mapping (ORM) with Sequelize

Publish your web application on a Windows Server with IISNode

Implement HTTP Interceptors

Restrict component access with Angular Route Guards

Implement a JavaScript Middleware

Make use of the Facebook Sharing Debugger

How to update your web application to a new Angular version

Why take this course?

"This course was well designed and gave very in-depth classes on specific features of Angular and Node. I found each section clear and easy to follow and the project really wrapped up everything in a fun to code along project!"

⭐⭐⭐⭐⭐ - Robin Labonde


Welcome the Angular 8 Real World WebApp Development with Node.js & MariaDB course!

In this course, we’ll focus on building a real-world web application with the tools Angular and Node.js provide.

We will build an SEO friendly blog, which means we're going to use Angular Universal to build a server-side rendered front end.

In the back end, we're going to use Node.js for the web service, we store our data in a MariaDB and to map our objects with the database, we’re going to use the object-relational mapping library Sequelize.

And finally, we publish the whole thing on a Windows Server with IISNode.

The web application itself will be a blog that could be extended to a big news or magazine web application.

We start with displaying some articles and later on we'll build an administration dashboard with authentication (we're using JSON Web Tokens to be more specific) and the option to create new articles, modify them, and so on.

Let's have a deeper look at what you are going to learn in this course:

The Basic Blog

In this section, we will start with our Angular project and develop the blog, so that it will work offline - without any web service or database. In essence, you could already publish this blog if you want to add all your blog posts within your Angular app.

Meta & Open Graph Tags

As the title may already imply, here we will add meta tags and open graph tags. So the information that search engines and social media platforms need to find your blog and display your articles properly when they are shared.

Keep in mind though, that these tags won’t necessarily work if you stick with a client-side rendered Angular app. Google promised to be able to crawl client-side rendered Angular web applications, but by the experience of many blogs and developers, we are not there yet.

Apart from that, social media platforms still need proper source code or tags to scrape your site properly.

Angular Universal

A short but important section - we will implement server-side rendering (SSR) here. That’s what Angular Universal is all about. When you finished implementing server-side rendering, your tags will be available in the source of your blog and your pages will also render much faster.

Back end with Node.js

It’s time for the backend. We’ll create a new project, the web service with Node.js. Now the articles will come from the web service.

Database & ORM with MariaDB & Sequelize

We expand the web service and finally connect our web application with a database so that the articles are now stored in a MariaDB. Additionally, we will use Sequelize for the object relational mapping between our models and the database tables.

Administration Dashboard

In essence, the blog works with all layers. We have the client, the web service and the database. But adding new articles and modifying them is a bit cumbersome. So let’s add an administration panel where we get an overview of all articles and where we can create, update and delete them - this means, building all CRUD operations.

Authentication

The administration dashboard works, but until now, everybody could use it. In this section, we change that by adding authentication with JSON web tokens. Also, we’re going to introduce Angular interceptors, route guards and a small middleware.

IISNode

Finally, we are able to deploy our blog. In this section, you’re going to learn how to build and publish the Angular Universal client and the Node web service on a Windows Server with Internet Information Services.


What tools are we using?

All the tools we're going to use in this course are available for free.

  • Visual Studio Code - A source-code editor developed by Microsoft for Windows, Linux, and macOS. We will use this code editor for the Angular client application as well as the Node.js web service.

  • HeidiSQL - A free and open-source administration tool we will use and install together with MariaDB. It's perfectly suited to see the data we're going to store in the database.

  • Postman - A greate choice for API testing. Later during this course, we will use Postman to run API calls against the Node.js web service.

  • Google Chrome - It's not necessary to use Google Chrome, any web browser with developer tools is useful here. We're going to use the developer tools for its console output and inspecting the HTML of our web application.

  • Git - This one's totally optional. I recommend using Git as source control. You can use it locally or push your code to a hoster like GitHub. The complete code written in this course is available on GitHub, for instance.


Who is this course for?

This course is suited for students who...

  • ...already have a little experience with Angular

  • ...want to up their game with Angular and Node.js

  • ...learn the skills to build a modern web application with Angular, Node.js, MariaDB and Sequelize from the ground up

  • ...want to create a portfolio website or private blog completely on their own without using any third-party services


Who is the instructor?

Patrick is an experienced web developer who has been working in this field for over 15 years. With several courses on Udemy, over 30.000 students and more than 3.000 reviews, he knows what you are looking for in a course about web development. He works full-time as full stack developer at a market research company in Germany, teaches online courses on Udemy and YouTube, and also gives one-on-one online lectures. Let's see, what other students are saying:

⭐⭐⭐⭐⭐

"Patrick is an incredibly gifted programmer and educator. He writes code effortlessly and does a beautiful job of explaining concepts, the code structure, and how everything interacts with each other. He is patient and supportive and can efficiently work with beginners and people with more advanced skill. If you want to learn any aspects of programming, you MUST contact Patrick. He’s among the best instructors I’ve ever worked with, and I give him my highest recommendation." - Mike

⭐⭐⭐⭐⭐

"Very good, easy pace, and easy to understand! this is the good course for beginner and intermediate developers. Thank you!" -Tri

⭐⭐⭐⭐⭐

"Quick and useful course getting someone upto speed on WCF RESTful services. I like this course as the instructor Patrick just gets to the crux of the topics without padding with unnecessary discussions. When people are limited by time to spend on a course, this is the kind of course that is ideally looked up to. Very good course! Thank you!" - Sundararajan

⭐⭐⭐⭐⭐

"Patrick is a great instructor in that he is organized, knows his stuff, and takes the time to explain everything in detail. Great course for beginning WCF developers!" - Evarardo

⭐⭐⭐⭐⭐

"I like the pace, the simplicity of piece by piece introductions and the author's speaking pace & clarity. very nice!" - Stephen

⭐⭐⭐⭐⭐

"Love the way you go through each step one short video at a time - makes it more rewarding and easier to digest and break down if need be. Also appreciate your thorough responses to others' questions! Great job, I look forward to seeing more videos like this because I am learning a ton from you! Thank for all of your hard work and dedication!" - Adrienne

⭐⭐⭐⭐⭐

"Single Page Application (SPA) has become a very important requirement for web application projects. This course has given me a very good example on how to create a "SPA". The whole process is covered since creating the project, the HTML page, the detailed creation of each file til its deployment. Very good. I recommend it for systems analysts who are starting to use this concept of SPA, just like me. If something in your solution does not work it's because you're doing something wrong. Everything works fine, the instructor is clear and gives us good and complete information. For me, the course was excellent." - Michel

⭐⭐⭐⭐⭐

"As always, a course by Patrick God is a good choice for learning. I had a chance to watch another courses from him and I have to say, I did the right thing choosing this guy.He is very straight forward, speak well, and let me understand quickly all what I need." - Paulo

Content

Introduction & Preparation

Introduction
Visual Studio Code Extensions
Git Repository

The Basic Blog

Introduction
A word about the Angular versions
Version check & creating the new Angular app
Adding basic components of the blog
Adding the first routes
Styling the blog
Adding articles to the blog
Displaying and styling the article list
Adding the article service
ArticleComponent & New Route
Get a single article from the ArticleService
404 - Page not found
Display single article
Styling single article
Summary

Meta & Open Graph Tags

Introduction
Setting the title
Facebook Debugger Tool
Adding meta tags
Summary

Angular Universal

Introduction & Advantages of Server-Side Rendering
Add Server-Side Rendering
Angular Universal in Action
Performance Comparison
Summary

Back End with Node.js

Introduction
Creating the Web Service
First API Call
Install nodemon
GET All Articles
GET Single Articles
Extending the Article Service on the Client
Implementing CORS
Summary

Database & ORM with MariaDB & Sequelize

Introduction
Installing MariaDB & HeidiSQL - and creating the database
Installing Sequelize & setting up a connection
Modeling the articles table
Seeding the articles table
Get All Articles
Get Single Articles
Updating an Article
Summary

Administration Dashboard

Introduction
Adding the Dashboard Components
Adding the Dashboard Service
Adding the "published" state
Using the Environment
Implementing the Article Overview
Publish & Unpublish Articles
Implementing the Edit Article Component
Update an Article
Preview an Article
Delete an Article
Create a new Article
Some Improvements
Summary

Authentication

Introduction
User Model
Register a User
Postman
User Login
JSON Web Token & RSA Key Files
Sign JWT
Verify JWT
Authentication Middleware
User Login Component & Authentication Service
Login Form with Validation
Send Token to Web Service
HTTP Interceptor
Angular Route Guard
Summary

IISNode

Introduction
IIS Node Installation & Preparations
Host Node.js Web Service on IIS
Host Angular Universal on IIS
Page Source, IIS Node Log & Interceptor Fix
Facebook Sharing Debugger
Overall Summary

Angular Updates

Update Angular 7 to Angular 8

Screenshots

Angular 8 Real World WebApp Development w/ Node.js & MariaDB - Screenshot_01Angular 8 Real World WebApp Development w/ Node.js & MariaDB - Screenshot_02Angular 8 Real World WebApp Development w/ Node.js & MariaDB - Screenshot_03Angular 8 Real World WebApp Development w/ Node.js & MariaDB - Screenshot_04

Reviews

Ahmet
September 2, 2023
Hello! i have been learning about backend development for more than 2 years. I am actively working with .NET Core. Recently, I decided to learn Angular in order to be able to do service-based application development. I have completed many domestic trainings and now I have decided to start different perspective-based trainings together with the global language. At this point, I came across your training and started watching it. This training has given me a lot of new knowledge. With the information I learned from here, I will develop my own Angular projects with .NET Core. Thank you, Patrick. Greetings from Turkiye!
Calebe
June 13, 2022
Some parts need to be updated, but in overall it was great. A lot a good stuff was teached concerning the development process between node and angular;
Emile
November 12, 2020
Thank you Patrick, I've learned a lot!!! It's so easy if you know how. But I guess it took you some time to prepare the course. I liked the structure of the course, the clear separation of server and client, the step-by-step evolving of the code, real nice. The only thing that did not work in my case was the deployment to a windows server with IISNode. I couldn't get IISNode installed, the Windows Installer missed some part. A question is how to deploy the data now currently in my local Maria-DB. Thanks again and regards Emile
Chander
September 17, 2020
In this course i want to learn about angular universal authentication by jsonwebtoken and passport but I can't see here. angular universal part is little. I want to learn the whole project in angular universal. I also want backend projects in typescript not in javascript. The entire Mean Stake project in Angular Universal, I mean to say that such a project in TypeScript is not found in YouTube.
Steve
May 27, 2020
I have over 100 courses, most unfinished, some down to me, some down to the content, I am only 30% through right now, but this is THE BEST course I have taken, hands down. Yes, you would want some prior knowledge of angular, but the author mentions that at the start, but if you have a good idea of the basics, what a component, service, etc is, then this course so far has been the most time effective quick start toward a fully working application, even has a backend in and sequelize, and the front end, and a working basic blog. 5*!
KarlosMrez
February 2, 2020
Also für mich den Kurs war gut aber am Ende, das mit IIS hat nicht geklappt. Ich glaube, es wäre nice, wenn den Kurs aktualisiert wird.
Charlie
December 26, 2019
Good overall, but given the fact it's lacking things which Patrick has on his on custom blog, such as pagination, mobile-friendly (image resize css etc), I can find a lot of differences which is make me provide a bit lower score, otherwise it was good. I will change this review to 5 starts if above is provided and up to date with the actual blog.
Yamel
December 18, 2019
The flavor of the sauce the opening video had for which I purchased the course is not here, I hope that flavor return in the next lessons.
Robin
October 5, 2019
This course was well designed and gave very in-depth classes on specific features of Angular and Node. I found each section clear and easy to follow and the project really wrapped up everything in a fun to code along project!

Charts

Price

Angular 8 Real World WebApp Development w/ Node.js & MariaDB - Price chart

Rating

Angular 8 Real World WebApp Development w/ Node.js & MariaDB - Ratings chart

Enrollment distribution

Angular 8 Real World WebApp Development w/ Node.js & MariaDB - Distribution chart

Related Topics

2282642
udemy ID
3/20/2019
course created date
10/2/2019
course indexed date
Bot
course submited by