English versionEN

Crash Course Into Astro, Kontent.ai and Portable Text

Please sign in to watch this workshop.

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.

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

FAQ

The workshop aims to provide an overview of integrating various technologies with a headless CMS using Astro, including importing content, creating components, and implementing rich text resolutions. It is designed for participants to follow along and apply the concepts in real-time.

The workshop covers frontend development using Astro, TypeScript, and the headless CMS from Content.ai. It includes hands-on exercises with Visual Studio Code, Git, and integration of these technologies to build a sample airline website.

A headless CMS, like Content.ai used in the workshop, is a back-end only content management system that provides content as data over APIs without a built-in presentation layer. It allows developers to use their own tools and technologies to present content, which in the workshop is demonstrated by integrating with an Astro project.

Astro is presented as a modern web development framework that focuses on delivering efficient, performant websites by shipping less JavaScript. It allows developers to build websites using UI components and supports multiple rendering strategies, making it suitable for various web projects.

Portable text is a standard for representing rich text data independently of the underlying CMS. In the workshop, Andrej demonstrates how to convert rich text from Content.ai into portable text format, enabling easier integration and manipulation within the Astro framework.

Participants in the workshop undertake tasks such as setting up a project environment, importing content into Content.ai, creating and running an Astro project, and implementing features like rich text resolution and type-safe data fetching with TypeScript models.

The final output of the workshop is a fully functional sample website for an airline, named Contenare, built using Astro and Content.ai. The website demonstrates the integration of various technologies and the practical application of headless CMS in frontend development.

Ondrej Polesny

91 min

22 May, 2023

Comments

Available in other languages:

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, what else?

React Advanced 2023

102 min

Fetch, useEffect, React Query, SWR, what else?

Top Content

Workshop

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

react query headless cms react query vs useeffect react swr react useeffect swr vs react query

Crash course into Astro and Storyblok

React Day Berlin 2023

119 min

Crash course into Astro and Storyblok

Workshop

Arisa Fukuzaki

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

astro headless cms

Building Blazing-Fast Websites with Next.js and Sanity.io

React Summit 2023

71 min

Building Blazing-Fast Websites with Next.js and Sanity.io

Workshop

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.

next.js headless cms sanity react

Crash Course into Remix & Storyblok

Remix Conf Europe 2022

162 min

Crash Course into Remix & Storyblok

Workshop

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.

headless cms

Localizing Your Remix Website

React Summit 2023

154 min

Localizing Your Remix Website

Workshop

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

web development headless cms remix internationalization

Astro: All Hands On

React Day Berlin 2024

126 min

Astro: All Hands On

Workshop

Elian Van Cutsem

Mentorship available

The web is capable of way more than we might think. During this workshop, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

astro

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

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

Emanuele Stoppa

Active contributor to the Biome project

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.

astro next.js serverless

Opt in Design – The New Era of React Frameworks

React Advanced 2023

23 min

Opt in Design – The New Era of React Frameworks

Watch video: Opt in Design – The New Era of React Frameworks

Ben Holmes

Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.

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.

astro builders and founders frameworks preact

All Things Astro

React Day Berlin 2023

28 min

All Things Astro

Watch video: All Things Astro

Elian Van Cutsem

Mentorship available

Astro Ambassador

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.

astro

How to properly handle URL slug changes in Next.js

TypeScript Congress 2022

10 min

How to properly handle URL slug changes in Next.js