Connecting Angular application with Nodejs backend

In this article, i will explain ,how to connect Angular Application with Nodejs backend.

When we create a new angular application using CLI tool, we will be provided with live development server to run that application. It will listen to port number 4200 by default.

When we send request to live development server from browser as http://127.0.0.1:4200 then it will send the JavaScript bundles of Angular application as response.That server is enough to run and test angular application.

When we implement server side services,we can use web server/HTTP server like Apache tomcat. But when we use NodeJS as backend technology,it allows to create HTTP server instead of using third party web servers.

Creating HTTP server in NodeJS
We can use either "http" module or "express" module to create a HTTP Server .Express is a web application framework which run on top of NodeJS. It is combination of multiple middlewares which can help developer to create efficient server side services of a web application.Let us create an HTTP server using "express" module.

          //load express module                               
                  const express=require("express");


          //call function loaded to "express" variable to get express object
                   const app=express();


          //assign port number
                app.listen(3000,()=> {
                                 console.log("server starting on port 3000");
                                     }

Now ,save it as "server.js" and can start the server by running following command.

                         node server.js

Now, once the HTTP server is ready ,then we can focus on connecting Angular application with this server. We know that Angular is written in TypeScript .SO first we need to create JavaScript bundles by transpiling the Angular app.

The ng serve command is intentionally for fast, local and iterative developments and also for builds, watches and serves the application from a local CLI development server.

The ng build command is intentionally for building the apps and deploying the build artifacts. It is also possible to run this command in watch mode as "ng build --watch" which can rebuild the angular app automatically after modifications.

When we run "ng build" command,then it will create a folder "dist" at root level of application and a sub folder in it with the same name of application.In side of that sub folder it places JavaScript bundles of Angular application. One can find reason for "dist" folder creation in "angular.json" file.

"options": {

         "outputPath": "dist/<name-of-application>",

......................................................

}

Now it is the time to connect the content of " dist " folder with HTTP server that we created using "express" module above.

In express module, a method called static() is existed to serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.The function signature is

                      express.static(root, [options])

The root argument specifies the root directory from which to serve static assets.Now, we need to join the paths of server and "dist" folder which contains static content as JavaScript bundles. For this ,we use core module of NodeJS called "path". This module has method to join the paths.

           express.static(path.join( __dirname,'./dist/<Sub-folder-name>));

"__dirname" is the directory name of the current module( i.e. server.js).

Now ,inform to express application to use this.

  app.use (express.static(path.join( __dirname,'./dist/<Sub-folder-name>)));

Hence the Angular app is connected with Nodejs backend. Now start the HTTP server and make a request from browser as

                      http://127.0.0.1:3000

Now the HTTP server will send the "JavaScript bundles" of angular app as response to client.

Comments

[DLoh22]

Will this still work when using Angular routing?