Starter Astro with Storyblok

The Github repository : https://github.com/jpkha/astro-storyblok-starter

Usage

If you are first-time user of Storyblok, read the Getting Started guide to get a project ready in less than 5 minutes.

For further information on @storyblok/astro check the repository

Installation

Here the code to astro.config.mjs, replace the STORYBLOK_TOKEN_ACCESS in your .env file

import { defineConfig } from "astro/config";
import storyblok from "@storyblok/astro";
import tailwind from "@astrojs/tailwind";
import netlify from "@astrojs/netlify/functions";
import { loadEnv } from "vite";
const { PUBLIC_ENV, STORYBLOK_TOKEN_ACCESS} = loadEnv(import.meta.env.MODE, process.cwd(), "");
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  output: PUBLIC_ENV === 'preview' ? 'server' : 'static',
  adapter: PUBLIC_ENV === 'preview' ? netlify() : undefined,
  integrations: [
    storyblok({
      accessToken: STORYBLOK_TOKEN_ACCESS,
      bridge: PUBLIC_ENV !== 'production',
      components: {
        page: "storyblok/Page",
        feature: "storyblok/Feature",
        grid: "storyblok/Grid",
        teaser: "storyblok/Teaser",
      },
    }),
    tailwind(),
  ],
  vite: {
    server: {
      https: true,
    },
    plugins: [basicSsl()],
  },
});

You can check the .env.example

PUBLIC_ENV=preview
STORYBLOK_TOKEN_ACCESS=<your token access>

Dynamic Slug

<u>ATTENTION</u> : In this repository I'm using [...path].astro instead of [slug].astro.

In my opinion, using [...path].astro provide more flexibility with Storyblok, for further informations. Briefly, with [...path] you can generate any path depth you need.

Development

In this repository we use @vitejs/plugin-basic-ssl so the application will be launch at https://127.0.0.1:3000/ by default and you should not have any problem to embedded your app in Storyblok.

Alternative method

<u>If you have some issue</u>, you can also try this :

Use this command npm run dev-sb, in order to launch the application and the proxy so you can embedded your localhost in Storyblok

"dev-sb": "astro dev & local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem"

If you haven't set any https://localhost:3010 yet, you need to use mkcert :

• Setting up Dev Server with HTTPS Proxy On macOS

• Setting up Dev Server with HTTPS Proxy On Windows

Deployment

What the purpose of PUBLIC_ENV ?

If you deploy your project in static for production, you won't see any change from Storyblok. If you set up one environment for production and another one for the preview mode which will be in SSR you can check your change before deploying in production.

In this repository I use Netlify but you can use any other adapter instead