We are developing a single page application using AngularJs having an index file at the root which will be served by web server to client. Backend for this application is a HTTP restful on a different server. Currently when developing this SPA application, we are using Node with express server. We need to deploy this application to azure. There are two deployment options available.
Deploy either as web application on azure (I think its IIS server in this case)
Or deploy on IIS using IIS Node module
We need to have a rewrite rule, which will serve index page for every other request to server in both cases.
Which one is better deployment model? Only IIS or iisnode module with IIS server or if anyone can suggest another option available for SPA on Azure?
The most straight forward would be to deploy it as an Azure App Service Web App (Previously Azure Website). It supports node and you can do your rewrite rules in web.config system.webServer section.
You can read the Azure App Service "Hello world" on Node here
Azure can run Express.js apps out-of-the-box, and has been able to for some time now. You don't need to worry about writing a web.config or anything.
Quick tutorial: Here
Basically, you need to copy the /bin/www file to /server.js, and edit the var app = require('../app'); to read var app = require('./app');
Then run it like any other Azure app.
Related
I have just finished the local development of my Web API (ASP.net) and the User interface (AngularJs) and I would like to put it in a Tomcat server. I really need help getting this done.
I really have no ideas
Apache Tomcat is for Java-based applications and will not work. If you are on Linux you would use something like nginx or apache. If you are on windows, you would setup your ASP.NET Core site in IIS or as a windows service. If you have the option, I recommend hosting on a cloud provider such as Azure.
We currently have a reactjs front end app that runs on its own and is deployed to an azure app service on one sub domain, and a back end app, the api, an asp.net core app that is deployed to another app service on its own subdomain. Both have authentication managed by a third app, that uses identity server to authenticate requests to either the front or backend, that also is its own app service in azure. We'd like to combine the front-end and back-end. Is it possible for them to run together if we create a wwwroot folder in the api project and move the react app into there, and then modify the api project to serve static files? How does that impact the auth server usage in the mix? I assume that means we'd need to move to take advantage of duende bff then. Is this common? We'd like to do this in an effort to stop jwt token usage, because having the front end and back end in the same project/app would mean they are the same domain and we could authenticate with the auth server and get a samesite browser cookie for auth instead of the front end directly going to the auth server to get a token and store it in browser storage.
Microsoft Visual Studio already has a project template that uses ReactJS(for front-end) and C#.Net Core(for back-end).
You should have used this template while making this project solution in the first place.
As your ReactJS and .Net Core projects already exist, it will be difficult to combine them.
I am not sure whether it will work successfully but while checking the project structure. I noticed that the React app was placed in the Client App folder in the .Net Core project.
If it doesn't work then you could use the template from the Visual Studio project and try to move your code into that project.
Below are some helpful references:
Use React with ASP.NET Core
Integrate Create React app with .NET Core 5
Single project that contain React plus ASP.NET Core MVC Application
Azure web app Easy auth (with Azure AD auth) is working for windows web apps, but not on Linux web app.
After enabling the easy auth with Azure AD the web app url shows page not found.
When I checked the web app logs, the container has started and ready to serve the requests. But the web app still shows same Not Found error.
If I disable the easy-auth the web app is working as is.
My azure web app tech stack is
React SPA running on Node LTS 14 in a Linux web app.
Not sure if I am missing something on configuration. Any help is appreciated.
Thanks in advance...
Please check if below cases :
Note :
Limitation : App Service on Linux is not supported on Shared pricing tier.
Linux Azure Web Apps uses pm2 to serve a node app
Go to Azure app service> Configuration > General Settings.
If your build folder is at the root of the project,give Start up command: pm2 serve /home/site/wwwroot --no-daemon –spa
Please go through these related issue References to trouble shoot :
reactjs - Web App Linux - Stack Overflow
React App not starting in azure app service - Stack Overflow
Also please check this Blog.
According to Azure App Service | Microsoft Docs
This error could be due to one of several reasons:
The custom domain configured is missing an A record or a CNAME
record.
The web app owner has moved the web app to a different region, but
the DNS cache is still directing to the old IP Address that was used
in the previous region.
Clear the browser cache and cookies for the site and test for DNS
resolution/ dns entries if they are still pointing to an old IP.Edit
and correct dns in that case.
In your app page, select TLS/SSL settings. Then make HTTPS Only to On.
Also, suggest you Enable diagnostics logging for web apps in Azure App Service incase if you haven’t enabled earlier to check the complete error details and root cause.
I have been working on this app on my localhost, which has Flask as the backend (localhost:5000) and React as the front end (localhost:3000), and they have been communicating well. Now I am supposed to put it up online so that other ppl can see it as well - I didn't have much experience in Azure, but how can I deploy these two components(React&Flask) into one URL on Azure web app service? (Before I had some experience in using FTP to upload the 'build' folder to a "site/wwwroot" folder to put up a simple React app without any backend)
Newest
After testing, the python project is deployed in the webapp, the react project is deployed in the virtual application, and the normal node project is also deployed in the virtual application.
Deploy the flask python project to the windows environment, the normal deployment method will fail, please be sure to follow this blog document (third-party document) to operate, it works for me.
Running Flask app with HttpPlatformHandler in Azure App Services
The effect is shown in the figure. You can see that the normal node project can be accessed normally, but the react project is not. I think there are some bugs. (Has raised a support ticket to confirm)
The deployment method of virtual application is recommended to adopt the publishing method shown in the figure below.
Privious
It is recommended to choose windows when creating azure web app, because windows supports virtual application.
We can deploy flask app normally and deploy react app in virtual app.
Under normal circumstances, the process.env.port of the two webapps is the same and will not interfere with each other because of the virtual path.
Reference post:
1. Vue Frontend and Express backend on same Azure web app Service
2. Azure Front Door Is Not Maintaining Custom Domain in Browser
I have react JS as my client side framework and Node JS express is my API backend services with SQL database on a home project. The app runs locally on my machine and I want to deploy the app in azure. I am not sure if I have to take 2 app services instances to manage my frontend and backend or take a linux VM and manage the deployment myself as I am doing now locally with nginx and pm2.
Considering scalability in future, how to deploy in Azure and what I have to take as Azure components?
I'm assuming you are using the free tier for learning purpose as you said it is a home project?
For scalability and availability, I would go with a 3-tier architecture, the first tire is for the compute stuff (the nodejs app), deployed in an auto scalling group of minimum two instances all behind an Azure load balancer
The second-tier is the DB, I would go for Azure Databases for this
And last, is your React app, if it is a statically generated app (like Gatsby), I would go for Static website hosting in Azure Storage, otherwise it is best to put the React server in the same Linux instance as Nodejs app, and use path redirection in the load balancer to target the App
PS: this will cost a considerable amount of money depending on the load, but you don't have to care about the scalability, also you don't need to manage your database anymore.