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.
I did bring in “next generation” versions of other technologies I’ve been using. I kind of like Orleans — a lot — and Orleans has just released its first preview on dotnet core, so I did bring that in. I also put in React and Redux, using the AspNet JavascriptServices package to integrate node and webpack. I am not only using Redux on the web client; I used Redux.NET for event sourcing on the server in Orleans, the idea being that this will let me elegantly model business logic both for working online and offline.
The resulting website is not only automatically secured with a Let’s Encrypt certificate, it’s also “Isomorphic” (or universal, as some people prefer to name this), meaning it renders html both on the server and on the client, which is important because that results in both good SEO properties and fancy interactive user experiences. The client-side build process uses the latest webpack version (2.2) because I hope the treeshaking will reduce the download size and performance. It uses Preact instead of React in the production build, and additionally gzips all static assets, serving that from dotnet with a custom middleware, saving considerably on the download size. I use no external dependencies in javascript and bundle everything up locally, also for production, because I think that is the right thing to do and also because my original project involved medical data and good privacy was important.
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.
This template should be considered pre-alpha quality. It’s rough as it uses several preview release dependencies: Orleans 2.0 is still very immature, Dotnet Core is production quality but many dependencies are still missing, and all of the JavaScript technologies… well, they’re JavaScript technologies. Some parts, such as authentication, do work but are unfinished.
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:
1. Automatically request and use Let’s Encrypt certificates in Dotnet Core
2. Using React, Redux and Webpack with Dotnet Core to build a modern web frontend
3. Building a realtime server backend using the Orleans Actor system, Dotnet Core and Server-side Redux
