How to Create an Astro Project with Storyblok

Welcome to Code & Chill with Storyblok#3 - Astro Edition!
Welcome & Intro
We start our event with a warm welcome from Manuel Schröder. We will walk you through what Code & Chill with Storyblok is all about and what you can expect in this edition. Learn more about our Twitch initiatives and what's in store for you.
Manuel Schröder - Developer Relations Engineer @ Storyblok
In the world of Storyblok & Astro
We discuss how you can easily whip up an Astro project to a freshly created Storyblok Space. This is also going to include live coding so get excited.
Ben Holmes - Core maintainer @ Astro
---
Find out more on our social media:
LinkedIn: [ / storyblok ]
Twitter: [ / storyblok ]
Instagram: [ / storybloklife ]
If you have any questions, feel free to:
- Use our live chat to talk to us directly: [www.storyblok....]
- Write on our forum at [forum.storyblo...]
- Leave a message on our Discord
- Submit a contact form: [www.storyblok....]
- Or simply, check out our documentation and user guides at [www.Storyblok.com.]

[@uixandy]

Looks super interesting. Is there also a way to create components with a no-code approach? Like having a visual builder for developers to create new components instead of having to code them?

[@Storyblok-com]

While Storyblok doesn't provide a no-code approach, users have the option to build their front-end clients using no-code tools. It's important to mention that programming skills are still required to connect to the Storyblok API

[@kalwiggins423]

I don't see astro in the quickstart options anymore. Would love to be able to set up a quick demo as I've had trouble getting it to work otherwise.

[@Storyblok-com]

Hi, @kalwiggins423, please check out this link. You will have an Astro + Storyblok project set up in a matter of seconds:
www.storyblok.com/technologies

[@briankgarland]

As soon as I tried NPM Run Dev it hangs, then throws this error if I try to go to the web page:
error Request failed with status code 401
file:///C:/Users/User/Projects/AstroStoryblok/IandJ/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:57611
const stringified = JSON.stringify(payload);
^
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'ClientRequest'
| property 'socket' -> object with constructor 'TLSSocket'
--- property '_httpMessage' closes the circle
at JSON.stringify ()
at Object.send (file:///C:/Users/User/Projects/AstroStoryblok/IandJ/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:57611:38)
at object. [as send] (file:///C:/Users/User/Projects/AstroStoryblok/IandJ/node_modules/astro/dist/core/module-loader/vite.js:57:17)
at Object.webSocketSend (file:///C:/Users/User/Projects/AstroStoryblok/IandJ/node_modules/astro/dist/core/module-loader/vite.js:45:28)
at Timeout._onTimeout (file:///C:/Users/User/Projects/AstroStoryblok/IandJ/node_modules/astro/dist/vite-plugin-astro-server/response.js:16:49)
at listOnTimeout (node:internal/timers:564:17)
at process.processTimers (node:internal/timers:507:7)

[@briankgarland]

Fixed it (thanks to someone on Discord). If in the US, need to add this to the config:
apiOptions: {
region: 'us',
},

[@Storyblok-com]

Thank you so much for sharing! It's very valuable!