React integration with Azure and ASP.NET core

Maya Karabuła-Stysiak
3 min readJul 23, 2021
React, ASP.NET, Azure integration

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.ReactDevelopmentServer

To 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.

install and build calls in csproj file

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.

Properties definition
Ensure that node is install
Don’t publish source and node_modules

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.

pass environment variable to build process
define property by accessing available environment variables

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.

Final step, get the environment variable in index.html, this will be replaced during build process

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.

--

--