.NET Aspirations - Use ASP.NET Core HTTPS Development Certificate

It's a good practice to use HTTPS in your local development environment to closely match the production environment and prevent future HTTPS issues.

In a previous article, I discussed how to set up HTTPS on a web application with an ASP.NET Core API and a Nuxt.js front end. This was done using the ASP.NET Core HTTPS Development certificate. However, for the front end, it required using the dev-certs built-in command of the .NET CLI to export the certificate files (key file and pem file). That's fine, but it would be better if this step could be automated when using .NET Aspire. Let's explore that.

As usual, we will use our AspnetWithNuxt sample. In our WebApp, we currently assume that the certificate files are already generated and available in our folder, so the paths to these files are hard-coded in the Nuxt configuration:

  $development: {
    routeRules: {
      '/api/**': {
        proxy: 'https://localhost:7238/**',
      }
    },
    devServer: {
      https: {
        key: 'dev-cert.key',
        cert: 'dev-cert.pem'
      }
    }
  },

What we would need instead is to use environment variables that contain these paths and default to the hard-coded values otherwhise:

  $development: {
    routeRules: {
      '/api/**': {
        proxy: `${import.meta.env.ApiUrl}/**`,
      }
    },
    devServer: {
      https: {
        key: import.meta.env.CERT_KEY_PATH ?? 'dev-cert.key',
        cert: import.meta.env.CERT_PATH ?? 'dev-cert.pem'
      }
    }
  },

That seems better. But now we need a way to ensure the certificate files exist, generate them if they don’t, and automatically inject these environment variables. Ideally, this would be configured in the AppHost by calling a specific method when defining the WebApp resource.

And guess what, there is an issue on the .NET Aspire GitHub repository discussing exactly such a method. Unfortunately, at the time of writing this method is not built-in but can be found in the aspire-samples repository. We just need to copy it and place it in our AppHost project

Then we can call this method like this:

var webApp= builder.AddPnpmApp("WebApp", "../WebApp", "dev")
    .WithHttpsEndpoint(env: "PORT")
    .WithExternalHttpEndpoints()
    .WithPnpmPackageInstallation()
    .WithReference(webApi)
    .WaitFor(webApi)
    .WithEnvironment("ApiUrl", webApi.GetEndpoint("https"))
    .WithEnvironmentPrefix("NUXT_PUBLIC_")
    .RunWithHttpsDevCertificate("CERT_PATH", "CERT_KEY_PATH");

And that's it. Thanks to .NET Aspire, setting up HTTPS in our application is now easier. And from what I've read about the issues on the repository, it seems there are likely improvements coming to .NET Aspire to make this feature built-in and even better. Anyway, this is a great example of how we can easily customize .NET Aspire to fit our needs and enhance the developer experience.

You can find the complete code here. Keep learning.