Angular + Node Express

In this post, I will show you some examples that use Angular 8/10/11/12/13 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)

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, 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:

angular-express-github-crud-create

– Retrieve Tutorials:

angular-express-github-crud-retrieve

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

angular-express-github-crud-retrieve-one

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

angular-express-github-crud-update

– Search Tutorials by title:

angular-express-github-search

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 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

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

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

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

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.

You may also like...

Leave a Reply

Your email address will not be published.