Deploy angular app in node server — express static

We will learn how to deploy angular application in node server and REST Api in the same port.

Build angular app : Let’s create an angular app and serve it from node server with express static.

Angular Cli helps to build and deploy angular application.
ng serve => To build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.

ng build — prod => ng build command compiles an angular application/library into an output directory named dist at given path. Output directory name can be changed by user in angular.json.

The above screenshot illustrates where user can change the output directory path in angular.json file.

Lets deploy angular app in local web server using http-server.

Http-server : Lightweight web server for angular application.
install http-server and run the production version of code in local server.

installs http-server globally

*path => path to the output directory of angular app.

https://github.com/http-party/http-server => For more information about http-server configurations.

Before launching the production version of angular app, we should run the below command as mentioned in screenshot. ( ng build — prod).
“ — prod” is responsible for minifying the code and compiling the code.
( AOT — default compilation process since angular 9 ). Before angular 9, JIT was the default compilation for building production code.

after successful build command.

Now, let’s launch production code locally with help of http-server.

http://localhost:8081

app.component.html

app is running in the mentioned port number.

the above screenshot refers that app is built and served locally in http-server.
Now lets create node server and serve them node server.

Create node server : Express.js is a modular web framework for Node.js. It is used for easier creation of web applications and services. Express.js simplifies development and makes it easier to write secure, modular and fast applications.

Just create javascript file and name it as server.js. And paste the below mentioned code to create server.

Import express module and simply listen to any custom port number as mentioned in the above screenshot.
“.use() => it helps to configure the middleware.”
Bind application-level middleware to an instance of the app object by using the app.use().

app.use(‘/’, express.static(‘dist/firstmedium’));
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

Angular app as static in node server

server is started and listening to the port number : 8083

Now let’s create ‘GET’ method API and listen to the same port number to fetch data.

Add the below code to create GET method.

recipesData method send json to client in the port 8083

body parser => Node.js body parsing middleware.

Parse incoming request bodies in a middleware before your handlers, available under the req.body property.

The final server.js file will be as look like as below.

server.js

Now, by listening to the method recipesData followed by ‘http://localhost:8083/’ => (i.e ‘http://localhost:8083/recipesData’)

json data is printed on the browser.

Check the recipesData api in the network tab to verify the results.

Great!

My YouTube Video tutorial link — https://youtu.be/S5vZCgV0W-o

Conclusion:
we have understood how to build angular application and deploy in local web server(http-server) and node server with express static middleware. And we could listen to the same port for REST api and serving static files from node server.

Share your thoughts about this tutorial. thanks.

Happy learning! :)