Crash Course into Remix & Storyblok

Rate this content
Bookmark
Github

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.

Facundo Giuliani
Facundo Giuliani
Arisa Fukuzaki
Arisa Fukuzaki
162 min
15 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction and Source Overview

Short description:

In this part, Arisa and Facundo introduce themselves and explain their roles at Storyblock. They also provide some sources and a GitHub repo link for the workshop. The next part will cover the intro to the remix slides.

And also, first of all, we need to introduce ourselves, who we are. So I shouldn't forget about it. So my name is Arisa. I work at Storyblock and Storyblock is the head of CMS and that's why we host the Crash with Remix and Storyblock workshop today.

Today with me, I have Facundo. So I will let you introduce yourself, Facundo. Sure. Well, hello, everyone. My name is Facundo. I work with Arisa. We are part of the Developer Relations team at Storyblock. What we do at the Developer Relations team is try to help the developers to get the best from the product from Storyblock to help them to integrate Storyblock into their projects and trying to make their work easier creating tutorials, guides, or presenting workshops as this one that we are going to have today.

So not to waste any more time, if everyone is good to go, we are going to first of all show some of the sources that we are going to use. So this is also the source that you can find from right here preview of the final website. So here you can find a GitHub repo link. And that's what I am showing you right now. I'm here let me share it with Zoom. And the Discord. So I would recommend you probably like taking a look at this GitHub repo as well. Feel free to fork it if it feels like more secure way for you. Or if you're free to follow one by one if you want to let's say, like, follow every steps that we are going to show. And after that, I'm going to show you the intro. Of the remix slides, and not to waste anymore time.

2. Intro to Remix

Short description:

In this part, Arisa and Facundo provide an introduction to Remix, a full-stack framework that focuses on building better user interfaces and prioritizes developer experience. They explain how Remix works, its features, and its use of service-side rendering. They also discuss the various routing options available in Remix and the benefits of using a headless CMS. The part concludes with a brief overview of Loaders, Actions, and error handling in Remix. The next part will cover the introduction to atomic design.

So in the beginning, I would say like less than half of the beginning of this workshop would be knowledge base. So we are going to share with you and show you a couple of the slides to provide you the fundamental knowledge. Which is going to be quite useful for the rest of the hands-on part. More than the half of the rest of this workshop would be hands-on. So we are going to show you how you can, first of all, like learning by doing.

So we are going to build together storyblock remix blog application. So in the beginning, first I'm going to share with you the intro to the remix slides. So let's go through it. So, as some of you already have the experience with remix from what you introduced me or have tried out or started to be interested in. We are going to walk you through like very quickly what is remix and what kind of features are already implemented and you can use it.

So here's the little info. The first of all, remix is a full stack. Not just the frontend framework. And it will let you focus on to build the better, way better, I would say in my opinion, the user interface. And also not just the user interface, means like your users who are going to just, who are going to this visit, let's say, like your applications or webs. But remix also really considers a lot about the developer experience as well. We're going to see together during the hands-on, let's say, part of this workshop as well as the knowledge part in here. And it works, you know, like in a very fast, slick and resilient. I would say not just the user experience as I wrote it here. But I need to insist it's a really fast, slick, resilient UX and DX.

So here is like a very, very short version of what is Remix in one slide. So it's actually like the React-based framework. And if you already have the fundamental knowledge about the React, you can already understand how Remix works. Because you can transfer your knowledge from the React into Remix straight away. And it's the full stack. So as some of you have introduced us that you're full stack developers, then probably Remix would be really one of the best ways to pick up. Because if you have the fundamental knowledge of the full stack, and Remix is a full stack framework, then it's the perfect combination. And it serves the content and the pages with the service side rendering. That is something that sometimes I get, you know, like questions, like when I give talks in the conferences, stuff like that. Actually, that's actually one of the things you do not need to consider too much about, like how to differentiate, let's say, prioritized content first, and non-prioritized or at least accessed content in the end, stuff like that. No complications going on. It will serve the content service side with service side rendering. And the Remix uses the webpage API. So by using this, I mean on the Remix side, that's why, you know, Remix can, I would say it has the logic of, first of all, the fetch has the request and the responses, right? So these request and the response from the fetches can be used wherever they're needed in the future. So that's why, you know, compared to the other approach that is maybe familiar for you, probably requesting through the URL, instead of that, by using Webfetch API, it makes the Remix to be quite strong for fast and resilient communications in there. And it's an open source, that is also another important point. So here are the features.

And I would say like, we need to pay attention to, let's say like, how many variations of the routes Remix provides? So first of all, I'm going to show you later on how many variations they have. But in Remix, you can choose the best way to lay out the routes. So first of all, like, it will use the file system hierarchy to handle the URLs. And of course, you might realise that, you might realise that, well, if you use, let's say only the file system hierarchy, then doesn't it mean like, let's say your content editors, or your customers, who are going to maintain the content and even want to have the power or control to structure such kind of, let's say, routes by themselves, might not be able to do that. But this question would be answered later on when we introduce you about the CMS option, and also in the hands-on part. So, as I said before, Remix has this much numbers of routing handling. So if you, for example, use the splat routes, and that's actually one of the approaches that we are going to show you and also play together in this workshop, you will be able to actually create the dynamic logic for whoever is going to maintain the content to change and create nested routes even from the user interface, which means it's going to be provided from the headless CMS UI. So this kind of, this much options you have, so you need to pick the one that will be like best fitting in your cases. So, but I'm here to tell you the intro about the Remix, not to just show you about the routing system. But if you go to the Remix website, and you can actually already see pretty much a good demo in there, and that's what I borrowed the screenshots in here. So in here, like you divide the content with the, let's say like file, like nested system in there. And then like by dividing, like these components, let's say like you got the error in this sales, green, highlighted component over there. But then your left-hand side of the sidebar should be rendered, and not, your users do not experience that whole entire app would crash and just seeing the loading, like spinner. You also can do the similar stuff for the other rest of the components so that your users will have much better experience instead of seeing, crashing entire app just because of one tiny, for example, like this invoice component got collapsed. So we are also going to take a look at together and also play around together in the hands-on part to handle the nested pages and the components. So by combining the Headless CMS in here, you will have more control how to create the layout and the structure for a story, you know, these content instead of, you know, like maintaining in the source code level so that you will have more time on your end to have more coding related tasks instead of maintaining non-coding related tasks over there.

So here there are a couple of, or two of the elements that I wanted to pay attention to, such as Loaders and Actions. We're going to see also in the source code level in more details, but first of all, these are the, I would say Loaders is the function to help working with the server-side rendering. So that is actually the key core part, how you can serve the content with the server-side rendering and it manages the HTTP get request. So it will actually like combine working together with another function or the API that is directly coming from Remyx site, and with the combination, then you will be able to communicate better with the response and the request. And also there is the action function. It means to modify and mutate data. So as I explained in the beginning, Remyx is the full-stack framework. So you will have, or you have already a lot of built-in APIs or the functions that you can just call it and use it in the best place where you want to manage. And error handling, we also mentioned that. So I'm going to skip, but of course we are going to share, or you already have access to the slides from the notion table of content that we shared. So I would recommend you to take a look at it later on. Here is the sources. And before we are going to move on to the next content, which is going to be the intro to the atomic design, are there any quick questions? If so, we are happy to answer. Abgundo, do you have like any questions coming up from the messages? Not that I see. What I see is a lot of messages introducing, I mean the people, thank you very much for sharing all your details, all your story. Arisa and I will really enjoy reading where are you joining from and what do you do and what are you interested into, into Remix, into Sturblocks. So thank you very much for sharing everything.

QnA

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, what else?
React Advanced Conference 2023React Advanced Conference 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 and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
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
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.
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

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
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 
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
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.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
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.
Exploring the WordPress Graph with Next.js & WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
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.

Slides & more
Contentful and headless
React Finland 2021React Finland 2021
19 min
Contentful and headless
How Contentful helps you to manage all the data in a headless e-commerce website.
React Bricks: a CMS with visual editing based on React components
React Finland 2021React Finland 2021
24 min
React Bricks: a CMS with visual editing based on React components
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!