Node/Express Backend with Angular Front End in a Single Azure Web App

Question

I have a Node/Express setup in dev that outputs data as JSON for consumption. In dev that endpoint is localhost:3000/data

I also have an Angular 8 app in the same node directory for the front end. In dev, I launch two separate Node command prompts... one to run node/express at port 3000 and another to run angular at port 4200.

The goal is to have the Angular app output the data the Node/Express backend is providing... in an Azure Web App.

I have read articles that state how to deploy Angular to a WebApp, but can I have both the Node/Express backend serving data and the Angular app running in a single Azure Web App... or do I need to create two separate apps and use a CORS listing for the frontend to speak to the backend Web App?

I am guessing that I will need to use Express to launch Angular then perform a build instead of Express and Angular running on separate ports?

I don't understand why anyone would downvote that, i was looking for the exact same question. Did you figure out how to do it? — user9601534
– user9601534, Commented Dec 6, 2019 at 7:20

Gabriel Lopes · Accepted Answer · 2019-06-19 23:54:33Z

1

You can use Angular and Express on the same directory, and a middleware on express, so when you do request, the middleware identify if it's a "/data" URL or a simple URL and send the index file that angular generate on dist folder.

Move app.js to your Angular app folder
Insert this code;

     app.use(express.static(path.join(__dirname, '/dist/<your Angular App Name>')));

     app.use('/data', <your route file>);
     app.use(function(req, res) {
     res.sendFile(path.join(__dirname, '/dist/<your Angular App Name>', 'index.html'));

With this, you Angular and Express runs on localhost:3000.

answered Jun 19, 2019 at 23:54

Gabriel Lopes

1753 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user9601534 Over a year ago

Are you sure that it can run on the same port on the same instance? Have you ever tried it?

Gabriel Lopes Over a year ago

It doesn't run on same port, Express uses port 3000, angular doesn't use any port. When you deploy, your CI/CD have to execute angular build, and generate static files, so Express will send it.

user9601534 Over a year ago

Are you talking about AngularJS or Angular 8? The new angular needs a port to run, with a command "ng serve" ? Am I missing something? I am new to the new Angular. Where to execute this 'ng serve' command on a Azure web app?

Gabriel Lopes Over a year ago

Angular 8. Ng serve it's only needed when your'e developing. If you're local, run ng build --prod, to build the app, so you can deploy on any static file server. But if you're already have CI/CD, just commit to master and CI/CD do it all for you.

Collectives™ on Stack Overflow

Node/Express Backend with Angular Front End in a Single Azure Web App

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related