Published on: 20 October 2020
Author: Ramesh Kanjinghat
I was recently tasked with working on a small web application that allow customers to enter non-sensitive information. Our internal Admin users then review the information and take necessary actions.
There was no concern surrounding authentication and authorization for this intranet application. The application has no direct access to master database instead it reads customer data from a snapshot repository. The application makes 2 API calls. Once call to read customer data from the snapshot repository and one call to save the details to snapshot repository when customers update their details. Admin users get notified when customers update their details.
I have decided created a simple react app with out any server back end and deployed on IIS on a windows 2000 server couple of months ago. It’s been running successfully since then. Ours is Recently one of my peers asked me why didn’t I use Asp.Net Core React template and what if we ever need to have a server backend. So, I wanted to see how easy it would be to convert and pure react app in to an Asp.Net Core React app.
Please check https://dhrutara.net/2020/06/21/react-app-azure-devops-pipeline/, If you are interested to know how to setup Azure Devops CI/CD pipeline for a react app.
Setup
- The react app was created using create-react-app command.
- Npm to manage dependencies and build the app.
- Visual Studio Code as IDE.
- Other packages like, react-router, react-router-dom, axios, node-sass-chokidar etc.
- I have added some custom npm scripts in package.json to install dependencies, environment builds etc.
- The code base has 2 main folders, public and src.
- public has the files index.html, manifest.json and other assets.
- src has all the code including app.jsx, components, service code etc.
Now I will try to make it an Asp.Net Core React app. There could be multiple ways to achieve this but I will try to explain how I did it.
I assume that you are well aware of Asp.Net Core web applications. Please refer https://docs.microsoft.com/en-us/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-3.1 if you need a brush up or learn Asp.Net Core web applications.
Step 1: I have created an empty visual studio solution, Dhrutara. I have used Visual Studio 2019.
Creating an empty solution is my personal preference. I do this so that my projects can have different names as it suits.
Step 2: Now add an Asp.Net Core Web Application, Dhrutara.Web. Select React.js and Redux template.
This creates a Single Page Asp.Net Core React application. If you look at the folder structure in the below image you will notice that there are 3 main folders, ClientApp, Controllers and Pages. You will find folders, Controllers and pages quite familiar, if you have ever developed an Asp.Net Core Web Application.
The only alien here is ClientApp folder. But if you observe closely the content of this folder is not that alien to us. It has the same structure as our pure react app. So, I wanted to see what happens if I replace this content with my pure react apps content.
Step 3: Delete all the folders and files under ClientApp folder. This cleanup is required otherwise you will end up having the original files from the template.
Step 4: Copy the folders and files from the root folder of our pure react app, Dhrutara to Dhrutara.Web.ClientApp folder.
Step 5: Now hit the run button or F5 key.
If you see TypeScript error then check if you have the file tsconfig.json still in ClientApp folder. In our case we can simply delete that file.
It is must to stop the app, delete the file and then run the application. Deleting the tsconfig file while app running wont fix the issue.
That is it. We did it.