Inside ASP.NET Core 6 React Template
Templates are a great place to start your project they remove a lot of the need to write boilerplate and integration code for your particular use case. But they also have complex code that might be useful to be looked at to understand the whole process of how you application works. In this article I will look into what ASP.NET Core 6 creates as a react template.
There are 2 templates you can start with. I am going to investigate the one without Redux.
After the creation of the template, we can see a mix of structure where we have a ClientApp folder for our React app and we also have some Razor pages.
As of normal .NET 6 app the server and app start from the Program.cs, which will run your C# code as backend and also serves the front-end app. In Microsoft documentation it is explained that you also want to split it and the react app to use its own development server if you do not want the app to restart when you change the c# code: Use the React project template with ASP.NET Core | Microsoft Docs
The magic to redirect to the React app is in the code:
When a razor page is not found for the Url request then a fallback to index.html will be made and from there react-router will kick in and redirect to the correct page.
Also, it is interesting how .csproj is configured to install node modules. You can see there is a build step before every of your build that the node — version is called and if the command returns Error Code 0 meaning it was successful then it continues with ‘npm install’ otherwise your build will return an error.
There is also a step for publishing which will add ‘npm run build’ to minify, gzip and make a production build of the react app. In this way the ASP.NET Core reuses npm and does several steps without the need for you to do anything. It is however good to know about those things as if you need to publish with another platform then those steps need to be added to the pipeline.
When you take a look into the generated ClientApp folder several things make impression which may not be known right away.
ASP.NET Core template generates api-authorization which is very nicely written and of course would be responsible to protect your pages from unauthorized access. The code is very nicely written and there are comments to understand different aspects of the code so you can try to go through it.
Other interesting things that are not obvious right away is this service-worker, proxy and reportWebVitals. Those files are generated from the template of Create React App. They are very well documented in they own website.
Service worker is used to precache files and improve performance, it is optional whether to use or not but using it can give you the possibility to create Progressive Web Application and to let your application work even offline with cached data. More here: Making a Progressive Web App | Create React App (create-react-app.dev)
Setup Proxy is used to have a nice integration with the backend server of ASP.NET Core so that you can have a good experience calling endpoints and not worry about defining host and ports. More here: Proxying API Requests in Development | Create React App (create-react-app.dev). Also as already mentioned Microsoft explain how to use the proxy to split the dev server of the React and C# Web API: Use the React project template with ASP.NET Core | Microsoft Docs
Web Vitals is also an optional part of the Create React App. It serves to measure performance of your app. By default, the file is generated but you need to pass a function to tell where the analytics should be send. More can be read here: Measuring Performance | Create React App (create-react-app.dev)
There are also 2 files that setup HTTPS for your application.
If you want to read more in-depth about https you can do it here Enforce HTTPS in ASP.NET Core | Microsoft Docs
But essentially what these files do is that aspnetcore-https.js looks whether a certificate exists and if it does not it runs the command to generate a certificate. You can read more here Generate Self-Signed Certificates Overview — .NET | Microsoft Docs
The file aspnetcore-react.js finds the correct path and generates your environment file so that it can be used from webpack proxy when building the solution. And webpack proxy is something that Create React App uses behind the scenes. Abstraction on top of Abstraction on top of Abstraction but this how you reach an easier development experience. This is the generated file structure:
And the file contains the path to your certificate:
So, this is it for now I hope you enjoyed and wish you happy coding.
