How To Develop and Build React App With .NET Core Backend

Learn How you develop and build with an example project

Bhargav Bachina
Bachina Labs
Published in
7 min readMar 2, 2021

--

There are so many ways we can build React apps and ship them for production. One way is to build React with Nodejs, Java, or .NET and another way is to build the React and serve that static content with NGINX web server. With .NET we have to deal with the server code as well, for example, you need to load the index.html page with .NET core

In this post, we will see the details and implementation with .NET Core. We will go through step by step with an example.

  • Introduction
  • Prerequisites
  • Example Project
  • How To Build and Develop The Project
  • Interaction Between React and .NET API
  • How To Build For Production
  • Summary
  • Conclusion

Introduction

React is a javascript library for building web apps and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of React with all the dependencies(CSS and js files) in the browser. In this case, we are using .NET Core Web API which loads React assets and accepts any API calls from the React app.

React with .NET

If you look at the above diagram all the web requests without the /api will go to React routing. All the paths that contain /api will be handled by the .NET Core API.

Prerequisites

There are some prerequisites for this article. You need to have .NET Core installed on your laptop and how http works. If you want to practice and run this on your laptop you need to have these on your laptop.

You can check the .NET Core version with the following command once it is installed.

dotnet --version

--

--