{"id":90021,"date":"2021-02-22T18:28:34","date_gmt":"2021-02-22T18:28:34","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=90021"},"modified":"2022-04-24T21:22:39","modified_gmt":"2022-04-24T21:22:39","slug":"integrate-create-react-app-with-net-core-5","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/integrate-create-react-app-with-net-core-5\/","title":{"rendered":"Integrate Create React app with .NET Core 5"},"content":{"rendered":"

The Create React <\/em>app is the community\u2019s preferred way to spin up a brand new React project. This tool generates the basic scaffold to start writing code and abstracts away many challenging dependencies. React tools like webpack and Babel are lumped into a single dependency. React developers can focus on the problem at hand, which lowers the bar necessary to build Single Page Apps.<\/p>\n

The question remains, React solves the problem on the client-side, but what about the server-side? .NET developers have a long history of working with Razor, server-side configuration, and the ASP.NET user session via a session cookie. In this take, I will show you how to get the best of both worlds with a nice integration between the two.<\/p>\n

This article has a hands-on approach that reads better from top to bottom so you can follow along. If you feel comfortable enough with the code, it is available on GitHub<\/a> for your reading pleasure.<\/p>\n

The general solution involves two major pieces, the front and the back ends. The back end is a typical ASP.NET MVC app anyone can spin up in .NET Core 5. Just make sure that you have .NET Core 5 installed and that your project is targeting .NET Core 5 when you do this to unlock C# 9 features. I will incrementally add more pieces as the integration progresses. The front end will have the React project, with an NPM build that outputs static assets like index.html<\/em>. I will assume a working knowledge of .NET and React, so I don\u2019t have to delve into basics such as setting up .NET Core or Node on a dev machine. That said, note some of the useful using statements here for later use:<\/p>\n

using Microsoft.AspNetCore.Http;\r\nusing System.Net;\r\nusing Microsoft.AspNetCore.Authentication.Cookies;\r\nusing Microsoft.AspNetCore.Authorization;\r\nusing System.Text.RegularExpressions;     <\/pre>\n
Initial Project Setup<\/h2>\n
The good news is that Microsoft provides a basic scaffold template that will spin up a new ASP.NET project with React on the front end. This ASP.NET React project has the client app, which outputs static assets that can be hosted anywhere, and the ASP.NET back end that gets called via API endpoints to get JSON data. The one advantage here is that the entire solution can be deployed at the same time as one monolith without splitting both ends into separate deployment pipelines.<\/p>\n
To get the basic scaffold in place:<\/p>\n
mkdir integrate-dotnet-core-create-react-app\r\ncd integrate-dotnet-core-create-react-app\r\ndotnet new react --no-https\r\ndotnet new sln\r\ndotnet sln add integrate-dotnet-core-create-react-app.csproj<\/pre>\n
With this in place, feel free to open the solution file in Visual Studio or VS Code. You can fire up the project with dotnet run<\/code> to see what the scaffold does for you. Note the command dotnet new react<\/code>; this is the template I\u2019m using for this React project.<\/p>\n
Here is what the initial template looks like:<\/p>\n
<\/p>\n
If you run into any issues with React, simply change directory into ClientApp<\/code> and run npm<\/code> install<\/code> to get Create React App up and running. The entire app renders on the client without server-side rendering. It has a react-router<\/code> with three different pages: a counter, one that fetches weather data, and a home page. If you look at the controllers, it has a WeatherForecastController<\/code> with an API endpoint to get weather data.<\/p>\n
This scaffold already includes a Create React App project. To prove this, open the package.json<\/em> file in the ClientApp<\/em> folder to inspect it.<\/p>\n
This is what gives it away:<\/p>\n
{\r\n  \"scripts\": {\r\n      \"start\": \"rimraf .\/build && react-scripts start\",\r\n      \"build\": \"react-scripts build\",\r\n    }\r\n}<\/pre>\n
Look for react-scripts<\/em>; this is the single dependency that encapsulates all other React dependencies like webpack . To upgrade React and its dependencies in the future, all you need to do is upgrade this one dependency. This is the React App’s real power because it abstracts away an otherwise potentially hazardous upgrade to stay on the latest bits.<\/p>\n
The overall folder structure follows a conventional Create React App project in ClientApp<\/em> with an ASP.NET project wrapped around it.<\/p>\n
The folder structure looks like this:<\/p>\n
<\/p>\n
This React app comes with many niceties but lacks some important ASP.NET features:<\/p>\n