Angular + Node Express – Github Code

In this post, I will show you some examples that use Angular 8/10/11/12/13/14/15 with Node Express backend. You will see Github links for making following projects:

• Angular + Node App with MySQL
• Angular + Node App with PostgreSQL
• Angular + Node App with MongoDB
• Angular + Node App with SQL Server (MSSQL)
• Angular + Node: JWT Authentication and Authorization

Overview

The Github source code shows many full stack Angular and Node Express sample Projects with CRUD Operations. The back-end server uses Node.js with Express for REST API and specific library for interacting with database. Front-end side is made with Angular 8/10/11/12/13/14/15, HttpClient, Forms, Router and Bootstrap.

Each of them is the Tutorial CRUD Application in that:

• Each Tutorial has id, title, description, published status.
• We can create, retrieve, update, delete Tutorials.
• We can also find Tutorials by title.

The images below shows screenshots of our System.

– Add Tutorial:

– Retrieve Tutorials:

– Click on Edit button to go to a Tutorial page:

On this Page, you can:

• change status to Published using Publish button
• delete the Tutorial using Delete button
• update the Tutorial details with Update button

– Search Tutorials by title:

How to Run

Node Express server:
Open command line at the project root folder, run:

npm install
node .

The Node App will export Rest APIs at port 8080, CORS configuration for working with port 8081.

Angular Client:
Choose Angular 8/10/11/12/13/14/15 Github source code as you need.
Open command line at the project root folder, run:

npm install
ng serve --port 8081

Angular + Node Express Github with MySQL

Tutorials:
– Angular 8 + Node Express + MySQL example
– Angular 10 + Node Express + MySQL example
– Angular 11 + Node Express + MySQL example
– Angular 12 + Node Express + MySQL example
– Angular 13 + Node Express + MySQL example
– Angular 14 + Node Express + MySQL example
– Angular 15 + Node Express + MySQL example

Github Source code:
– Frontend:

– Backend:

– Video:

Angular + Node Express Github with PostgreSQL

Tutorials:
– Angular 8 + Node Express + PostgreSQL example
– Angular 10 + Node Express + PostgreSQL example
– Angular 11 + Node Express + PostgreSQL example
– Angular 12 + Node Express + PostgreSQL example
– Angular 13 + Node Express + PostgreSQL example
– Angular 14 + Node Express + PostgreSQL example
– Angular 15 + Node Express + PostgreSQL example

Github Source code:
– Frontend:

– Backend: Node Express + Sequelize + PostgreSQL: Rest API

– Video:

Angular + Node Express Github with MongoDB

Tutorials:
– Angular 8 + Node Express + MongoDB example
– Angular 10 + Node Express + MongoDB example
– Angular 11 + Node Express + MongoDB example
– Angular 12 + Node Express + MongoDB example
– Angular 13 + Node Express + MongoDB example
– Angular 14 + Node Express + MongoDB example
– Angular 15 + Node Express + MongoDB example

Github Source code:
– Frontend:

– Backend: Node Express + MongoDB: Rest API

– Video:

Angular + Node Express Github with SQL Server (MSSQL)

Github Source code:
– Frontend:

– Backend: Node Express + MSSQL: Rest API

Angular Node Express JWT Auth Github

– Tutorial:
With MySQL or PostgreSQL:

Mean Stack with MongoDB:

Github Source code:
– Frontend:

– Backend:

– Video:

Using HttpOnly Cookies instead:
– Frontend:

– Backend:

How to Run Angular and Express App on same Port

Assume that we have 2 projects: Angular & Node.

If we run them separately:

• Node Express Server exports Rest Apis at Url: http://localhost:8080/
• Angular Client runs at url: http://localhost:8081/

Otherwise, when deploying Angular production-build with Node project, we only need to run Node Project for the fullstack (Angular + Node) system.

In this example, we access http://localhost:8080/ for the UI.

You can find step by step instruction at How to integrate Angular with Node Express App.