Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: Angular 8 Real World WebApp Development w/ Node.js & MariaDB
Rating: 4.5 (82 reviews)

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

Created byPatrick God

Last updated 10/2019

English

What you'll 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

Course content

10 sections • 83 lectures • 9h 12m total length

Introduction4:23
Develop a real-world eco-friendly blog using Angular, Node.js, and MariaDB with offline support, meta and Open Graph tags, an admin panel for CRUD operations, and server-side rendering.
Visual Studio Code Extensions5:20
Explore essential Visual Studio Code extensions for Angular development, including angular files, angular language service, John Papa snippets, auto rename tag, breakage pair colorized, path intelligence, prettier, and eslint.
Git Repository0:43

Introduction0:48
Explore building the basics of the client app in Angular, covering routes, components, styling with CSS, and services, with notes on Node and Angular versions.
A word about the Angular versions0:51
Version check & creating the new Angular app4:54
Adding basic components of the blog5:29
Initialize a local repository and commit changes to manage source control. Generate core blog components—navigation bar, article list, and footer—and wire routing to display the home page content.
Adding the first routes5:35
Set up article list and about routes in Angular, update the navigation with routerLink, and switch views using the router outlet for seamless page transitions.
Styling the blog9:08
Adding articles to the blog8:16
Create an article class for blog posts with id, title, key, date, content, description, and a featured image. Populate mock articles and show them in the article list component.
Displaying and styling the article list9:34
Display and style the article list by rendering each article as a card with an image, title, date, and teaser, then refine CSS for layout, borders, and typography.
Adding the article service5:33
Add an article service to fetch articles as an observable and replace direct access in the article list component, wiring mock data and preparing a single-article view.
ArticleComponent & New Route6:27
Create an article component and implement router links to article keys, configure routes to load articles via activated route parameters, and extend an article service to fetch mock articles.
Get a single article from the ArticleService5:42
404 - Page not found5:37
Create a 404 not found page by adding a not-found component, configuring a wildcard route, and redirecting unknown URLs to the home page with clear feedback.
Display single article3:51
Display a single article on the page by rendering the featured image, title, date, and content using string interpolation and innerHTML, then test by viewing the article in the blog.
Styling single article6:46
Summary0:26
Publish your Angular blog built with components, routing, services, and CSS that you created yourself, and then proceed to add meta and Open Graph tags.

Introduction0:36
Set the title and meta and Open Graph tags for blog pages to inform search engines and social platforms. Use the Facebook sharing debugger to verify tags.
Setting the title11:05
Add a title service and shared title logic to an Angular blog app to set the browser tab title for articles, lists, and about pages, with updates on navigation.
Facebook Debugger Tool4:54
Adding meta tags8:59
Summary0:26

Introduction & Advantages of Server-Side Rendering1:18
Activate server side rendering with Angular Universal to render on the server and deliver a complete source code to the client, enabling SEO, social sharing, and improved performance on mobile.
Add Server-Side Rendering4:28
Create a universal angular app for server-side rendering using a single command from the angular universal guide, generating a node express server and updated project files.
Angular Universal in Action5:05
Explore how Angular Universal renders pages on the server, compare server-side rendered output with the default client app, and run the universal app locally.
Performance Comparison4:12
Compare server-side rendered versus client-side rendered blog pages, showing server-side rendering delivers faster load times on mobile networks, especially under fast 3G and slow 3G conditions.
Summary0:38

Introduction0:26
Creating the Web Service4:58
Create a new project folder and build a web service with the Express framework, install Express with npm, and start the server while preparing for API calls.
First API Call4:04
Install nodemon2:29
Install nodemon to monitor code changes and automatically restart your node server. After globally installing nodemon with npm, run nodemon server.js instead of node server.js to enable live reloads.
GET All Articles7:33
GET Single Articles3:55
Extending the Article Service on the Client7:02
Extend the article service in the Angular client to call rest endpoints using the http client. Tackle cross-origin resource sharing issues and fetch both article lists and single articles.
Implementing CORS6:36
Implement a CORS policy by installing the course module, configuring origins for localhost:4200 and 4000, and applying app.use with these options to enable cross-origin requests.
Summary0:37

Introduction0:44
Installing MariaDB & HeidiSQL - and creating the database8:36
Installing Sequelize & setting up a connection9:53
Install sequelize and the MariaDB dialect, configure it as an ORM for articles in JavaScript, and initialize, authenticate, and run queries against the database.
Modeling the articles table7:23
Seeding the articles table5:09
Seed the articles table by syncing the table, inserting two mock articles via the article model's create method, and force dropping and recreating the table to prevent duplicate seeds.
Get All Articles9:36
Get Single Articles6:47
Implement and export get article by key to fetch a single article from the database using find one with a key, guided by an optional options object and a callback.
Updating an Article5:27
Summary0:24
Master the Maria database setup and usage as you connect the Angular client to the web service and database, then prepare for full CRUD operations with an administration dashboard.

Introduction0:56
Adding the Dashboard Components7:38
Create three new components—the dashboard, article overview, and added article—to build the admin interface. Configure routing and navigation to expose the dashboard and article overview, with authentication later.
Adding the Dashboard Service10:52
Adding the "published" state7:39
Using the Environment4:00
Implementing the Article Overview17:54
Publish & Unpublish Articles22:09
Implement publish and unpublish for articles in Angular app, update the client and server, toggle the published state via a dashboard service post request, and configure body-parser on the server.
Implementing the Edit Article Component25:14
Update an Article16:00
Preview an Article9:39
Add a preview button in the edit article component, implement navigation to a dashboard preview route, and distinguish between published and unpublished articles using the dashboard service.
Delete an Article16:17
Implement a delete article feature in the admin dashboard by adding a delete method in the dashboard service and client, with server route integration and user confirmation.
Create a new Article16:53
Implement a dashboard article creation flow by adding a post method and using secret.js to create articles, handling title, key, dates, image, description, content, and save-as-draft logic.
Some Improvements9:11
Automatically update the article key from the title, applying lowercase and spaces to dashes, on key up and blur, and show a 150-character description count with online/offline status.
Summary0:27
Implement authentication to secure the administration dashboard after enabling CRUD ops, environment variables, and iterative improvements to blog components and services.

Introduction0:57
Create a user model, register users, and enable login to the dashboard with credentials. Introduce JSON web tokens, test API calls with postman, and implement middleware with an angular interceptor.
User Model5:56
Register a User11:37
Postman6:39
Learn how to use Postman to set up an API development environment, create collections, and execute a POST request to register a user with a JSON body.
User Login10:41
JSON Web Token & RSA Key Files7:47
Describe how JSON Web Tokens (JWT) use a public and private key pair (RSA) to sign and verify tokens, including header, payload, and signature, for secure authorization and API access.
Sign JWT9:13
Sign the json web token with the private key using the jsonwebtoken library, embedding the user name in the payload, and set a 12-hour rs256 expiry for verification.
Verify JWT9:45
Authentication Middleware7:20
Create an isAuthenticated.js middleware to verify JSON web tokens from the authorization header, returning unauthorized if invalid and calling next() to protect dashboard routes.
User Login Component & Authentication Service10:41
Login Form with Validation11:43
Define a user model with name and password, bind it to a login form, validate inputs, display 'username or password is wrong' errors, and retrieve a token on successful login.
Send Token to Web Service9:11
HTTP Interceptor8:00
Angular Route Guard13:22
Summary0:56
Implement authentication with JSON web tokens, store hashed passwords, and verify tokens to grant dashboard access; use an Angular interceptor and middleware to streamline security and deploy the app.

Introduction0:43
Publish your Angular web app on a Windows server by hosting the web service, build the client as a server-side rendered version, and verify with the Facebook sharing debugger.
IIS Node Installation & Preparations3:53
Install IIS node on Windows Server, download the 64-bit msi, run as administrator to add a new site to IIS, then test localhost/notes and node express samples.
Host Node.js Web Service on IIS10:06
Deploy a Node.js web service on IIS by relocating sources, configuring a web.config, and updating port settings; test endpoints with Chrome and Postman, and publish the Angular client next.
Host Angular Universal on IIS9:50
Page Source, IIS Node Log & Interceptor Fix6:52
Facebook Sharing Debugger3:34
Overall Summary2:26

Requirements

Basic experience with Angular and NodeJs is preferable
Familiarity with HTML, CSS and JavaScript basics is also recommended
To publish your web application with IISNode you need a Windows Server with IIS

Description

"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

Who this course is for:

Everyone who wants to learn how to build a SEO-friendly web application with Angular, NodeJs, Sequelize and MariaDB
Students who want to up their game with Angular & NodeJs

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

What you'll learn

Explore related topics

Course content

Introduction & Preparation3 lectures • 10min

The Basic Blog15 lectures • 1hr 19min

Meta & Open Graph Tags5 lectures • 26min

Angular Universal5 lectures • 16min

Back End with Node.js9 lectures • 38min

Database & ORM with MariaDB & Sequelize9 lectures • 54min

Administration Dashboard14 lectures • 2hr 45min

Authentication15 lectures • 2hr 4min

IISNode7 lectures • 37min

Angular Updates1 lecture • 4min

Requirements

Description

Who this course is for: