Convert a React App to an ASP.NET Core React Application

I was recently tasked with working on a small web application that allows customers to enter non-sensitive information. Our internal administrators review the submitted information and take the necessary actions.

Since this was an internal application, we didn’t have any specific authentication or authorization requirements. The application also didn’t have direct access to the master database. Instead, it retrieved customer information from a snapshot repository.

The application made two API calls:

• Retrieve customer information from the snapshot repository.
• Save updated customer information to the snapshot repository when customers submitted changes.

Administrators were also notified whenever a customer updated their information.

A couple of months earlier, I had created a simple React application without a backend and deployed it to IIS on a Windows 2000 server. It had been running successfully since then.

Recently, one of my peers asked why I hadn’t used the ASP.NET Core React template and pointed out that we might need a server-side backend in the future.

That got me curious. How easy would it be to convert an existing standalone React application into an ASP.NET Core React application?

In this article, I’ll walk through how I approached the migration.

If you’re interested in setting up an Azure DevOps CI/CD pipeline for a React application, check out React App CI/CD Pipeline Using Azure DevOps.

Prerequisites and Existing Setup

Before getting started, here’s a quick overview of my existing React application and development environment:

• The React application was created using create-react-app.
• npm was used to manage dependencies and build the application.
• Visual Studio Code was my IDE.
• The application used additional packages such as react-router, react-router-dom, axios, and node-sass-chokidar.
• I had added custom npm scripts in package.json to install dependencies and build the application for different environments.

The codebase had two main folders:

• public: Contained index.html, manifest.json, and other static assets.
• src: Contained the application source code, including app.jsx, components, and service code.

Now, let’s convert this standalone React application into an ASP.NET Core React application.

There are multiple ways to accomplish this. I’ll explain the approach I used with Visual Studio 2019.

I assume you have a basic understanding of ASP.NET Core web applications. If you need a refresher, refer to the ASP.NET Core documentation.

Step 1: Create an Empty Visual Studio Solution

First, I created an empty Visual Studio solution named Dhrutara using Visual Studio 2019.

Creating an empty solution is simply my personal preference. It allows me to name the solution and individual projects independently.

Step 2: Add an ASP.NET Core React Application

Next, I added an ASP.NET Core Web Application project named Dhrutara.Web.

When selecting the project template, I chose React.js and Redux.

This creates a Single Page Application (SPA) using ASP.NET Core as the backend and React as the frontend.

If you look at the generated project structure, you’ll notice three main folders:

• ClientApp: Contains the React frontend application.
• Controllers: Contains ASP.NET Core API controllers.
• Pages: Contains the server-side Razor Pages.

The Controllers and Pages folders should look familiar if you’ve previously worked with ASP.NET Core applications.

The only unfamiliar part might be the ClientApp folder. However, if you look inside it, you’ll notice that its structure is very similar to our existing standalone React application.

This raised an interesting question: Could I simply replace the contents of the generated ClientApp folder with the contents of my existing React application?

Let’s find out.

Step 3: Clean Up the ClientApp Folder

Delete all the existing files and folders under the ClientApp directory.

This cleanup is important because we don’t want to retain the default React application files generated by the Visual Studio template.

Step 4: Copy the Existing React Application

Copy all the files and folders from the root directory of your existing React application (Dhrutara) into the ClientApp directory of the ASP.NET Core project (Dhrutara.Web).

Make sure you copy the entire application structure, including public, src, and package.json.

Step 5: Run the Application

That’s it! Now, press F5 or click the Run button in Visual Studio to start the application.

If you encounter TypeScript-related errors, check whether a tsconfig.json file still exists in the ClientApp directory.

In my case, I didn’t need that file, so I simply deleted it.

Important: Stop the application before deleting tsconfig.json. If the application is already running, deleting the file without restarting the application won’t resolve the issue.

Conclusion

And that’s it! We have successfully converted an existing standalone React application into an ASP.NET Core React application using the Visual Studio 2019 template.

The migration was surprisingly straightforward. Since the ASP.NET Core React template already provides the necessary frontend and backend integration, we can reuse most of our existing React application without having to recreate it from scratch.

This also gives us the flexibility to introduce server-side functionality and ASP.NET Core API endpoints whenever the application requires them.