Exploring a new web architecture with React, Redux, Orleans and Dotnet Core
A few weeks ago, a colleague asked me if I could show him how to use Let’s Encrypt certificates for a personal website, that he was building with Dotnet. He had heard (because I bragged about it) that I had implemented a solution that automatically, on startup of a website, requests and installs a free Let’s Encrypt certificate for any url it runs on.
However, the code for this was tightly coupled with the solution it lives in, which uses a non-conventional stack: the backend is built on Microsoft Orleans. The code that I used to request the certificate runs inside an Orleans Actor object, or “Grain”. The website uses dotnet core on the “full framework” (.NET 4.6) and uses the WebListener so I can run multiple secure sites on a single cloud server in Azure. The code to install the certificate is very ugly, sending “netsh” commands to Windows.
It works very well for me, but I feared it would be hard to adapt my code to a more standard situation. To make my code usable, I’d have to do something decouple it from Orleans, package it up nicely, and generalize it so it can be applied more broadly. So that is what I set out to do: I started making a git repository and putting stuff in there that I have been using the last two years and that I thought would be worth sharing.
However, while doing that, I wanted to get something out of it for myself too, learn something new, so I decided to take the next step, and bring the solution to dotnet core proper: port it to use only .NETStandard API’s so it would work on Linux and OS-X too. That meant I’d have to get it to use Kestrel, the high-performance cross-platform web server for dotnet core.
So my integration of the Let’s Encrypt process has become a kind-of full stack framework template exercise. Let me give it a name then: I might name it RROD: for React, Redux, Orleans, Dotnet… It makes me think of what happened to my first Xbox after I tried to mod it. Creating a logo was easy.
The solution also uses websockets to subscribe to changes in real-time. This works, but it’s currently implemented somewhat low-level, as aspnet core has yet to release a new stable version of SignalR. I still want to reimplement some code in the template solution to make it work offline, using service workers, to make it even better.
In my opinion, this stack has the future: when these technologies mature, you’ll have an extremely fast, scalable stack that you can use to build anything.
So here it is: the project is at https://github.com/Maarten88/rrod
Clone it, run “dotnet restore” and “dotnet build” on it. Then do “dotnet run” in the OrleansHost folder to start the orleans server process. Finally do “npm install” and “dotnet run” in the Webapp folder to start the web server process. Open http://localhost:5000 to see the result.
There is a lot in there. Besides React, Redux, Orleans and Dotnet Core there is Let’s Encrypt certificate requests, basic user registration and authentication (with IdentityServer4, using an Orleans-based AspNet Identity backend), there is a Distributed Cache based on Orleans, an Orleans Grain that implements Event Sourcing, streaming messages over Websockets to the frontend, Typewriter for generating typescript interfaces based on serverside model classes, and more.
I’ll be writing three blogposts on it: