Render Storyblok Stories Dynamically in Remix
Storyblok is the first headless CMS that works for developers & marketers alike.
In this short tutorial, we will see how to start making a real website with Remix and Storyblok. We will add a layout with a navigation bar and a footer to our website to make it look better. We will also see how we can add new pages and render them dynamically according to the added components inside them.
If you’re in a hurry, you can take a look at our demo in source code on GitHub! Take a look at the live version on Netlify.
Requirements
This is a part of the Ultimate Tutorial Guide for Remix. You can find the previous part of the series here, which shows you how to integrate Storyblok and Remix in 5 minutes. We recommend you take a look at that tutorial before starting this one.
Adding a Layout
Let’s add a layout to our website by creating a static navigation bar and a footer. We will look at how to create dynamic navigation bars in an upcoming tutorial of this series.
Create two files in your components
folder, Navigation.jsx
and Footer.jsx
, and add the following code to Navigation.jsx
file:
Make sure to replace the logos on lines 17 and 22 for desktop and mobile, respectively. You can choose any images you like. You must also add an image for the mobile navigation bar in line 97.
Similarly, add the following code to your Footer.jsx
file:
Now, we need to add a Layout.jsx
file in the components folder, which will use the two newly created components. Add the following code:
Having created these files, we need to add this layout to our root.jsx:
This code integrates Storyblok with a Remix application. It imports storyblokInit and apiPlugin from @storyblok/react for Storyblok functionality and custom React components like Feature, Grid, Page, and Teaser. These components correspond to Storyblok's components.
The components object maps Storyblok components to React components. storyblokInit is called with an accessToken for authentication, apiPlugin for API integration, and the components mapping. This setup enables dynamic content rendering in the application using Storyblok data.
After saving your code, our home story should look something like this:
Now you can provide a name {1} – the slug will be filled out automatically for you. Let’s start with the About page.
Now, you can enter any headline you want for your newly created about page:
We can similarly create the Blog
and the Services
pages as well. These stories are getting generated by the routes/$s.jsx
file, which is catching all the routes. Now, let’s also see how we can add the existing components to any of the pages.
On the right-hand side of the about story, we can see the empty body with a plus button that will allow us to add existing components to the page. If we click on it, we will see the following.
We have a list of existing components and can choose any of them. Let’s add the Teaser component, and fill in the Name field for that. As soon as we start filling the content in, we see the changes on the visual editor as well.
Once we hover on the right-hand side, we should see a similar plus button below the Teaser. Let’s add a Grid component along with three Features as columns, similar to what we have on the home story. We should see something like this now.
In a similar way, we can add any other components, and they will be rendered automatically. We could add another Grid
, and it should look something like this.
We can even add more components anywhere we like in the About story if we have those created. Now, we could also add the components of choice to the two other stories, Blog and Services, as well.
Wrapping Up
Congratulations! You have created your first pages in Storyblok and they are rendered in your Remix project dynamically – how cool!?
Continue reading and find out How to create Dynamic Menus in Storyblok and Remix. Not interested in dynamic menus? Feel free to skip this part and learn How to Create Custom Components in Storyblok and Remix.
Resource | Link |
---|---|
Storyblok Remix Ultimate Tutorial | https://www.storyblok.com/tp/the-storyblok-remix-ultimate-tutorial |
Github repository | https://github.com/storyblok/remix-ultimate-tutorial |
Storyblok Technologies Hub | https://www.storyblok.com/technologies |
Remix Technology Hub | https://www.storyblok.com/tc/remix |
React SDK | https://github.com/storyblok/storyblok-react |