DEV Community

loading...
Cover image for Do you want to run Angular App on the Node.js server?

Do you want to run Angular App on the Node.js server?

Saad Abbasi
Hello πŸ‘‹πŸ½ I am **Saad Abbasi**. A MEAN stack Developer.
・2 min read

Do you want to serve your Angular app on the node.js server?
I assume that you already have an angular app now you want to render it with node.js. in this dev blog, I will explain how you can achieve this in a very easy and secure way by using view engines in node.js.
Node.js
also, I will explain how you can render modify your endpoints to work with the server-side, you might using service to hit the specific backend by going on the specific route. e.g signup-route.
let's get started.
Table of content.

1)What is angular
2)What is PUG (in this tutorial I will use pug)?
3)How to render Angular application with node.js backend

What is Angular?

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

What is PUG?

PUG is a robust, elegant, a feature-rich template engine for Node.js

How to render Angular application on the node.js server?

As we know that Angular is SPA(Single Page Application) we can render its content with node.js backend.
Luckily node.js provide template engines to run templates on the server-side. we can use any template engine like jade, pug, ejs to run the angular application but in this dev blog, I will use pug.
these are the steps to render angular applications with pug template engine.

  1. production build an angular application by running the following command with angular cli ng build --prod
  2. after successful build you will see build files by default in dist folder.
  3. Install template engine by running the following command npm install --save pug install pug
  4. pug template node.js setup
const app = express();
app.use(express.static('../dist/interior'))//set the static path 
app.set('view engine', 'pug');
Enter fullscreen mode Exit fullscreen mode
  1. View-engine setup is completed now it's time to render Angular app add the following code after view engine
app.get('/', (req, res) => {
    res.sendFile('index.html',{root:__dirname})
});
Enter fullscreen mode Exit fullscreen mode
  1. Now when you run your node.js app you will see the angular app in action. Note: if you want to change the route you can change the above code like this to render angular app on a specific route e.g when the user hits /angular
app.get('/angular', (req, res) => {
    res.sendFile('index.html',{root:__dirname})
});
Enter fullscreen mode Exit fullscreen mode

Complete code will look like this

const express = require('express');
const path = require('path')
const port = 8080;
const app = express();

app.use(express.static('../dist/angular-directory'))
app.set('view engine', 'pug');

app.get('/', (req, res) => {
    res.sendFile('index.html',{root:__dirname})
});


app.listen(port, () => {
    console.log("Server is listening on port "+port);
});
Enter fullscreen mode Exit fullscreen mode
run node app.js and visit localhost:8080 you will see your angular app running on node.js (express server)

That's all for this blog I hope this will help you, consider writing your thought and feedback, so I can improve my writing and help people in a better way.
Best Regards

saadabbasi image

Discussion (6)

Collapse
hakimio profile image
Tomas Rimkus

Why would you want this?

Collapse
saadabbasi profile image
Saad Abbasi Author

In my case, I just want to use payment API that's why I render angular app from the node.js to combine and run both apps with APIs on the same port in shared hosting was + point for this scenario.

SSR is beneficial Because the code compiles in the server, this is a win for low-performing devices. Servers can do all the hard work so that your user’s devices don’t have to.

Collapse
hakimio profile image
Tomas Rimkus

In this case it seems that you are only serving Angular app as static content from your express server. It doesn't seem like you are doing any SSR here. If SSR was working, you would still get rendered page when JS is disabled on the browser. I don't think it will work in your case.
Executing app.set('view engine', 'pug'); just means that express will process pug templates. Angular doesn't use pug templates.
You need to use @nguniversal/express-engine for doing Angular SSR.

Thread Thread
saadabbasi profile image
Saad Abbasi Author

Yes, Tomas, you are right, but I have a front-end angular app with Angular material UI, I want to consume Payment API only for that purpose I need backend (Node.js). I thought to run the angular app on the express server on the same port.
that's why I followed this approach.
Do you have any other best solution/suggestion?

Thread Thread
hakimio profile image
Tomas Rimkus

Another solution could be to use CORS middleware on the backend side and to just serve Angular app with nginx or some other fast http server. Both approaches have their pros and cons.

Thread Thread
saadabbasi profile image
Saad Abbasi Author

yes, sure thanks for your discussion and feedback :-)
@tomas Happy coding