Running Astro Locally With HTTPS

Table of contents

Intro

Astro has been my framework of choice for a little bit now. This post isn’t to talk about all the virtues of working with Astro, just a simple post about running Astro locally under HTTPS. At the very least, so I remember next time I want to do it.

Setup

You can follow the instructions from storyblok, or do the following to take it a step further and avoid an SSL cert error in your browser (learn more here):

Install mkcert to your Astro project:

$ npm install -D vite-plugin-mkcert

Update your astro.config.mjs:

import mkcert from 'vite-plugin-mkcert'

...
...

export default defineConfig({
    ...,
    vite: {
        plugins: [ mkcert() ]
    }
})

And… that’s it! Next time you start your project (npm run dev, or whatever), it should start at: https://localhost:4321/ (with no security warning when you load it in the browser).