Azure AppService - How to connect and deploy front and back - azure-web-app-service

I'm absolutely new to Azure, CI, and CD.
I have an app consisting of a frontend developed under React + Typescript which sends CRUD requests to a typescript backend. Both front and end are NPM projects.
I've no idea on how to step from development environment to production, deploying to Azure.
Should I create two separate AppServices, one for each project?
If that's the case, how do I then connect them?
Do I just need to change the URL the server listens to?
As you can see I've no idea of what I'm doing but I'm eager to learn so any feedback is much appreciated

The most common approach is
Deploy frontend app ( react ) in one app service.
Backend nodejs app on a different app service.
Then, call the api of the nodejs app from the frontend.
Or,
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.
Using the same app service for both front end and back end application. Refer nodeexpress-backend-with-angular-front-end-in-a-single-azure-web-app.
Using Cors to connect front end and backend Check here
Refer SO Link 1 & Link 2
And You can use deploy staging slots in app service to use different environment like (test/dev, Production).

Related

Can I only deploy the server side of my react native app to Heroku?

I have a react native app that I'm building using expo. For the backend, I am using node.js and Express.
My app hierarchy is such that I have a frontend folder and a backend (server) folder. For example,
Root
|
|Frontend
|Various screens & associated files
|Server
|Routes & other files
For my project, is it possible to just host the backend and not the rest of the app? Such that when I fetch data in the frontend using HTTP requests, instead of routing through localhost (http: //RandomIP:PORT/route) I would use the heroku address as the routing address. I would also host the SQL database along with it.
I tried to follow along with the Heroku documentation, but it seemed like that was for hosting the entirety of the app / web apps instead of mobile, and I ran into constant errors.
I would like to point out that, unlike web pages, mobile apps cannot be hosted on the server and fetched on-demand. In other words, do not try to upload your react-native code to Heroku instead just upload your backend only and then make HTTP requests through the URL provided by Heroku after you have deployed your code.
Therefore go into your backend codebase, initialize a git repository and just deploy that Heroku. Also, you will need to host your SQL database on another service such as Google's Cloud SQL or Amazons AWS Database Services.

Can we implement frontend and backend separately on AWS Elastic beanstalk?

I have frontend and backend both are using nodejs. Frontend is exposed and every request for api goes through the proxy module in the frontend, and both frontend and backend communicate on different modes.
Is there a way to deploy the above module, using code pipeline onto the Elastic Beanstalk platform ?
Why not deploy the front end on Amplify AWS?
AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full stack applications, powered by AWS.
You just need to link your Repo and select your branch and everything will be deployed and generate also a random free domain or you can set your domain from the domain management section

Deploying nodejs in our own server

I am new to nodejs. I've created a simple webservice and it works on local but by using node app/nodemon app. Well I want to publish it internet and deploy my service in our server. (We do not want to use external servers/services such as heroku, azure etc.)
As I searched, peopel mostly deployed those services. So what is the best way to deploy a WS with nodejs in your own server?
I have a windows server for now but would like to use may be in linux platform later.

React.js & backend on App Engine as services?

I am deploying a React.js front-end (built with create-react-app) and a back-end with a CRUD API that connects to Cloud SQL.
Is this a good way?
React.js front-end is a default service.
Back-end API is backend service
I'm familiar with deploying to Heroku, which had front-end and back-end on different ports. Would that work for App Engine?
This is all in Node.js.
I don't see any issues with the described design.
To get you on track you can take a look in Stack Overflow thread How to deploy create-react-app to Google Cloud or the following tutorial.
You can run applications on different ports with setting port forwarding in your app.yaml file.
The design pattern is good.
You only need to create a dispatch.yaml file which is only one per project.
Your dispatch.yaml file would look something like this:
dispatch:
- url: "*/backend/*"
service: backend
Then your frontend at project-id.appspot.com will simply make requests to https:/project-id.appspot.com/backend/ *, and these requests will be redirected to the API service.

deploying frontend and backend to the same web service on azure

i have a web app that has a seperate nodejs backend and angular frontend.
is it possible to make them both run on the same azure web service? or do i need a stand alone service for each?
my nodejs server is just a light API that feeds my angular app with some statistical data to render it. if it is possible what would be the way to do it?
since i am using typescript i know i need to push my nodejs using zipdeployment and i know i need to use visual studio to push my angular project to azure. but when i want to run both on the same service, how do i do it?
is it possible to make them both run on the same azure web service? or do i need a stand alone service for each?
If you choose the Web App on Windows OS, IIS allows you to configure multiple virtual applications within a single website. For this approach, you could follow Deploying multiple virtual directories to a single Azure Website. Note: The multiple virtual applications would share the same application pool.
As kim mentioned, you pay for the App Service Plan, not for the Web App. You could also host nodejs backend and angular frontend in different web apps under the same app service plan.
For the deployment, you could leverage VS publish wizard or manually upload your files via KUDU or FTP. Moreover, you could also follow Deploy the app section about various approaches for deployment.
You can run multiple web sites in different web apps in Azure so that they are sharing the same Azure App Service.
You can think of the App Service as a virtual machine offering resources for your applications. How many web apps you can run simultaneously depends on the size of your plan, see this page for details.
This way you can deploy them separately, manually or automatically using e.g. VSTS.

Resources