Is Azure App Configuration suitable for different React environment app settings? - reactjs

My question is similar to this one regarding how to set up different React environment variables/app settings during deployments to different environments in Azure Devops.
These are (hopefully) my requirements
Single build pipeline triggered by different branches that creates a React app artifact
ARM template in a release pipeline that creates/updates an environment (e.g. test, prod)
React App is deployed in the same release pipeline
React application has the correct app settings for that newly created environment (e.g. API_URL for 'test')
I would like to do all this without hard coding any apps settings in my build .yaml or as build pipeline variables. The reason is if my environment hasn't yet been created by the release pipeline, how would I know what settings to inject when building the react app in the preceding build pipeline?
Is Azure App Configuration a good fit for this?
I figured I could do something like...
Create the Azure App Configuration
Setup a React app to use the App Configuration javascript client library to retrieve app settings
Inject the App Configuration connection string and environment type (e.g. test) during the build of the react app. (The environment type will be used as an app configuration label)
Use the Azure CLI to push new settings to the App Configuration during the creation/update of the ARM template in the release pipeline based on the label for that environment.
Once deployed the running app should have access to all the app settings for that environment/label.
Does this sound possible? A good idea?
I feel like this should work in theory. It doesn't matter whether the ARM template for example creates API_URL = https://test.azurewebsites.net or https://prod.azurewebsites.net, because the connection string and label of 'test' or 'prod' was passed into the react app during build, it will always have the correct values at runtime. A few downsides are the App Configuration connection string will need to be exposed as a build pipeline variable, it will need to have been created first, and I would need to implement logic in my react app to switch between loading app settings locally and from the client library
Many thanks,

An artifact (the build output) should be independent from your stage. You should always use the same artifact for any stage.
The most common way is to provide a server side-response with the client app configuration as json. Load the json on react init and inject your configuration. There is no other way to have.
Both, the client app and the config server app can run in the same app container.
You can achive this behavior both with Azure App Service and Azure Static Sites.

Related

React deployment on Azure App Service with Docker - issues with environment variables and deployment slot

I am developping an app with a Python back-end and a React frontend, dockerized in two containers from one repository and running with docker-compose. Locally everything works fine.
I need to deploy my app with a staging and a production environment in Azure App Service. Each environment needs to have its own environment variables. I use the docker-compose file in the Config box in Deployment center to deploy and run my containers (see below screenshot).
I read some other issues with environments variables and React as they need to be set a run-time. I got it to work using arguments in the docker-compose file and setting them in the Docker file directly. This means I need to have a docker-compose file for each environment.
The issue occurs when I use deployment slot in Azure App Service and swap between staging and production as the docker-compose file in the config is also swapped and there is no way to have one for each slot. I am aware of Application Settings for slot-specific settings but setting environment variables there for React doesn't work.
Any idea how to make this work ? I thought of using DevOps and pipelines but I have never used it and would like something as simple as possible to start with.

What all options we have to deploy react app on Azure

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?

How to deploy a Flask+React application to Azure Web Service

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

How to access to a React Application from an external network?

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.

Routing between App Engine Standard Environment and Flexible Environment projects in production

I have two App Engine projects in Go that comprise a single user-facing app. One project is a Standard Environment project and has the bulk of the functionality and also serves the React frontend static bundle. The second project is a Flexible Environment project and serves a specific purpose of communicating with and transferring large files to a third-party API (it is a Flexible Environment project b/c we ran into size limitations using urlfetch).
Now that I am deploying the app, I am running into a problem with api requests from the frontend. In development, our frontend node server would proxy requests, e.g. /api/project and /api/user to the appropriate App Engine services running on different ports, but in production, my standard environment project is at something like https://my-project-std.appspot.com, and the flexible env project is at something like https://my-project-flex.appspot.com.
I use a dispatch.yaml file with the std env project to route api requests (e.g. /api/project and /api/user) to the appropriate service, but am not sure the best way to route requests that should go to the flexible environment service (e.g. /api/model). Should I route them through the std env project and redirect? setup a reverse proxy? some other approach?
Thanks!
I went with a reverse proxy approach, and it is now behaving as I'd hoped. This blog post was very helpful in arriving at a solution https://blog.semanticart.com/2013/11/11/a-proper-api-proxy-written-in-go/
What does your dispatch.yaml & yaml for your services look like?
Did you mean that you have 2 services in the same project (not 2 separate projects)?
If so you can do this
https://cloud.google.com/appengine/docs/standard/python/how-requests-are-routed
https://[SERVICE_ID]-dot-[MY_PROJECT_ID].appspot.com

Resources