In this tutorial, you will learn how to make a ReactJS application work inside of a C# website. When building a new ReactJS application on its own, you might use a node server like express.js to host the site, or, potentially, you may consider a static site generator like Gatsby or Next.js.

If you have an existing website that is built in C#, you may still want to harness some ReactJS goodness without having to rebuild the whole website. You may even be using a CMS like Episerver, Sitecore, or Umbraco. To save on hosting costs, you may be forced into having your ReactJS application hosted within your C# webroot.

Getting these two different applications to work together is possible, however, it will require some slightly different configurations compared to running them both separately. You will have to jump through a few hoops in order for both applications to work in harmony. One problem that will need to be solved is file references. Every time you create a new production build for your ReactJS application, a unique hash is appended to bundle.js as a cache busting strategy. As the C# website will contain the HTML that references all the files required to run and launch the ReactJS application, e.g. runtime-main.js and bundle.js, how do you keep these files references up-to-date when a new production ReactJS build is made? In the remainder of this tutorial, I will guide you through the process of getting a ReactJS working in perfect harmony with your C# application in this dual hybrid mode. The aim is to automate everything. We do not want to manually update file references every time we build!

The process of enabling these two things to work in harmony can be split into two main steps:

  • Within the ReactJS application, using web-pack, update the production script to build the app inside of the C# application
  • Within the C# website, reference all the files that are required to launch the ReactJS within the HTML

The biggest challenge of getting these two different applications to work together is the unique hash. When you transpile the ReactJS application and create a production build, a unique hash will be generated and appended to the output files. As the unique hash changes on each build, you will need a way to access the hash within the C# application so you can reference the ReactJS files correctly. The simplest way to achieve this is to pass the hash into a file that the C# website can then access. This will require some customization within web-pack.

First, ensure all of these NPM packages are installed within your ReactJS application (when installing add of these packages as dev dependencies by using --save-dev modifier when doing an npm install.:

The ReactJS application that is being used in this tutorial was built using create-react-app. If you are using create-react-app you will need to enabled web-pack modification to make the tweaks mentioned below. You can learn how to do this here. Assuming your application is set up in the same way as the instructions mentioned above, within config-overrides.js you will need to make these changes (if you are using web-pack normally then this code will go in your webpack.js):

This code is doing several key things:

  • It creates a unique hash using uniqid. The hash will then be added to a file called 'meta.json'. After the hash has been added, 'meta.json' will be copied into the C# projects webroot. Writing the hash that is appended to the production ReactJS scripts into a file that the C# website can access is the key for the applications working together.

  • It copies all the outputted files from the ReactJS 'build' folder and copies them into a folder within the C# website called app. In this example, both applications are in the same GIT solution. The ReactJS application is within a folder called ReactApp.UI and the C# website is in a sibling folder called CSharpApp.

  • It extracts the CSS into separate files to support on-demand-loading of CSS and SourceMaps for performance

After running your production build within NPM, a bunch of files within a folder called 'app' within your C# application should now exist.

To load the output of the build folder from within your website will require two things. First, create a service/helper to read the data within meta.json to get the value of the hash. The code below does exactly that (it assumes that you use dependency injection and you can inject this class as a service):

After getting the hash we need to pass the value into a view. To follow good MVC practices this should be done using a view model. An example of how this view model might look can be seen below:

Within your page controller, populate the view model using the service:

Finally, within your view you can access the hash and reference the ReactJS scripts, like this:

It took me a good few hours to get this configuration up and running the first time I attempted it. I very much doubt that you will be able to simply lift and shift this code without some customization. If you keep the steps outlined above in mind then things should be straightforward. Manually generate the hash, get web-pack to use that has to output the production files. Next, output the build folder into the C# app along with a meta.json file. Configure the C# app to read meta.json and use the hash to reference the ReactJS files within the HTML and all should be well! Happy Coding!