React integration with Azure and ASP.NET core
How to start
Integration of React with ASP.NET and Azure is surprisingly simple. I will showcase our solution for React client-rendered front-end with ASP.NET Core back-end.
AspNetCore provides a package with specific support for React application to be run as SPA service:
Microsoft.AspNetCore.SpaServices.ReactDevelopmentServerTo set it up it’s enough to create React directory within root directory (ClientApp) in our case and add this lines to the Configure method in Startup.cs
app.UseSpa(spa => { spa.Options.SourcePath =
Path.Join(env.ContentRootPath, "ClientApp"); if (env.IsDevelopment())
spa.UseReactDevelopmentServer(npmScript: "start");});
Then of course we need to setup the React application itself it can be anything but let’s assume for now that it was created with a create-react-app template, meaning it has “install”, “build”, “start” scripts and the build directory is called “build”.
The next step is to update csproj file with build definitions. So that we can build the whole project with React and ASP.NET services at once.
As you can see here, we are simply running npm install and later build. Below we define the distribution directory from which the files will be served by the asp.net backend.
Two additional things that should be done are ensuring that node in install and that react source is not published alongside build directory.
This should be enough to get the application running.
Passing data from ASP.NET core to React App
The development of React application and back-end API can generally be separate from now on. One major thing that I was slowed down by was how to pass secrets from Azure Key Vault and other crucial data from back-end to front-end. This can be done with environment variables, we can fetch the secrets in application’s CI build process and set them as environment variables. So how to pass them to build process defined in csproj file? We just have to update the PublishRunWebpack step. In this case I am referencing FrontendEnv property that I have added that in turns takes the Application Insight key environment variable.
With this we can map the values from REACT_APP_CONFIG variable to our config and use it in application, this way it will be set in the build version of the application.
Packages support
Microsoft provides many packages both for C# as nuget packages, as well as npm packages that allow for simple integration with their services in Azure. In our case we have used a package for Azure Application Insights and an unofficial package for AD B2C authentication. In both cases the integration was very fast and painless. I can say that packages are a great highlight and allow for easily maintainable and consistent ecosystem.
