What all options we have to deploy react web application to Azure?
Few options which I have already explored are: Azure web app, Container instance, Azure blob storage as static website.
What all other options we have to deploy the react web app to Azure? What option is better for react app (With regards to Availability, cost, maintenance)?
Also, To run react app, all we need is artifacts (like js, css, images etc.) which we can get by running simply build command so do we really need server to execute the code? can we not directly host it to some storage and then browsing it?
Related
I have deployed Django and React application on Azure. I am using Web Application for Containers. One Web App is for Django and second one is for React (CORS headers are properly confiured, both apps are connected to each other). Docker images are stored on Azure Container Registry.
I am looking for an option to switch both apps to Maintenance mode when doing some maitenance things or deploying. I was thinking abouting creating extra env variable called MAITENANCE_MODE in Application settings where I can switch manually from false to true and then it switches the mode on websites automatically. Another idea would be to create some webjobs but I am not familiar with these topics and I am asking for an advice on how to do it or at least where to look for such solution.
I have done one of the tutorial for aws amplify (the todo app). When it was done I had no more need for it so I deleted the application from the cloud.
Then one though hit me. If I have the source code locally (or hypothetically in git) for my amplify application, can't I somehow recreate the app in the cloud again from the source? if I understood it completely it is supposed to be infrastructure-as-code.
Currently, Amplify CLI doesn't support this.
Amplify is not an Infrastructure as Code.
From the AWS Documentation:
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. With Amplify, you can configure app backends and connect your app in minutes, deploy static web apps in a few clicks, and easily manage app content outside the AWS console.
Even if it's not supported, apparently there is some way to add services to the newly created Amplify from the existing Amplify backend.
https://github.com/aws-amplify/amplify-cli/issues/3505#issuecomment-597897873
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 am running a React application on a Windows Server. I can access to it from browser using both the local machine and another pc on the same local network, but not from an external network.
I've tried both the development mode, ip:3000, and production mode with ip:5000.
Now I am wondering if it's a networking issue or I need to do something in my React code.
I didn't find anything in the documentation.
What do you do to make available an application to others?
Thanks.
You can setup firebase to you react app and deploy you application on firebase console.
Login in firebase using google account
Create project and app
Complete firebase setup to the project
Create Build and Deploy app on firebase.
Follow below link for steps :
https://medium.com/#aleemuddin13/how-to-host-static-website-on-firebase-hosting-for-free-9de8917bebf2
https://medium.com/swlh/how-to-deploy-a-react-app-with-firebase-hosting-98063c5bf425
Firebase project has free subdomains on the web.app and firebaseapp.com domains. You can access via these links.
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.