In this tutorial, you will learn how to make a react application work inside an ASP.NET application using a hybrid hosting technique. When working with React most people will use it as a standalone SPA host using Next.js or within a node server, like express.js.
If you have an existing platform that is built in C#, then you may want to host a react application inside an existing application. Fear not... this is doable but you will have to jump through a few hoops. In this guide, I will talk about these hoops and walk you through the process of getting a react application working in perfect harmony with your C# application.
Within this tutorial, I am going to assume that you have two separate applications a C# app and a react app. These apps are going to live within the same folder structure as each other:
- C# Application
- React.js Application
The process of getting the react app working is this:
- Within package.json update the production script to build the app inside of the C# application
- Reference the React app within a C# layout
One obvious challenge in getting the applications to work together is the unique hash. When you transpile the react application a unique hash will be generated and appended to the output files. As the unique has changed on each build, you will need a way within the C# application to access that hash so you can access the correct react files, and 404 is now thrown. To do all this will require some customization within web.pack. First, ensure all of these plugins are installed:
You will need to install all of these as dev dependencies. In this example, I am using create-react-app. You can read how to use custom web-pack scripts with create-react-app here. The following code lives within 'config-overrides.js':
This script is doing several key things:
- Create a unique hash. This value will be added to a file called 'meta.json' and copied into the C# application. This is how we can ensure the C# application can successfully access the updated react file.
- Copies all the files from the React apps 'build' folder and copies it into a folder within the C# application called 'app'
- Extract the CSS into separate files to supports On-Demand-Loading of CSS and SourceMaps for performance
After running a production build you should have a bunch of files within a folder called 'app' within your C# application. Within your C# application, you will need to do the following. First, create a service/helper to read the data within meta.json inorder for your view to know the correct filenames to load. This code assumes you use DI and you can inject this service:
Next, create a view model that can be passed into your view, like so:
Within a controller, populate the view model using the service:
Finally within your view you can access the react files, like this:
As a warning, this process is quite fiddley and may take a few hours to get working. I very much doubt you will be able to left and shift this code without some customization. If you follow the steps above of getting webpack to output files into the C# app with a meta.json file to pass any required config the C# app needs you should have a working react application within your C# project. Happy Coding!