This tutorial divided into several steps:
- Step #1: Create an Angular Universal Application
- Step #2: Add Mongoose.js Schema and Router
- Step #3: Add Angular Routes and Navigation
- Step #4: Add Angular Service
- Step #5: Add Angular Material UI/UX for CRUD operation
- Step #6: Deploy, Run, and Test the Angular Universal SSR on VPS
The Angular Universal application that we will build is a very simple application of create, read, update, delete (CRUD) operation. At the end, we will show you how to deploy it to the VPS.
The following tools, frameworks, libraries, and modules are required for this tutorial:
- Node.js
- Angular Universal with Express-Engine
- MongoDB and Mongoose.js
- Angular Material
- VPS contains Ubuntu, Nginx, PM2, and MongoDB
- Terminal or CMD
- IDE or Text Editor (we are using VSCode)
Let’s get started with the main steps!
Step #1: Create an Angular Universal Application
As usual, we will start this tutorial by preparing the environment to create or build an Angular application inside the Node.js ecosystem. First, make sure you have download the latest and recommended Node.js version and can run NPM in the Terminal or CMD. To check the existing Node and NPM, type this command.
node -v
v12.18.0
npm -v
6.14.5
Install or update the latest Angular CLI by type this command.
sudo npm install -g @angular/cli
Next, create a new Angular application by type this command.
ng new angular-ssr
If there are the questions, give them the answers like this.
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/
documentation/syntax#scss ]
Next, go to the newly created Angular 10 application folder then type this command to add Angular Universal SSR.
cd ./angular-ssr
ng add @nguniversal/express-engine --clientProject angular-ssr
Next, check the Angular Universal SSR application by running this application using these commands.
npm run build:ssr && npm run serve:ssr
Open the browser then go to ‘localhost:4000’ and you will this standard Angular welcome page.
#angular #angular universal server-side rendering #crud
