SSL cert (https) for local development using AstroJS

Photo by Joshua Reddekopp on Unsplash

I’ve been working on this new test project where I needed to activate my camera on the phone to do a QR scan, but nothing seems to be happening.

There is no notification to ask for permission, no errors (so it seems), nada. I later realized that on local development, because it runs on http, certain functionalities are turned off by default and it seems that there is no way to force it on too.

I’m using Astro and tried searching on the docs, and asking on Twitter for a way to get SSL (https) working on localhost to no avail too.

Luckily Astro runs on the Vite engine and after doing a quick search on SSL for Vite, there seem to be quite a couple of solutions. Finally, I settled on using a basic SSL plugin to fix this.

First, install the plugin.

npm install --save @vitejs/plugin-basic-ssl

Add the plugin through a pass-thru that Astro has in its config.

import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  vite: {
    plugins: [ basicSsl() ]
  }
})

I’ve also added an additional host tag in my dev startup (package.json) so that it will give me an IP that my phone can connect to.

"scripts": {
  "dev": "astro dev --host",
  ...
}

Hope that helps someone out there~
Cheers!