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.
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.
- production build an angular application by running the following command with angular cli
ng build --prod - after successful build you will see build files by default in
distfolder. - Install template engine by running the following command
npm install --save pug
-
```
const app = express();
app.use(express.static('../dist/interior'))//set the static path
app.set('view engine', 'pug');
5. `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})
});
6. 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})
});
##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);
});
###### 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
Top comments (6)
Why would you want this?
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.
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.
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?
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.
yes, sure thanks for your discussion and feedback :-)
@tomas Happy coding