CODEWITHSUNDEEP
node.jsangularexpressazure-web-app-service
Kode
Kode

Reputation: 3215

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

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?

Upvotes: 1

Views: 1047

Answers (1)

Gabriel Lopes
Gabriel Lopes

Reputation: 179

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.

  1. Move app.js to your Angular app folder
  2. 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.

Upvotes: 1

Related Questions