Setting Up HTTPS on localhost in Astro

During development, apps are usually served via HTTP. However, Storyblok v2 requires your app to be served via HTTPS. Please follow the steps below to enable this in an Astro project.

• Install @vitejs/plugin-basic-ssl in your Astro project.

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

• Import basicSsl in your astro.config.mjs:

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

• Configure Vite correctly in your astro.config.mjs:

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

• Run your project using npm run dev.

Your project will now be served on https://localhost: 4321 . Before it works in the Storyblok Visual Editor, you may have to accept the certificate by opening https://localhost: 4321/ in a separate browser tab/window.