What is the best way to deploy front end and back end application in Azure App Service?

Question

We are developing a front end app using Reactjs and back end using Nodejs separately but I am not very familiar with how the deployment works for back end in Azure App Service. I already deployed our front end successfully and it is now up and running in an App Service URL, but I am not sure what to do with the back end. Our front end and back end codes are sitting in two different repo and has two different pipelines. Here are the further details:

Front end code (Reactjs, Typescript) - 1 separate repo, 1 separate pipeline, deployed successfully in a different App Service URL (but im getting access denied because it needs to communicate with the back end)

Pipeline tasks (npm install, npm run build, publish build artifacts)

Back end code (Nodejs) - 1 separate repo, 1 separate pipeline, deployed but not working in a different App Service URL

Pipeline tasks (npm install, archive files, publish build artifacts)

Those two App Services (Type: Web App) that I created has the same App Service Plan. Now I have no idea how will the back end run when our front end code calls the back end.

Am I doing it correctly or do you have any idea how will my back end run in the background?

Answer 1

Try using cors in your nodejs backend app.js file, may be it is what stopping the frontend app to access the backend.

Generally what we do is:

1. Deploy frontend app, react, angular, etc on a separate app service.
2. and, nodejs app on a different app service.
3. And, call the apis of the nodejs app from the frontend.

Or,

We set up and run the client and server on the same server using a gulp file and deploy that project on an app service. In that case, there is no cross-site communication. This is the most preferred one.