Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Setting Up HTTPS on localhost in Astro

  • FAQ
  • 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.