在单个 Azure Web 应用程序中具有 Angular 前端的 Node/Express 后端

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?

Answer 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.

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.