3

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?

Deegee
  • 91
  • 1
  • 5
  • It should be working just as you said: you can deploy them in two different app services. Your react frontend just needs to have the URL for the backend app service - and not assume that the backend is running on the same URL. did you do that? – silent Aug 12 '20 at 09:15
  • Yes but everytime Im testing the backend (im clicking the app service url for the backend) it redirects to the link of the front end. Both URLs are added in the RedirectURI in the App Registrations. Any idea why? – Deegee Aug 12 '20 at 12:47
  • it looks like you have enabled Authentication for your backend? And, when you access the backend directly, it's redirecting? is that the case? – Prawin Aug 12 '20 at 12:49
  • Hi @Prawin, no I did not enable Authentication in the App Service but I did add the App Service URL of my backend to the Authentication - RedirectURIs in the App Registrations. Is my setup correct? – Deegee Aug 12 '20 at 14:29
  • You can [refer my answer in another post](https://stackoverflow.com/questions/63369928/deploy-node-js-server-and-angular-app-to-azure-web-service/63371420#63371420). You can put two project into on App Services with virtual application. – Jason Pan Aug 13 '20 at 07:31
  • Hi Deegee, Not get your latest information, is it helpful for you? Or if you have any concern, feel free to share it here, we will check it and help you. – Vito Liu Aug 17 '20 at 10:43

1 Answers1

3

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Priyanshu Tiwari
  • 173
  • 11