React Day Berlin

React Day Berlin 2023

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.

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 &amp; headless CMS approach- Use Atomic design in your Astro &amp; Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless

Crash course into Astro and Storyblok

Arisa Fukuzaki

React Advanced

React Advanced 2023

This workshop covers data fetching strategies in JavaScript, focusing on Fetch API, Axios, SWR, and React Query. It provides examples and guidance on implementing these strategies in a React application. Troubleshooting and deployment issues, such as CORS, are also addressed. The workshop concludes by highlighting the advantages and use cases of SWR and React Query, and encourages participants to choose the best strategy based on their project's needs.

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

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

Ondrej Polesny

React Summit

React Summit 2023

The Talk discusses the need for a revolutionary product that will change the way people edit websites. It highlights the challenges faced in visual editing and the limitations of existing CMSs. The Talk also emphasizes the benefits of headless CMSes for developers but acknowledges the sacrifice of visual editing. Ultimately, a solution is sought that caters to both content editors and developers.

1. A brief history of web content management since 1996, with alternating code and visual tools:    - The “FTP” era: Code editors &gt; FrontPage/Dreamweaver    - The “monolithic” era: CGI/ASP/PHP simple CMSs with gray tables &gt; WordPress visual &gt; WordPress with ACF    - The “current” era: Headless CMSs &lt;&gt; Visual tools like Wix and WebFlow 2. Why now’s the time we need a new kind of CMS 3. What is React Bricks 4. The experience for content editors (explained by a customer’s content editor) 5. The experience for developers (explained by a partner agency’s web developer)

Visual CMS… cool for React devs? Now’s the time!

Matteo Frana

This workshop covers building blazing fast websites with Next.js and Sanity. It explores the benefits of headless architecture and CMS tools like Sanity. The workshop guides participants through setting up the repo, working with Sanity and Next.js, and deploying to production on Vercel. Content modeling in headless CMS and schema creation in Sanity are explained. The workshop also covers using Grok to query content, connecting content with Next.js, and deploying to production with Vercel.

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.

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

Nancy Du

Nataliya Ioffe

Today's workshop covers the basics of various topics, with a focus on Rich Text Resolution in Headless CMS. Participants will learn how to import content, create pages and components, generate TypeScript models, and resolve rich text. The workshop also discusses portable text and its benefits. The use of Astro as a front-end framework is highlighted, along with its compatibility with React, Vue.js, and vanilla JavaScript. Participants will also learn about working with environments, fetching data, and adding custom components in Astro.

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 Astro, Kontent.ai and Portable Text

The Workshop covered various topics such as introduction to localization and Remix, project setup, creating components, implementing content and internationalization, differences between Remix and Next.js, configuring internationalization, updating titles and navigation, introduction to Contentful, content model and localization, and dynamic routing. Key points include the importance of localization for target regions, the capabilities of Remix as a framework, the process of setting up a Remix project and configuring internationalization, the use of Contentful for managing content, and the implementation of dynamic routing in Remix.

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

Localizing Your Remix Website

Harshil Agrawal

Remix Conf Europe

Remix Conf Europe 2022

Arisa and Facundo introduce themselves and provide an overview of Remix, a full-stack framework. They explain the atomic design principle and the benefits of using a headless CMS. They discuss creating components in Storyblock and configuring routes in Remix. The workshop covers real-time editing, rendering rich text, and dynamically fetching data from the Storyblock API. The session concludes with a Q&A and an invitation to connect on Twitter for further discussion.

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 &amp; the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&amp;A Prerequisite(s): Node.js installed, GitHub account.

Crash Course into Remix & Storyblok

Facundo Giuliani

React Advanced 2022

This lightning session introduces the concept of headless CMS and the benefits of building a custom backend without extensive coding. Storyblock offers a visual editor with real-time visual editing in React, along with features like workflows, translations, and versioning. It also allows for customization through defining components, rules, and building custom plugins using React or Vue. The API provides access to content in JSON format, and JavaScript bridges can be used to incorporate components into the final product.

Find out why the headless is the new buzzword everybody wants to use. I will take you on a fast ride through Storyblok, the first headless CMS with Visual ! You will learn why thousands of users love it and what benefits it brings you - the REACT community!

Headless - The Future of CMS Is Here

Samuel Snopko

React Summit 2022

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.

One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.

Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals

Jeff Everhart

Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.

"Personalization" is right now one of the hottest buzzwords in the development world. Marketers, developers, and content creators evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences. We will see code examples using some of the features introduced in Next.js 12, the newest version of the framework, and connecting to Storyblok, a Headless CMS that offers a real-time visual editor.

Don't take it Personally, it is Personalization

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.

NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.

Large scale projects challenges (NextJS - Contentful)

Leonidas Mamais

TS Congress

TypeScript Congress 2022

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.

If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website. Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022

How to properly handle URL slug changes in Next.js

Node Congress

Node Congress 2022

The Workshop covers the use of PlatformSH and Strapi for building and deploying decoupled applications. It explores setting up projects, configuring databases, middleware, and plugins. The workshop also covers building and deploying the application, syncing data, and exploring the site. It highlights the benefits of PlatformSH, such as isolated development environments and easy deployment of multi-app architectures. The workshop concludes with a discussion on handling drafts and implementing live previews.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Deploying a decoupled restaurant review site to production with Strapi and Platform.sh

Shedrack Akintayo

Chad Carlson

GraphQL Galaxy

GraphQL Galaxy 2021

WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.

Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance. With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web. <a href="https://www.colfayock.com/event-notes/graphql-galaxy-2021" target="_blank">Slides &amp; more</a> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Exploring the WordPress Graph with Next.js & WPGraphQL

Colby Fayock

Vue.js Live Conference

Vue.js London Live 2021

This talk introduces using Next.js with a headless CMS called Storyblock. It covers setting up Storyblock with Next.js, understanding components and index pages, rendering components and requesting data, enhancing preview with the visual editor, creating article components and schemas, reusing components, and exploring the Storyblock and Next.js connection.

This will be fast &amp; furious! I will show you the fastest possible way to connect your Nuxt.js (Vue.js) project to the headless CMS and deploy it in seconds. You should know a thing or two about Nuxt.js, headless CMS in general or JAMstack as there will be no time to describe the concepts in detail. In the end, you will be furious how insanely good the JAMstack is! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fast & Furious - Going headless with Nuxt.js!

React Advanced 2021

Welcome to React Advance! In this workshop, we'll cover building modern CMS driven web applications using Strapi and Next.js. Headless CMS allows content modeling and delivers content to any front-end via an API, future-proofing your stack and adapting to new front-end technologies. We'll explore setting up Strapi, building collection types, configuring plugins and permissions, and integrating with Next.js to build a static web app with dynamic pages.

In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi. Table of contents: - An introduction to Headless CMS and supported architectures - Getting up and Running with Strapi and Next.js - Integrating Blog functionality into a Next.js app - Deploying your Next.js and Strapi Apps Bonus - Implementing content previews with Next.js Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS

Daniel Madalitso Phiri

React Finland

React Finland 2021

You might have heard about Headless CMS. This new type of content platform gives us some benefits compared to a Monolithic CMS.We will talk about the key features of any Headless CMS and how we can integrate a headless platform into our React applications. We will focus on Storyblok, a headless CMS that offers a real-time Visual , a great feature for developers and content creators. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to View and React without a Head

How Contentful helps you to manage all the data in a headless e-commerce website.

Contentful and headless

Nidhi Kumari

Headless CMSs are great for developers, but not for content creators. React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#headless cms