Develop and dockerize .NET Core app with React SPA frontend, including pre-rendering
I am currently using #stayathome time to do something good and progress with my side project and I am working firstly on the “IAM” for my small ecosystem which I want to develop later on.
During this work, I am finding some information which I am going to share to hopefully save some of your time.
I am doing something which was not described anywhere which is replacing Razor Pages as the UI with React-based SPA, but I will write about it more in the other articles in coming weeks or months.
Anyway, during this development, I came across the issue with building .NET Core 3.1 app with React app inside, partially due to the changes with SPA Extensions (SPA Services have been deprecated recently) which are not yet well documented and also because I decided to do that without React-NET Core template as it was better to use IdentityServer4 template with .NET Core Identity as it provided much more value than pure React+.NET Core template.
Include create-react-app in your .NET Core server
I assume here, you created your project under the root of your project, within the frontend folder. wwwroot can be completely empty.
You have to install Microsoft.AspNetCore.SpaServices.Extension package.
Then to make it work during the development, you have to add the following code to your Configure function inside Startup.ts :
I am running React dev server from the console as it is easier to see errors and to restart React app without restarting .NET Core app, but if you want to use it all together, just remove the uncommented line and use commented line instead.
To make it work in production you have to add the following code:
But this is not the end. If you did not use the template, you have to modify the .csproj file to make it properly build.
Then I have decided to add the react-snap to improve UX with the pre-rendered HTML views, which are hydrated as soon as JS loads up.
Docs are located here, so feel free to take a look and install it in your project.
Dockerize
Dockerizing .NET Core apps is usually quite simple, especially .NET Team provides us with many different base images which make our lives easier.
However setup with .NET Core + React + react-snap was not that easy :)
To make the build happen you need NodeJS, Yarn and … chromium!
Chromium is required by react-snap to make crawling happen, so it can generate HTML code out of your React.
This is where things became harder for me, so I hope I will save you some time.
You need reactSnap config inside your package JSON on the side of the Chromium available during the build to make it work.
I am always trying to minimize the size of the Docker images for many reasons downloading, my VPS storage etc), so I am using alpine based images.
With some Googling through the Github issues and blog posts, I have managed to get working Docker build and I made it publicly available.
The Dockerfile for the builder image:
However, thanks to Github actions and Docker hub, I managed to make it available for you in an easy way in your app Dockerfile :
I hope it will help you to get it built quickly without any issues.
Links:
Thanks for the reading!
