The repository is based on new Project structure on Storyblok. You can use it as a template to start your own project with Storyblok, Astro and Netlify.
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
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>
ATTENTION : 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.
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.
If you have some issue, 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 :
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