This article shows how to create development certificates for a Vue.js application, so that you can develop using HTTPS. The certificates are created using the CertificateManager nuget package.

Code: CreateAngularVueJsDevelopmentCertificates

A simple .NET Core console application is used to create the certificates. This type of application can run on most of the standard operating systems. Create a new console application and add the package CertificateManager. The package Microsoft.Extensions.DependencyInjection is also required to initialize the package.

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference 
 Include="Microsoft.Extensions.DependencyInjection" Version="3.1.1" />

    <PackageReference Include="CertificateManager" Version="1.0.3" />

  </ItemGroup>

</Project>

The ServiceCollection from the Microsoft.Extensions.DependencyInjection package is used to setup the IoC. Use the AddCertificateManager method to add the CertificateManager service types. Get an instance of the CreateCertificatesRsa class using the ServiceCollection and call the CreateDevelopmentCertificate method to create the certificate. Add the domain name for which the certificate is to be used, and the length of time in years for which it should be valid. You can also add a friendly name to your certificate.

var sp = new ServiceCollection()
	.AddCertificateManager()
	.BuildServiceProvider();

var _createCertificatesRsa = 
   sp.GetService<CreateCertificatesRsa>();

// Create development certificate for localhost
var devCertificate = _createCertificatesRsa
	.CreateDevelopmentCertificate("localhost", 10);

devCertificate.FriendlyName = "localhost development";

Now the certificate can be exported. Three files will be exported. The pfx certificate can be used to add the certificate to the windows operating system. If using a different os, then export a pem file or something like that. The key file contains the private key of the certificate and the pem export contains the certificate with the public key.

string password = "1234";
var importExportCertificate = 
   sp.GetService<ImportExportCertificate>();

// full pfx with password
var rootCertInPfxBtyes = 
   iec.ExportRootPfx(password, devCertificate);
File.WriteAllBytes("dev_localhost.pfx", rootCertInPfxBtyes);

// private key
var exportRsaPrivateKeyPem = 
   iec.PemExportRsaPrivateKey(devCertificate);
File.WriteAllText($"dev_localhost.key", exportRsaPrivateKeyPem);

// public key certificate as pem
var exportPublicKeyCertificatePem = 
   iec.PemExportPublicKeyCertificate(devCertificate);
File.WriteAllText($"dev_localhost.pem", exportPublicKeyCertificatePem);

Use the Certificates with Vue.js project

Create a new Vue.js project, for example using the Vue.js CLI.

Add the new certificate files to a folder in the Vue.js project.

Add a new file called vue.config.js to the root of the Vue.js project. In this file add the HTTPS configuration with the newly created certificates.

const fs = require('fs')

module.exports = {
    devServer: {
		host: 'localhost',
		disableHostCheck: true,
        https: {
          key: fs.readFileSync('./certs/dev_localhost.key'),
          cert: fs.readFileSync('./certs/dev_localhost.pem'),
        },
        public: 'https://localhost:8080'
    }
}

The certificate needs to be trusted with the host operating system. Use the pfx file for this. On windows, just double click the file and follow the help windows to trust it.

Start the Vue application with npm run serve

And the Vue.js can be tested and run locally using HTTPS.

Links:

https://github.com/damienbod/AspNetCoreCertificates

https://www.nuget.org/packages/CertificateManager/

https://docs.microsoft.com/en-us/dotnet/core/get-started