Crash course into Astro and Storyblok

Rate this content
Bookmark
Slides

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 


In this workshop, we will quickly take a dive into the Headless World and Architecture. 


Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 


- Master headless CMS fundamentals

- Master an Astro & headless CMS approach

- Use Atomic design in your Astro & Storyblok application

- Creating pages, adding content and understanding how the dynamic routing works with headless

This workshop has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Yes, the workshop is heavily focused on hands-on activities. Participants are guided through the process of building a blog application using Astro and Storyblok, from setting up the project to integrating dynamic content and deploying the application.

While the workshop primarily covers development aspects up to the creation of the blog application, participants interested in deployment can refer to the hands-on tutorial provided by Storyblok. This tutorial offers detailed steps on deploying the application, available through links shared in the workshop resources.

Yes, the Astro Storyblok workshop includes a segment on creating dynamic menus. Participants learn to add new dynamic components like config components, which enable the creation and management of dynamic navigation menus that can be easily updated through the Storyblok interface.

The workshop utilizes several key features of Storyblok, including real-time visual editing, the ability to use headless CMS with Astro, and dynamic content management. Participants learn to create and manage content dynamically using Storyblok's visual editor and APIs.

Materials and resources for the Astro Storyblok workshop are provided on a Notion page shared during the workshop. This page contains all the necessary source codes, links to additional resources, and step-by-step instructions to follow along with the workshop activities.

The purpose of the Astro Storyblok workshop is to provide participants with an introduction to using Astro in combination with the headless CMS Storyblok. The workshop aims to equip attendees with the knowledge to build applications using Astro and Storyblok, focusing on integrating headless CMS features and atomic design principles into their projects.

Arisa Fukuzaki
Arisa Fukuzaki
119 min
04 Dec, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This workshop introduces Astro Storyblok and combines it with the headless CMS, Storyblok. It covers topics such as headless CMS, JAMstack, and the use of atomic design. Participants learn how to set up a Storyblok account, configure the preview URL, and import component schemas. They also explore real-time editing, nested components, and dynamic menus. The workshop concludes with customizing existing components, adding images, and using the Astro image component.

1. Introduction to Astro Storyblok Workshop

Short description:

Hi, everyone. Thank you for joining my workshop on Astro Storyblok. In this workshop, we will explore the intro of Astra and combine it with the headless CMS, Storyblok. We will use the atomic design and build a blog application together. Although we won't cover deployment, there is a hands-on tutorial from Storyblok for you to explore after the workshop. Let's start by gauging your knowledge of headless CMS. Have you heard of any headless CMS?

Hi, everyone. Officially, a great day. And thank you so much for joining my workshop. I hope, yeah, you're excited, as I am. This is part of the React Day Berlin. I'm not in Berlin, technically, in the conference. But if you're interested in, I know that they have very cool talks and the conference going on. And I guess they also have the virtual talks, too. Make sure to check it out.

Anyway, today we gather for crash course into Astro Storyblok. So I'm going to get started with sharing one. I would say, like, not exactly a cheat sheet, but could be a cheat sheet. So during this workshop, I'm going to be using this notion page and I'm going to share my screen to show you what I'm talking about. It's a notion page. But it has a bunch of information that you want to know while you join this workshop. And also, there are lots of sources. Don't worry about, you know, that I go fast for now. Because that's something we are going to talk and see anyway.

And here is the workshop content. So I'm going to be quite often sharing this screen, the one I sent you the link just right now. If you just joined and cannot see, let's say, the past conversation, please feel free to write in your question. And also, not to forget. So since we are doing the online, mostly it's going to be like me sharing my screen and showing you how you also can, you know, like, follow together with me. And if you, let's say, like, go a little bit behind, no problem. That's why I have this notion note for the workshop, because, let me go a little bit down. So here, from here is going to be the hands on. But here I have, like, a couple of shortcuts, that you also can have a look at it. And then in, I would say, like, every single, like, part I have, let me go down a bit here. Yeah, this here, like a little note, like every single part in the end, I have something you can actually, like, fork from the workshop repo, so that you wouldn't be, you know, like, left behind. And you can just, you know, like, fork the right branch, where you were actually working on with me, and then just swap certain keys, which I'm going to also explain to you. So that's one another house rule I wanted to show you, actually, and tell you. And this is the workshop repo, which I'm also going to share with you now. So, I hope you can see that. Yeah, I would say, like, when you have access to here, I would recommend you to open this notion page for this workshop, so that, you know, like, you have all the source code that you can just copy and paste, then you wouldn't have any typos. And to get started, first of all, the purpose of this workshop, just very quickly, is about diving into, you know, the intro of Astra. So, if you're totally new to Astra, that's also totally fine, but not just, you know, diving into the Astra world, we are also going to combine with the headless CMS, which is going to be a story block this time. So, with this workshop, you will be able to get the two knowledges at once. So, that's why, like, we have the, I would say, like, outlines or a table of content for this workshop here, and we are going to use the atomic design, and that's why I chose this headless CMS in this case. And then, yeah, we are going to see the example of the Astra and story block application with Hands-On, not just having a look at it. We are going to build together. So, in the end of this, we are going to build the blog. Let's say, yeah, the blog application, which you can also deploy later on. But in this workshop, let's say from the timeframe we have, we are not going into the deployment. But if you're interested in, there is the source, actually, the Hands-On tutorial, which is provided from the story block side. So, you can, you know, have a look at it after the workshop and deploy it. All right. So, that's the intro. And the sources, I'm going to skip it, because we're going to cover anyway together in the workshop. But to align with, let's say, like, your levels of the knowledge, I want to make sure first where we can start from, because there will be different starting point, depending on the workshop audience. So, you can participate to write your answer, yes or no, from the questions that I'm going to ask you. So, I think I'm going to start from here, like how much you have the knowledge about the headless CMS? Do you know or have heard about any headless CMS? Headless content management system. You can respond to me yes or no in the chat. And depending on that, I'm going to start from something very beginning, what is headless CMS, or we can move on to the next question. Jumpstart. Okay. I see no from Anna. Khan also says no. Okay. Patricia also says no. Okay. I see a few yes. Yes. Yes. Okay. Okay. Mm-hmm. Knowing it, but didn't try. Okay. Good. I see a good mixture of it.

2. Introduction to Headless CMS and JAMstack

Short description:

Headless CMS separates the front-end and back-end sides, improving security and allowing flexibility in choosing front-end technologies. JAMstack, which stands for JavaScript, API, and Markup, interacts with APIs to fetch data, avoiding direct interaction with databases. Storyblok is the headless CMS used in this workshop. Create a free account on the Storyblok website to continue.

So, to be more fair for everyone, I think I'm going to quickly cover about what is headless CMS. So, the very easy explanation would be like the head part and the body part, which would, let's say, like, can be translated into the front-end side and the back-end side. These are not in one place. So, I like monolithic content management system like WordPress, Drupal, actually headless CMS architecture is that you split the front-end side and back-end side. So, from the security perspective, it's also quite safer because, you know, like if you want to attack some malicious purposes, stuff like that, then you need to attack several places instead of just, you know, attacking one. So, in this way, that's also like better. And the good part is that in the monolithic world, you have to stick to the certain technology like PHP, things like that. But with the headless CMS, because you interact, you know, to fetch the data through APIs. And I mean, the front-end side is completely, you know, agnostic from the back-end side, so that you can actually choose any kind of, most of all, the front-end technologies. That's why you can, you know, like use headless CMS with Astro, like today's workshop. So, yeah, that's actually something that I can tell very quickly.

Okay. So, the next question, we covered this part. And I would say, like, do you know JAMstack? You can say yes or no in the chat. And depending on that, I will decide to go to this part or this part. Okay. Okay. I see, yeah. Mostly no so far. Yes, just heard about it. I see a few yes. Okay. Then I'm also going to quickly cover about that. And yeah. Oh, by the way, I forgot to tell you, but these are actually the links that you can watch later. So, if you don't understand, let's say, like, what I explained quickly, then you can always, you know, come to those links. These are videos very quickly that you can watch it, too. The video unavailable. Oh, is it unavailable? Let me quickly check. Oh, no. That's too bad. Okay. Sorry about that. I created this content actually not so long time ago. At the time it was working. But, anyway, I'm going to find a better one for you after the workshop. But, anyway, the JAMstack is, first of all, like, JAMstack's JAM, first of all, stands for the JavaScript and the A stands for the API and the M stands for the markup. And then, like, the thing is that you interact with the APIs to fetch the data. So, it's not going to be, like, you know, like, in the monolith world that you need to interact with directly with the databases. And you probably might have seen some of the cases or have heard of the cases that non developer users also have access to those database. And then, they do their best to modify some stuff. But then, like, it's getting to be too hard to, let's say, fix if something goes wrong. So, yeah. And to prevent that, the headless CMS uses, let's say, API first approach. And that's what the JAMstack, I would say, like, would fit the best. Or actually, it goes in the same direction. So, I could explain you or show you, like, more resources. But the point of this workshop is not dig into, like, lots of, let's say, logics or the theory about the JAMstack. So, I think I'm gonna finish around what is JAMstack at this point. But you're gonna see how I'm going to interact, let's say, to fetch the data, retrieve, and then render it in the end through the APIs. So, I think we covered this part.

And this question, the last question, I want to ask you would be, do you know Storyblok? That's actually the headless CMS we are gonna use. My guess is lots of no. Yes, I see no, no, no. Oh, I have heard of it. Nice. Okay. Okay. Good. I like that everyone is responding so quick. Thank you so much. And yeah, I'm happy to show you, actually. So, I think, what should I do? Yeah, I think I'm gonna directly show you, like, yeah, this website. So, you can already open up this website to go to the Storyblok site. And anyway, from here, I would ask you to create an account. So, while you're listening, what is Storyblok, you can already, you know, like, get access to this URL that I sent you. And then if you don't have an account, you can hit this try for free. Creating accounts are for free. And then if you already have an account and forgot, stuff like that, you can, you know, get access to log in. And while you're creating your Storyblok account or figuring out if you already have an account or not, then I'm gonna explain you what is Storyblok.

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, what else?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others
Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
Crash Course Into Astro, Kontent.ai and Portable Text
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.
Crash Course into Remix & Storyblok
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Crash Course into Remix & Storyblok
WorkshopFree
Facundo Giuliani
Arisa Fukuzaki
2 authors
You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: - Introduction to Remix, atomic design & the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&A
Prerequisite(s): Node.js installed, GitHub account.
Localizing Your Remix Website
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
Harshil Agrawal
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
Node Congress 2022Node Congress 2022
134 min
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly.
Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site.
Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Opt in Design – The New Era of React Frameworks
React Advanced 2023React Advanced 2023
23 min
Opt in Design – The New Era of React Frameworks
Watch video: Opt in Design – The New Era of React Frameworks
This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
All Things Astro
React Day Berlin 2023React Day Berlin 2023
28 min
All Things Astro
Watch video: All Things Astro
Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.
How to properly handle URL slug changes in Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
React Summit 2022React Summit 2022
21 min
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.