Looking at the details of it, I couldn’t see how it was being used in any way. I considered it may just be an orphan resource that was created at some point and now wasn’t being used for anything or needed. I went ahead with deleting it, and was warned the dependent resources included 318 bytes of “Tables” data, however the resource details also had some text like “this resource has no tables yet” so I went ahead and deleted it.

Unless this somehow has some bad side effect later, this issue Microsoft emailed me about was not much of an issue for me as I was only marginally affected. The copying over of data to a new smaller disk that has been on my mind for a while is also a completely separate issue.

Your decision not to migrate an existing legacy blob storage account will be construed as consent for Microsoft to migrate the account on your behalf. - Microsoft

Philosophically, if I do not do something by a certain time, is that necessarily a decision? What if I had a lot going on in my life and my technical skills were too weak? (Putting my web server on the cloud VM reminds me of when I took student loans.) But I have to admit Microsoft has summarized what to do for this in that linked-to documentation nicely. I’m not sure how much migrating a legacy storage account is coupled to specific resources like the hard disk I want to retire (it may be possible to do this with no change to it) but since this involves doing inventory of your storage resources and the new storage accounts have new pricing calculators, and I want to tackle the problem of copying data from this hard disk to a smaller one to be able to detach the 64 GB one anyway (this was a problem I said I would tackle in one of my previous blog posts… about 5 months ago 😇). The deadline is October 13, 2026, so I will take my time this week and try to learn something, too.

After resizing, I saw an interesting change in the available memory bytes. There was an initial bumpy thing then a drastic, linear decrease for a while (40 minutes or so), after which available memory continued to decrease somewhat at a slower rate and overnight stabilized at around ~340 MiB free. I am not exactly sure about the graph where the drastic decrease happens. Linux boots and starts using free memory to cache disk reads. If the resize involves restarting the VM, the RAM of the 4 Gb machine is lost, and after boot it builds the cache memory starting from 0. Maybe what it’s showing is a sum of memory while the 4 Gb VM deallocates and the 1 Gb VM pops into existence. Chat disagrees with that explanation so take it with a grain of salt but to me it seems consistent with the graph. The later slower decrease and stabilization are surely the processes continuing to warm up.

My experience with these 2 VM sizes (B-series v2 “B2pts_v2” with the same vCPUs (2), data disks (4), and max read/write speed (3750 IOPS) but either 1GiB or 4GiB RAM–which I’ve been calling 1 or 4 Gb) was that when the only app on the machine was Anki Books (Ruby on Rails), it could just barely run on the 1 Gb RAM machine. The Ruby jobs which create Anki deck package files would cause it to fall over, especially the job to find_each iterate and make every Anki deck package file. But sometimes the VM was falling over at random times without me starting those jobs. So with Anki Books and its app server Passenger using memory ruled out now, this was more a test of if it could handle my 2 relatively simpler Razor Pages apps, and so far it looks good.

Afterwards, I turned off the 2 ASP.NET Core apps, and checked the Azure portal metrics to see the available memory bytes increasing. Now I’m seeing it later and it looks like 200-300 Mb of memory was returned to the VM. I am happy my guess of 100-300 Mb per app process from the previous post was reasonable. For the graph below, imagine moving the bottom one up and to the right and connecting it on the left of the upper one.

In anticipation of moving, before I moved to Georgia, I migrated one website–Anki Books–that was being hosted on an old college thinkpad running Ubuntu to an Azure Virtual Machine which was successful. I moved from Massachusetts to Georgia to Washington in one month and my VM was serving a couple always available websites with backends and databases.

Today I have a 4 Gb RAM Azure Virtual Machine and a 64 Gb managed disk with a few app SQLite databases, thousands of zipped Anki SQLite databases, a PostgreSQL cluster, and images on disk. The VM serves a couple React apps, four ASP.NET Core apps, and a Ruby on Rails app. React apps are just static assets, Ruby is horrible for memory and cannot be salvaged on my budget, and each of the four ASP.NET Core apps is its own dotnet process which might use 100-300 Mb of memory.

Not only that, but my main website in this setup is a portfolio website with links to all of these projects, which are all hosted as subdomains of the same domain name…

My plan

First I will setup DNS records for my domain, specifically for the subdomains that prior were serving Anki Books (Rails), a weekend Razor Pages app health, and Larder (ASP.NET Core Web API). (1/21 edit: it turned out to be easier to keep the subdomains pointed to the VM and have Apache redirect requests to them.) After verifying no links are broken, I will shut down those websites, and probably edit the main website.

That will give me a much simpler architecture of just two React apps and two ASP.NET Core Razor Pages apps. With no production Anki Books, the data can be dumped into a tar file and the PostgreSQL cluster can be obliterated to save memory. With all that done, I would try resizing the VM to a 1 Gb RAM one.

If that can run on the smaller VM, great, and I could also look into attaching a smaller managed disk to the VM to save some money there.

If needed, it may be possible to refactor the architecture of the two remaining Razor Pages apps that are hopefully running on the 1 Gb machine into an architecture where they are libraries being used in one dotnet process but still hosting different apps at the subdomains. Having only two ASP.NET Core apps instead of 4 simplifies getting that refactor into production greatly.

As far as Anki Books, it may be possible to develop an ASP.NET Core app with EF Core scaffolding model classes around an SQLite database with the Ruby on Rails Anki Books data later but it would need to be after refactoring the other apps into the one ASP.NET Core host, and supposing it was possible to resize the VM to the cheaper one. If that is ultimately not successful, simply freezing everything would be my next plan.

I start with dotnet new razor -o appname, remove the included frontend assets in wwwroot, add NPM, Bootstrap, Sass, a Sass site.scss, a package.json script to compile Bootstrap to wwwroot, ASP.NET Core Identity, Entity Framework Core (with SQLite),dotnet-ef to scaffold migrations, application classes derived from DbContext, IdentityUser, PageModel, Program.cs changes, a GitHub action to deploy the app to a VM, where it will run as a systemd service, served at a subdomain with Apache virtual hosts and secured with Let’s Encrypt.

This last weekend I started a new project, health, and deployed it with about one feature developed. This blog post describes the steps I followed to develop the minimal viable product and get it deployed. (While this initial work that I’ve done several times is fresh in my mind, I want to take some notes to document before I make this into an app template.)

New Razor Pages app with Sass-compiled Bootstrap

dotnet new razor -o health created the initial application, creating a new project called health in a folder health. Inside wwwroot, the lib folder which includes Bootstrap and jQuery was deleted.

To create package.json and add Sass and Bootstrap:

npm init -y

npm install bootstrap @popperjs/core
npm install --save-dev Sass

Popper is needed for some Bootstrap components like tooltips. To customize the Boostrap theme, I added a scss/site.scss file:

$primary: rgb(23, 209, 10);
$secondary: rgb(255, 8, 8);
$warning: #e2ff24;
$success: #b56aff;

@import "../node_modules/bootstrap/scss/bootstrap";

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

This is an example of the “option A” approach in Sass (Bootstrap docs):

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won’t be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

The additional custom code here is from the original wwwroot/css/site.css that was deleted. After adding the script to build Bootstrap from node_modules using Sass to wwwroot, this is the package.json (also with scripts to copy the Bootstrap JavaScript assets-<script src="~/js/bootstrap.bundle.min.js"></script> is inside the layout </body>):

{
  "name": "health",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build:css": "sass scss/site.scss wwwroot/css/site.css",
    "build-bootstrap-js-win": "copy \"node_modules\\bootstrap\\dist\\js\\bootstrap.bundle.min.js\" \"wwwroot\\js\\bootstrap.bundle.min.js\"",
    "build-bootstrap-js-linux": "cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js wwwroot/js/bootstrap.bundle.min.js",
    "build-assets-linux": "npm run build:css && npm run build-bootstrap-js-linux"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "sass": "^1.94.2"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.8"
  }
}

Having Sass compile the Bootstrap to the same path and file name as what dotnet new means the existing <link> will pull in the stylesheet.

Adding ASP.NET Core Identity and Entity Framework Core

Next, these packages were added:

dotnet add package Microsoft.EntityFrameworkCore --version 8
dotnet add package Microsoft.EntityFrameworkCore.Design --version 8
dotnet add package Microsoft.EntityFrameworkCore.Sqlite --version 8
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 8

To save time adding using statements later, I add a GlobalUsings.cs with these since the types will be used throughout virtually every C# file in the project:

global using Microsoft.AspNetCore.Mvc;
global using Microsoft.AspNetCore.Mvc.RazorPages;
global using Microsoft.AspNetCore.Identity;
global using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
global using Microsoft.EntityFrameworkCore;
global using health.Data;
global using health.Models;

There needs to be a application class that derives from EF Core’s DbContext; but in this case to use EF Core with ASP.NET Core Identity, it derives from IdentityDbContext using a class User that derives from IdentityUser.

namespace health.Data;

public class Db(DbContextOptions<Db> options) : IdentityDbContext<Models.User>(options)
{
}

When the initial migration is scaffolded later with dotnet-ef, the target SQLite schema will include tables for ASP.NET Core Identity.

In appsettings.json, a default connection string is needed:

"ConnectionStrings": {
    "DefaultConnection": "Data Source=health.db"
  }

However, I only want that to be for development, so in Program.cs the connection string is taken from an environment variable if it’s the production environment:

string connectionString = null!;

if (builder.Environment.IsDevelopment())
{
    connectionString = builder.Configuration.GetConnectionString("DefaultConnection")
    ?? throw new InvalidOperationException(
        "Is SQLite connection string in appsettings.json missing?");
}
else if (builder.Environment.IsProduction())
{
    connectionString = builder.Configuration["health_DATABASE_PATH"]
        ?? throw new InvalidOperationException(
            "Is health_DATABASE_CONNECTION environment variable present?");
}

This is also needed to register Db and ASP.NET Core Identity services into the DI container:

builder.Services.AddDbContext<Db>(options =>
{
    options.UseSqlite(connectionString);
});

builder.Services.AddDefaultIdentity<User>(options =>
{
    options.SignIn.RequireConfirmedAccount = false;
})              .AddEntityFrameworkStores<Db>();

This command scaffolds the initial migration that will create the database:

dotnet ef migrations add Initial

and in Program.cs, after the app is created, the migrations can be run like so inside a service scope:

var app = builder.Build();

using IServiceScope scope = app.Services.CreateScope();
Db db = scope.ServiceProvider.GetRequiredService<Db>();
db.Database.Migrate();

so starting the app will create health.db.

Finally, pages can be added for login, register, and logout, which are just custom Razor Pages endpoints that use ASP.NET Core Identity services UserManager and SignInManager (see this commit for the examples). Nav links for those pages were added to the layout as well with some conditional rendering logic (in the Bootstrap navbar):

<ul class="navbar-nav flex-grow-1">
    @if (User.Identity?.IsAuthenticated == true)
    {
        <li class="nav-item">
            <a class="nav-link" asp-area="" asp-page="/Index">Home</a>
        </li>
    }
    else
    {
        <li class="nav-item">
            <a class="nav-link" asp-page="/Identity/Register">Register</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" asp-page="/Identity/Login">Login</a>
        </li>
    }

    @if (User.Identity?.IsAuthenticated == true)
    {
        <li class="nav-item d-flex align-items-center">
            <form method="post" asp-page="/Identity/Logout" class="d-inline">
                <button type="submit" class="nav-link btn btn-link p-0">
                    Log out
                </button>
            </form>
        </li>
    }
</ul>

With all that setup, the app has a database and ability to register, login, and logout users.

Initial work on the app

With this app, all the data will belong to a specific user. So all entities can derive from a class with a UserId foreign key property:

using System.ComponentModel.DataAnnotations.Schema;

namespace health.Models;

public abstract class Entity
{
    public string Id { get; set; } = Guid.NewGuid().ToString();

    [ForeignKey(nameof(User))]
    public string UserId { get; set; } = null!;

    public User User { get; set; } = null!;
}

and rather than decorate all the pages with [Authorize] individually, that can be applied to a parent class for page models where the user must be authenticated to access, with some methods to access the current user:

using System.Security.Claims;
using Microsoft.AspNetCore.Authorization;

namespace health.Pages;

[Authorize]
public abstract class AuthedPageModel(
    Db db,
    UserManager<User> userManager) : PageModel
{
    protected readonly Db Db = db;
    protected readonly UserManager<User> UserManager = userManager;

    private string? _currentUserId;

    protected string CurrentUserId =>
        _currentUserId ??= 
            User.FindFirstValue(ClaimTypes.NameIdentifier)
            ?? throw new InvalidOperationException(
                "No name identifier claim to get current user ID."
            );


    private User? _currentUser;

    protected async Task<User> GetCurrentUserAsync()
    {
        if (_currentUser is not null)
            return _currentUser;

        _currentUser = await UserManager.FindByIdAsync(CurrentUserId)
            ?? throw new InvalidOperationException(
                $"User with id {CurrentUserId} not found."
            );

        return _currentUser;
    }
}

Since the user has to be authenticated for these page models, the ! “trust me this is not null” is OK as there should be a user. Private backing fields/memoization is also used here to avoid redundantly retrieving the current user.

The page model for the index page of the site was also updated to redirect to a different dashboard page for authenticated users:

namespace health.Pages;

public class IndexModel(ILogger<IndexModel> logger) : PageModel
{
    private readonly ILogger<IndexModel> _logger = logger;

    public IActionResult OnGet()
    {
        if (User.Identity?.IsAuthenticated == true)
        {
            return RedirectToPage("/Dashboard/Index");
        }

        return Page();
    }
}

With this initial work, a single weight-tracking feature was developed: a card in the dashboard which allows entering weight measurements and a weight history page with a graph and a table of individual data points that can be deleted:

Deployment

Namecheap A record: Host is the subdomain string, Value is the VM’s IP address. After the app runs as a systemd service,

[Unit]
Description=appname

[Service]
Type=simple
WorkingDirectory=/home/.../bin/Release/net8.0/linux-arm64/publish
User=username
ExecStart=/home/.../bin/Release/net8.0/linux-arm64/publish/health
Environment=ASPNETCORE_URLS="http://0.0.0.0:5777"
Environment=health_DATABASE_PATH="Data Source=/.../health/health.db"

[Install]
WantedBy=multi-user.target

The folder may need to be set with the right permissions as the containing folder may belong to root.

Apache: reverse proxy to the app listening on the specified port by the environment variable in the service file. Once the site is served over HTTP, the command to get the Let’s Encrypt certificate is run, and the HTTP Apache .conf for the site is edited to redirect to HTTPS.

The initial approach I was using had the Trix editor itself coming from a CDN so this was just inside the </body>:

<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdn.jsdelivr.net/npm/trix@2.1.15/dist/trix.umd.min.js"></script>
<script src="~/js/trix-upload.js"></script>
<script src="~/js/trix-config.js"></script>

With trix-config.js having this:

addEventListener("trix-initialize", function (event) {
  Trix.config.blockAttributes.heading1.tagName = "h2";
});

For one thing, I realized that the event being listened to probably should have been trix-before-initialize for this. Despite making that change, as well as many other tweaks to the approach, I could not resolve the issue while Trix was being served from the CDN.

Using Trix as an NPM package to fix the problem

I decided to try refactoring to use Trix as an NPM package. My approach was to use a package.json script to copy the files from node_modules (after installing Trix with npm install Trix), specifically the ES-module build of Trix (the .esm file):

"scripts": {
    "build-bootstrap-css": "sass scss/custom-bootstrap.scss wwwroot/css/bootstrap-custom.css",
    "build-bootstrap-js-win": "copy \"node_modules\\bootstrap\\dist\\js\\bootstrap.bundle.min.js\" \"wwwroot\\js\\bootstrap.bundle.min.js\"",
    "build-bootstrap-js-linux": "cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js wwwroot/js/bootstrap.bundle.min.js",
    "build-trix-js-win":    "copy \"node_modules\\trix\\dist\\trix.esm.min.js\" \"wwwroot\\js\\trix.esm.min.js\"",
    "build-trix-js-linux":  "cp node_modules/trix/dist/trix.esm.min.js wwwroot/js/trix.esm.min.js\"",
    "build-trix-css-win":   "copy \"node_modules\\trix\\dist\\trix.css\" \"wwwroot\\css\\trix.css\"",
    "build-trix-css-linux": "cp node_modules/trix/dist/trix.css wwwroot/css/trix.css\"",

    "build-assets-win":   "npm run build-bootstrap-js-win  && npm run build-trix-js-win  && npm run build-trix-css-win",
    "build-assets-linux": "npm run build-bootstrap-js-linux && npm run build-trix-js-linux && npm run build-trix-css-linux"
  },

This project also has bootstrap assets being copied in the same way, and versions of the script to copy for Windows (development) and Linux (GitHub Action) as well as scripts that serve to just run the Windows or Linux scripts together.

Now I added to site.js (wwwroot/js/site.js default Razor pages file):

import Trix from "./trix.esm.min.js";

document.addEventListener("trix-before-initialize", (_) => {
    Trix.config.blockAttributes.heading1 = {
        tagName:       "h2",
        parse:         el => el.tagName === "H2",
        breakOnReturn: true,
        terminal:      true,
        group:         false
    };
})

and removed the trix-config.js (the change to this from the previous event listener was part of what I was trying while Trix was from the CDN). To use import requires type="module" (ECMAScript modules) so here is what went just inside </body>:

<script type="module" src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/trix-upload.js" defer></script>

With this approach, the goal of customizing the Trix editor to use h2 instead of h1 was accomplished without the issue of the heading not being preserved on editing the post content.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));

builder.Services.AddIdentity<AppUser, IdentityRole>(
    options => options.SignIn.RequireConfirmedAccount = false)
        .AddEntityFrameworkStores<AppDbContext>();

var app = builder.Build();

using IServiceScope scope = app.Services.CreateScope();
AppDbContext db = scope.ServiceProvider
                .GetRequiredService<AppDbContext>();
db.Database.Migrate();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();

app.Run();

This includes some of the comments that come with a new project scaffolded by dotnet new.

Explanation

This Program.cs doesn’t include individual using statements because they’re defined globally in a GlobalUsings.cs file:

global using Microsoft.AspNetCore.Identity;
global using todolist.Data;
global using todolist.Models;
global using Microsoft.AspNetCore.Mvc;
global using Microsoft.EntityFrameworkCore;

Global usings are a .NET 6+ feature that apply using directives project-wide, reducing boilerplate.

Typically namespaces in C# projects follow the folders’ structure, so the Models folder has the namespace appname.Models, for example. EF Core is an object-relational mapping (ORM) library for working with databases using C# classes. ASP.NET Core Identity is a library within ASP.NET Core that provides authentication and user management features. ASP.NET Core MVC is a framework within ASP.NET Core used to build web apps using the MVC pattern. Razor Pages, which this project uses, is built on top of ASP.NET Core MVC, focusing on page-based routing rather than controllers.

var builder = WebApplication.CreateBuilder(args);

Instantiates the app builder, which has a Configuration property to access the configuration, and is used to register services into the Dependency Injection (DI) container. builder is a WebApplicationBuilder.

builder.Services.AddRazorPages();

Registers support for Razor Pages, including the services and routing needed to handle .cshtml pages. In general, WebApplicationBuilder methods which start with Add are registering services into the DI container.

builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));

Registers AppDbContext (class derived from EF Core DbContext) with an SQLite connection string taken from the config.

Aside on GetConnectionString

GetConnectionString is a good example of .NET development having a very big API. GetConnectionString is a wrapper for accessing connection strings via configuration, and its use means appsettings.json has "ConnectionStrings":

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DefaultConnection": "Data Source=todolist.db"
  }
}

In my opinion, the more generally applicable syntax builder.Configuration["ConnectionStrings:DefaultConnection"] works just as well. Since GetConnectionString is a recognizable method, I use it sometimes anyway.

builder.Services.AddIdentity<AppUser, IdentityRole>(
    options => options.SignIn.RequireConfirmedAccount = false)
        .AddEntityFrameworkStores<AppDbContext>();

Registers ASP.NET Core Identity services with AppUser (class derived from ASP.NET Core Identity IdentityUser) and the default ASP.NET Core Identity IdentityRole class. The .AddEntityFrameworkStores<AppDbContext> is what makes ASP.NET Core Identity work with the database EF Core is configured to.

var app = builder.Build();

Builds the app with its configuration, registered services, and middleware. app is a WebApplication.

using IServiceScope scope = app.Services.CreateScope();
AppDbContext db = scope.ServiceProvider.GetRequiredService<AppDbContext>();
db.Database.Migrate();

Creates a service scope, gets the AppDbContext, and applies any pending migrations to ensure the database is up-to-date.

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

If not in development, uses a generic error handler and enables HTTP Strict Transport Security. This is part of the default Program.cs scaffolded by dotnet new.

app.UseHttpsRedirection();

Redirects all HTTP requests to HTTPS.

app.UseStaticFiles();

Enables serving static files (e.g. CSS, JS, images) from wwwroot.

app.UseRouting();

Enables endpoint routing system.

app.UseAuthentication();
app.UseAuthorization();

Adds authentication and authorization to the middleware pipeline (ASP.NET Core Identity). It is important to call these methods in this order since authentication must happen before authorization.

app.MapRazorPages();

Maps Razor Pages to routes in the app.

app.Run();

Starts the web application.

Normal form with file upload

For an HTML form or <input> to be able to upload a file, the enctype attribute must be set to "multipart/form-data" (see HTMLFormElement: enctype property)

<form method="post" enctype="multipart/form-data">

Then in the form there is this input for file upload:

<label for="HeaderImageFile" class="form-label">Post Card Header Image</label>
<input type="file" class="form-control" id="HeaderImageFile" name="HeaderImageFile" />

The page model (like a page controller) has a public property with a public property setter (set instead of private set;) which gets an IFormFile from model binding:

[Authorize]
public class NewPostModel(AppDbContext db) : PageModel
{
    ...

    [BindProperty]
    public IFormFile? HeaderImageFile { get; set; }

    ...
}

Then there is some logic in the POST action methods for new post and edit post, this is what adds the image to the Post object in the new post handler:

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    if (HeaderImageFile != null && HeaderImageFile.Length > 0)
    {
        using var ms = new MemoryStream();
        await HeaderImageFile.CopyToAsync(ms);
        Post.HeaderImageData = ms.ToArray();
        Post.HeaderImageContentType = HeaderImageFile.ContentType;
    }

    ...
}

The edit post logic has this:

if (HeaderImageFile != null && HeaderImageFile.Length > 0)
{
    using var ms = new MemoryStream();
    await HeaderImageFile.CopyToAsync(ms);
    post.HeaderImageData = ms.ToArray();
    post.HeaderImageContentType = HeaderImageFile.ContentType;
}
else
{
    _db.Entry(post).Property(p => p.HeaderImageData).IsModified = false;
    _db.Entry(post).Property(p => p.HeaderImageContentType).IsModified = false;
}

This makes it so if a post is edited without uploading a new file, the existing file data will not be removed when await _db.SaveChangesAsync() happens.

Post has these two properties:

public byte[]? HeaderImageData { get; set; }
public string? HeaderImageContentType { get; set; }

Post is also an EF Core entity type that has a table Posts in the SQLite database using EF Core.

public class AppDbContext(DbContextOptions<AppDbContext> options)
                                    : IdentityDbContext(options)
{
    public DbSet<Post> Posts { get; set; }
    ...
}

Thus there is this table (from the sqlite_master SQLite system catalog):

type   name                                      tbl_name               rootpage  sql 
table  Posts                                     Posts                  29        CREATE TABLE "Posts" (
    "Id" TEXT NOT NULL CONSTRAINT "PK_Posts" PRIMARY KEY,
    "Content" TEXT NOT NULL,
    "CreatedAt" TEXT NOT NULL,
    "Title" TEXT NOT NULL
, "HeaderImageContentType" TEXT NULL, "HeaderImageData" BLOB NULL, "Featured" INTEGER NOT NULL DEFAULT 0) 

So what this shows is the file upload data is being stored as the data value in the SQLite database in a column with the BLOB type. An SQLite database is a single on-disk database file.

To use that image in the HTML, the Razor pages <img> gets a src like so:

@if (Model.HeaderImageData != null && Model.HeaderImageContentType != null)
{
    var base64 = Convert.ToBase64String(Model.HeaderImageData);
    var imgSrc = $"data:{Model.HeaderImageContentType};base64,{base64}";
    <img src="@imgSrc" class="card-img-top" alt="Header Image" />
}

The data: URLS MDN article explains the src syntax there.

Trix editor file uploads and deletes

With Trix and <trix-editor> setup, there are some Trix JavaScript events that event listeners can add fetch calls to:

document.addEventListener("trix-attachment-remove", function (event) {
    const attachment = event.attachment;
    const url = attachment.getAttribute("url");
    if (url) {
        fetch("/uploads/trix?url=" + encodeURIComponent(url), {
            method: "DELETE"
        }).catch(err => console.error("Delete failed:", err));
    }
});

document.addEventListener("trix-attachment-add", function (event) {
    const attachment = event.attachment;
    if (attachment.file) {
        uploadTrixFile(attachment);
    }
});

function uploadTrixFile(attachment) {
    const file = attachment.file;
    const formData = new FormData();
    formData.append("file", file);

    fetch("/uploads/trix", {
        method: "POST",
        body: formData
    })
    .then(response => {
        if (!response.ok) throw new Error("Upload failed.");
        return response.json();
    })
    .then(data => {
        attachment.setAttributes({
            url: data.url,
            href: data.url
        });
    })
    .catch(error => {
        console.error("Upload error:", error);
    });
}

To me, the simplest way to handle that on the server is with an API controller. Although lilgobguides is a Razor pages app, controllers can be added by registering their services and mapping their routes with builder.Services.AddControllers(); and app.MapControllers(); in Program.cs.

With those services in place, the specific controller for handling the Trix editor events’ fetch requests is:

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;

namespace lilgobguides.Controllers;

[ApiController, Route("uploads")]
public class UploadsController(IWebHostEnvironment env) : ControllerBase
{
    private readonly IWebHostEnvironment _env = env;

    [Authorize, HttpDelete("trix")]
    public IActionResult DeleteImage([FromQuery] string url)
    {
        string fileName = Path.GetFileName(url);
        string path = Path.Combine(_env.WebRootPath, "uploads", fileName);

        if (System.IO.File.Exists(path))
            System.IO.File.Delete(path);

        return Ok();
    }

    [Authorize, HttpPost("trix")]
    public async Task<IActionResult> UploadImage(IFormFile file)
    {
        if (file == null || file.Length == 0)
            return BadRequest("No file uploaded.");

        string uploadsPath = Path.Combine(_env.WebRootPath, "uploads");
        Directory.CreateDirectory(uploadsPath);

        string fileName = Path.GetRandomFileName() + Path.GetExtension(file.FileName);
        string filePath = Path.Combine(uploadsPath, fileName);

        await using var stream = new FileStream(filePath, FileMode.Create);
        await file.CopyToAsync(stream);

        string fileUrl = Url.Content($"~/uploads/{fileName}");
        return Ok(new { url = fileUrl });
    }
}

[Authorize] enforces simple authorization (authentication) on both controller actions. [ApiController] does quite a lot including automatic 400 responses for requests failing model binding and conventional routing based on the class name.

This shows the images uploaded from the Trix editor are saved on the disk in the public web wwwroot folder with randomly generated file names, making them static assets of the site. In the other case, they were stored as BLOB values in the SQLite database with image data written into the HTML during server HTML rendering.

An alternative to saving the images in wwwroot would be to store them in a different folder, and use a controller to serve them from there. I used this approach in a quick project once about a year ago:

[ApiController, Route("api/[controller]")]
public class UploadedImagesController(ILogger<UploadedImagesController> logger, 
                                    IConfiguration config,
                                    GalleryDbContext dbContext) : ControllerBase
{
    private readonly ILogger<UploadedImagesController> _logger = logger;
    private readonly IConfiguration _config = config;
    private readonly GalleryDbContext _dbContext = dbContext;

    [HttpGet("{imageId}")]
    public IActionResult Get(string imageId)
    {
        UploadedImage? image = _dbContext.UploadedImages.FirstOrDefault(file => file.Id == imageId);

        if (image == null) return NotFound();

        string uploadedFilesPath = _config.GetValue<string>("StoredFilesPath")!;

        string uploadedFilePath = image.PathToFile(uploadedFilesPath);

        if (!System.IO.File.Exists(uploadedFilePath)) return NotFound();

        return PhysicalFile(uploadedFilePath, "image/png");
    }
}

Bootstrap as an NPM package and SCSS compilation

There were some considerations with regards to Bootstrap; a new Razor pages app created with dotnet new razor has already compiled Bootstrap in the project inside wwwroot/js and wwwroot/css. This approach limits how much customization you can do (see Customize Bootstrap docs). In order to customize the Bootstrap theme, I install Bootstrap as an npm package and have this scss/custom-bootstrap.scss in the project root:

$primary: #ff00a6;
$body-bg: #121212;
$font-family-base: 'Segoe UI', sans-serif;

@import "../node_modules/bootstrap/scss/bootstrap";

Then in package.json, sass is included as a dependency, and there is an npm script to compile the Bootstrap SCSS and place the compiled Bootstrap CSS in wwwroot/css:

{
  "name": "lilgobguides",
  "version": "1.0.0",
  "description": "Old School Runescape Guides For Ultimate Irons",
  "main": "index.js",
  "scripts": {
    "build-bootstrap-css": "sass scss/custom-bootstrap.scss wwwroot/css/bootstrap-custom.css",
    "build-bootstrap-js-win": "copy \"node_modules\\bootstrap\\dist\\js\\bootstrap.bundle.min.js\" \"wwwroot\\js\\bootstrap.bundle.min.js\"",
    "build-bootstrap-js-linux": "cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js wwwroot/js/bootstrap.bundle.min.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.3.6",
    "sass": "^1.89.0"
  }
}

In the above there are also two scripts for copying the Bootstrap JS to wwwroot/js; one is for my Windows machine that I use to develop the site, and the other is for the GitHub Actions runner which is Linux.

GitHub action

With those npm scripts, the GitHub action is:

name: deploy-lilgobguides

on:
    workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: '8.0.x'
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install npm packages
        working-directory: .
        run: npm install
      - name: Build Bootstrap CSS
        working-directory: .
        run: npm run build-bootstrap-css
      - name: Build Bootstrap JS
        working-directory: .
        run: npm run build-bootstrap-js-linux
      - name: Publish self-contained executable
        run: dotnet publish . -r linux-arm64 --self-contained true
      - name: SCP dotnet executable to VM
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.PRIVATE_SSH_KEY }}
          source: "./bin/Release/net8.0/linux-arm64/publish"
          target: ${{ secrets.lilgobguides_DEPLOY_DIRECTORY }}

The above checks out the repo, installs .NET, Node, and the npm packages, runs those scripts in package.json to compile/copy the Bootstrap assets to wwwroot, compiles the .NET project (now including those frontend assets) into a self-contained assembly targeting linux-arm64 and SCPs the resultant artifact to the host machine with the appleboy/scp-action.

systemd service

On the Azure VM there is a systemd service file for the app /etc/systemd/system/lilgobguides.service:

[Unit]
Description=lilgobguides

[Service]
Type=simple
WorkingDirectory=/path_to/lilgobguides/bin/Release/net8.0/linux-arm64/publish
User=user-which-app-runs-as
ExecStart=/path_to/lilgobguides/bin/Release/net8.0/linux-arm64/publish/lilgobguides
Environment=ASPNETCORE_URLS="http://0.0.0.0:5002"
Environment=lilgobguides_DATABASE_PATH="Data Source=/path_to/lilgobguides.db"

[Install]
WantedBy=multi-user.target

This allows starting up the app with sudo service lilgobguides start or sudo service lilgobguides restart; if changes are made to that file it is necessary to run sudo systemctl daemon-reload first; and sudo service lilgobguides status shows the status and if that shows the app has exited sudo journalctl -u lilgobguides.service -n 50 can be useful to see the problem.

User= sets the user that the process will start under; as the Program.cs has the SQLite database initially created by migrations, that affects the file ownership of that database.

Specifying the working directory avoids path-related errors.

Environment=ASPNETCORE_URLS="http://0.0.0.0:5002" sets an environment variable that has the effect of the running app listening to HTTP on that port. If this environment variable was set to two origins, those would be for HTTP and HTTPS, and my experience with this work was that with two origins set, the app would listen on the HTTPS one. In my case I am using Apache to serve the site over port 443 with HTTPS and acting as a reverse proxy to the app server, so it’s fine for it to use HTTP.

The above also sets an environment variable for the path to the SQLite database; in Program.cs it is used here:

string dbConnection = null!;
if (builder.Environment.IsDevelopment())
{
    dbConnection = builder.Configuration.GetConnectionString("DefaultConnection")
    ?? throw new InvalidOperationException("No database connection string");
}
else if (builder.Environment.IsProduction())
{
    dbConnection = builder.Configuration["lilgobguides_DATABASE_PATH"]
    ?? throw new InvalidOperationException("Is there environment variable for database path?");
}
builder.Services.AddDbContext<AppDbContext>(options =>
        options.UseSqlite(dbConnection));

If the "DefaultConnection" value in appsettings.json were used as in development, the database would be created in the deployment folder with the .NET assemblies.

Apache configuration

The Apache .conf file for the site:

<VirtualHost *:443>
        ServerName lilgobslayerguides.net
        ProxyPreserveHost On
        ProxyPass / http://localhost:5002/
        ProxyPassReverse / http://localhost:5002/
        ErrorLog ${APACHE_LOG_DIR}/app-error.log
        CustomLog ${APACHE_LOG_DIR}/app-access.log common

        SSLEngine On
        SSLCertificateFile /path_to/lilgobslayerguides_net.crt
        SSLCertificateKeyFile /path_to/lilgobslayerguides.net.key
        SSLCertificateChainFile /path_to/lilgobslayerguides_net.ca-bundle

        SSLProtocol -all +TLSv1.2
</VirtualHost>

With Apache virtual hosts, the VM is able to serve multiple websites over the same port and IP address (port 443 for HTTPS, and it is the same IP address since it is the same VM) by matching the ServerName with the request; this shows how Apache is used as a reverse proxy and conventional names for the TLS cert files.