Combining Angular Frontend and Express Backend in One Azure Web Application

Backend
1

I’m working on a project that uses Express to serve JSON data and Angular 8 for the frontend. Right now, I run them separately in development:

  • Express backend on port 3000
  • Angular frontend on port 4200

I want to deploy this to Azure as a single web app. Is it possible to have both the Express API and Angular app running together in one Azure Web App? Or do I need to create two separate apps and use CORS?

I’m thinking I might need to use Express to serve the Angular app after building it, instead of running them on different ports. But I’m not sure how to set this up properly.

Has anyone done this before? What’s the best way to structure the project for deployment? Any tips or examples would be really helpful!

2

yeah, u can totally do that in one azure app! i’ve done it before. just build ur angular app and put the files in a ‘public’ folder in ur express project. then use express.static to serve those files. make sure ur api routes don’t conflict with angular routes. it’s pretty straightforward once u get the hang of it!

3

ooh that sounds like an interesting project! have u thought about using a reverse proxy setup? it could help manage both parts smoothly. what kinda data are u serving with express? i’m curious how complex ur api is. have u looked into azure’s app service for node.js? it might be a good fit for ur setup!

4

Combining Angular and Express in a single Azure Web App is indeed possible and can be quite efficient. I’ve implemented this approach in a production environment. The key is to configure Express to serve your Angular app after it’s built.

Here’s a high-level overview of the process:

  1. Build your Angular app using ‘ng build --prod’.
  2. In your Express app, use middleware to serve the Angular files.
  3. Set up your Express routes to handle API requests.
  4. Configure Azure to run your Express app.

This setup allows you to manage both frontend and backend in one codebase, simplifying deployment and reducing costs. Just ensure your API routes are prefixed (e.g., ‘/api’) to avoid conflicts with Angular routes.

Remember to thoroughly test this configuration before deploying to production. It’s also worth exploring Azure’s CI/CD pipelines for smoother deployments.