{"id":710,"date":"2020-11-17T22:15:00","date_gmt":"2020-11-17T21:15:00","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=710"},"modified":"2021-01-27T13:50:29","modified_gmt":"2021-01-27T12:50:29","slug":"how-to-develop-and-build-angular-app-with-nodejs","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/11\/17\/how-to-develop-and-build-angular-app-with-nodejs\/","title":{"rendered":"How To Develop and Build Angular App With NodeJS"},"content":{"rendered":"\n

There are so many ways we can build Angular apps and ship for production. One way is to build Angular with NodeJS or Java and another way is to build the angular and serve that static content with NGINX web server. With NodeJS we have to deal with the server code as well, for example, you need to load index.html page with node.<\/p>\n\n\n\n

In this post, we will see the details and implementation with the NodeJS. We will go through step by step with an example.<\/p>\n\n\n\n

Introduction<\/h4>\n\n\n\n

Angular is a javascript framework for building web apps and it doesn\u2019t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of Angular with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver which loads Angular assets and accepts any API calls from the Angular app.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

If you look at the above diagram all the web requests without the \/api <\/strong>will go to Angular routing. All the paths that contain \/api <\/strong>will be handled by the Node server.<\/p>\n\n\n\n

In this post, we are going to develop an Angular app with NodeJS and see how to build for production.<\/p>\n\n\n\n

Example Project<\/h4>\n\n\n\n

This is a simple project which demonstrates developing and running Angular application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

As you add users we are making an API call to the nodejs server to store them and get the same data from the server when we retrieve them. You can see network calls in the following video.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Here is a Github link to this project. You can clone it and run it on your machine.<\/p>\n\n\n\n

\/\/ clone the project\nhttps://github.com\/bbachi\/angular-nodejs-example.git\n\/\/ install and start the project\nnpm install\nnpm start<\/code><\/pre>\n\n\n\n
NodeJs<\/h4>\n\n\n\n
NodeJS is an asynchronous event-driven javascript runtime environment for server-side applications. The current version of the nodejs is 12<\/strong> and you can install it from this link here.<\/a> You can click on any LTS link and the NodeJS package is downloaded and you can install it on your laptop.<\/p>\n\n\n\n
You can check the version of the Node with this command node -v.<\/code><\/p>\n\n\n\n
Development Phase<\/h4>\n\n\n\n
Usually, the way you develop and the way you build and run in production are completely different. Thatswhy, I would like to define two phases: Development phase and Production phase.<\/p>\n\n\n\n
In the development phase, we run the nodejs server and the Angular app on completely different ports. It\u2019s easier and faster to develop that way. If you look at the following diagram the Angular app is running on port 4200<\/strong> with the help of a webpack dev server and the nodejs server is running on port 3080<\/strong>.<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Project Structure<\/h4>\n\n\n\n
Let\u2019s understand the project structure for this project. We will have two package.json: one for Angular and another for nodejs API. It\u2019s always best practice to have completely different node_modules for each one. In this way, you won\u2019t get merging issues or any other problems regarding web and server node modules collision.<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
If you look at the above project structure, all the Angular app resides under the my-app<\/strong> folder and nodejs API resides under the root folder. You can have a separate folder for nodejs API as well.<\/p>\n\n\n\n
NodeJs API<\/h4>\n\n\n\n
We use the express and nodemon on the server-side. Express is the Fast, unopinionated, minimalist web framework for NodeJS and nodemon is the library which makes your API reloads automatically whenever there is a change in the files. Let\u2019s install these two dependencies. nodemon is only used for development so install this as a dev dependency.<\/p>\n\n\n\n
npm install express --save\nnpm install nodemon --save-dev<\/code><\/pre>\n\n\n\n
Here is the package.json<\/strong> of nodejs API.<\/p>\n\n\n\n
{\n  \"name\": \"angular-nodejs-example\",\n  \"version\": \"1.0.0\",\n  \"description\": \"node server\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start\": \"node index.js\",\n    \"dev\": \"nodemon .\/server.js localhost 3080\",\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https:\/\/github.com\/bbachi\/angular-nodejs-example.git\"\n  },\n  \"author\": \"Bhargav Bachina\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https:\/\/github.com\/bbachi\/angular-nodejs-example\/issues\"\n  },\n  \"homepage\": \"https:\/\/github.com\/bbachi\/angular-nodejs-example#readme\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  },\n  \"devDependencies\": {\n    \"nodemon\": \"^2.0.2\"\n  }\n}<\/code><\/pre>\n\n\n\n
We need to import express and define two routes: \/api\/users<\/strong> and \/api\/user <\/strong>and the server listening on the port 3080. <\/strong>Here is the server.js file. We use body-parser to handle data in the http request object.<\/p>\n\n\n\n
const express = require('express');\nconst app = express(),\n      bodyParser = require(\"body-parser\");\n      port = 3080;\n\nconst users = [];\n\napp.use(bodyParser.json());\n\napp.get('\/api\/users', (req, res) => {\n  res.json(users);\n});\n\napp.post('\/api\/user', (req, res) => {\n  const user = req.body.user;\n  users.push(user);\n  res.json(\"user addedd\");\n});\n\napp.get('\/', (req,res) => {\n    res.send('App Works !!!!');\n});\n\napp.listen(port, () => {\n    console.log(`Server listening on the port::${port}`);\n});<\/code><\/pre>\n\n\n\n
You need to start the nodejs API with this command npm run dev<\/strong><\/code>and the moment you change any file, it will be automatically updated.<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Angular App<\/h4>\n\n\n\n
Now the nodejs API is running on port 3080. Now it\u2019s time to look at the Angular app. The entire Angular app is under the folder my-app. You can create with this command ng new my-app.<\/code> I am not going to put all the files here you can look at the entire files in the above Github link or here<\/a>.<\/p>\n\n\n\n
Let\u2019s see some important files here. Here is the service file which calls node API.<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AppService {\n\n  constructor(private http: HttpClient) { }\n\n  rootURL = '\/api';\n\n  getUsers() {\n    return this.http.get(this.rootURL + '\/users');\n  }\n\n  addUser(user: any) {\n    return this.http.post(this.rootURL + '\/user', {user});\n  }\n\n}<\/code><\/pre>\n\n\n\n
Here is the app component which subscribes to these calls and gets the data from the API.<\/p>\n\n\n\n
import { Component, OnDestroy } from '@angular\/core';\nimport { FormGroup, FormControl, Validators } from '@angular\/forms';\nimport { AppService } from '.\/app.service';\nimport { takeUntil } from 'rxjs\/operators';\nimport { Subject } from 'rxjs';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnDestroy {\n\n  constructor(private appService: AppService) {}\n\n  title = 'angular-nodejs-example';\n\n  userForm = new FormGroup({\n    firstName: new FormControl('', Validators.nullValidator && Validators.required),\n    lastName: new FormControl('', Validators.nullValidator && Validators.required),\n    email: new FormControl('', Validators.nullValidator && Validators.required)\n  });\n\n  users: any[] = [];\n  userCount = 0;\n\n  destroy$: Subject<boolean> = new Subject<boolean>();\n\n  onSubmit() {\n    this.appService.addUser(this.userForm.value).pipe(takeUntil(this.destroy$)).subscribe(data => {\n      console.log('message::::', data);\n      this.userCount = this.userCount + 1;\n      console.log(this.userCount);\n      this.userForm.reset();\n    });\n  }\n\n  getAllUsers() {\n    this.appService.getUsers().pipe(takeUntil(this.destroy$)).subscribe((users: any[]) => {\n        this.users = users;\n    });\n  }\n\n  ngOnDestroy() {\n    this.destroy$.next(true);\n    this.destroy$.unsubscribe();\n  }\n}<\/code><\/pre>\n\n\n\n
Interaction between Angular and Node API<\/h4>\n\n\n\n
n the development phase, the Angular app is running on port 4200<\/strong> with the help of a webpack dev server and nodejs API running on port 3080<\/strong>.<\/p>\n\n\n\n
There should be some interaction between these two. We can proxy all the API calls to nodejs API. Angular provides an inbuilt proxying method. First, we need to define the following proxy.conf.json<\/strong> under my-app<\/strong> folder.<\/p>\n\n\n\n
{\n  \"\/api\": {\n    \"target\": \"http:\/\/localhost:3080\",\n    \"secure\": false\n  }\n}<\/code><\/pre>\n\n\n\n
If you look at the file, all the paths that start with \/api <\/strong>will be redirected tohttp:\/\/localhost:3080<\/strong><\/a>where the nodejs API running. Then, you need to define in angular.json under the serve part with the proxyConfig key. Here is the complete angular.json file.<\/a><\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Once this is configured, you can run Angular app on port 4200 and nodejs API on 3080 still make them work together.<\/p>\n\n\n\n
\/\/ nodejs API (Terminal 1)\nnpm run dev\n\/\/ Angular app (Terminal 2)\nnpm start<\/code><\/pre>\n\n\n\n
How To Build Project For Production<\/strong><\/h4>\n\n\n\n
The Angular app runs on the port 4200<\/strong> with the help of a webpack dev server. This is not the case for running in production. We have to build the Angular project and load those static assets with the node server. Let\u2019s see those step by step here.<\/p>\n\n\n\n
First, we need to build the Angular project with this command npm run build<\/code> and all the built assets will be put under the dist<\/strong> folder.<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Second, we need to make some changes on the server-side. Here is the modified server.js<\/strong> file.<\/p>\n\n\n\n
  1. We have to use express.static<\/strong> at line number 9<\/strong> to let express know there is a dist folder and assets of the Angular build. (app.use(express.static(process.cwd()+”\/my-app\/dist\/angular-nodejs-example\/”));<\/li>
  2. Load index.html <\/strong>for the default route \/ <\/strong>at line number 22<\/strong> (res.sendFile(process.cwd()+”\/my-app\/dist\/angular-nodejs-example\/index.html”)<\/li><\/ol>\n\n\n\n
    <\/p>\n\n\n\n
    const express = require('express');\nconst app = express(),\n      bodyParser = require(\"body-parser\");\n      port = 3080;\n\nconst users = [];\n\napp.use(bodyParser.json());\napp.use(express.static(process.cwd()+\"\/my-app\/dist\/angular-nodejs-example\/\"));\n\napp.get('\/api\/users', (req, res) => {\n  res.json(users);\n});\n\napp.post('\/api\/user', (req, res) => {\n  const user = req.body.user;\n  users.push(user);\n  res.json(\"user addedd\");\n});\n\napp.get('\/', (req,res) => {\n  res.sendFile(process.cwd()+\"\/my-app\/dist\/angular-nodejs-example\/index.html\")\n});\n\napp.listen(port, () => {\n    console.log(`Server listening on the port::${port}`);\n});<\/code><\/pre>\n\n\n\n
    Once you are done with the above changes, you can actually run the whole app with the nodejs server running on port 3080 like below as nodejs acts as a web server as well.<\/p>\n\n\n\n
    \"Image<\/figure>\n\n\n\n
    How To Package Project For Production<\/strong><\/h4>\n\n\n\n
    Here is a separate article on how to package this application for production. Check it out, here<\/a><\/p>\n\n\n\n
    References:<\/p>\n\n\n\n
    https:\/\/medium.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    There are so many ways we can build Angular apps and ship for production. One way is to build Angular with NodeJS or Java and another way is to build the angular and serve that static content with NGINX web server. With NodeJS we have to deal with the server code as well, for example, […]<\/p>\n","protected":false},"author":1,"featured_media":716,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,145],"tags":[40,106,147,146,205,206],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/710"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/710\/revisions"}],"predecessor-version":[{"id":717,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/710\/revisions\/717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/716"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}