Time for the web UI! I’m building this using ASP.NET 5 and ASP.NET MVC 6 for the controller side and React, Redux, Immutable and TypeScript for the view layer. I’m not a fan of node.js, but I do like the web view being defined in one place so running React on the server side appeals to me. I could run it fully in the browser but servers tend to be faster than clients, especially mobile clients.

I’m using React and Redux because they work well with how I like to think about my applications. User actions trigger state changes which then cause a re-render. Having a single state object makes it much easier to figure out what causes problems, and it reduces the overall complexity of the application.

Immutable is just used for confidence that the Redux action-reducer-props pattern is followed without accidentally mutating state. I’ve seen other technology like freezer used for this, but freezer is more of a full replacement for Redux.

Setting up the server

Starting from the default ASP.NET 5 template we’re going to make a few modifications. First we’re going to switch from SQL Server to SQLite storage. If I actually release this I’d probably switch back to SQL Server, but I don’t want to run SQL Server for a website serving just me.

Unfortunately, the Entity Framework migrations aren’t database agnostic, so we first have to remove them.

dnx ef migrations remove

Then we switch over to SQLite in the project.json file by replacing EntityFramework.SqlServer with EntityFramework.Sqlite. At this point I had to make some changes to the configuration to load SQLite. I had to switch the DBContext configuration to use SQLite, so in ApplicationDbContext replace OnConfiguring with this

var appEnv = (IApplicationEnvironment)CallContextServiceLocator.Locator
                        .ServiceProvider.GetService(typeof(IApplicationEnvironment));
optionsBuilder.UseSqlite($"Data Source={appEnv.ApplicationBasePath}/mh.sqlite");

and replace the EF configuration in startup.cs with this

services.AddEntityFramework()
    .AddSqlite()
    .AddDbContext<ApplicationDbContext>();

services.AddTransient<ApplicationDbContext, ApplicationDbContext>();

and finally at the end of the Configure method I added the automatic migration call

var db = app.ApplicationServices.GetRequiredService<ApplicationDbContext>();

db.Database.EnsureCreated();

Next I regenerated the migration

dnx ef migrations add CreateIdentity

And now the demo ASP.NET MVC 6 site works, with logins and authentication using SQLite.

Next up I’ll be setting up the Javascript packages and configuring server-side rendering.