Enabling TLS when using Astro Dev Server

2022-11-20

While working on a project I ran in to the need to enable TLS on the Astro dev server. The only Astro documentation available for enabling HTTPS did not meet my needs. So I started researching and found this discussion which discussed adding HTTPS support to the dev server. The end of that discussion led me to this Pull Request that updated Astro dev server to use Vite server. With this information I put together a plan. First I needed to generate certificates. I did not want to do this manually. While researching my options I discovered there is a mkcert plugin for vite called vite-plugin-mkcert. This plugin will generate a certificate when the dev server is started. To install the plugin I ran the following:

npm install vite-plugin-mkcert --save-dev

Now it time to configure the Vite server via Astro’s astro.config.mjs. A Vite server config block is added with https key set to true and we add we configure the mkcert plugin.

import { defineConfig } from "astro/config";
import mkcert from "vite-plugin-mkcert";

export default defineConfig({
  vite: {
    server: {
      https: true,
    },
    plugins: [mkcert()],
  },
});

Now the next time the dev server is started it will have HTTPS enabled.

astro

vite