How Contentful helps you to manage all the data in a headless e-commerce website.
Transcript
Intro
Hi. So in this talk, we are going to talk about Contentful & Headless. Before we start, thank you React Finland for giving me this opportunity. I am Nidhi. I'm a front-end engineer at ShopTrade. I am a Google Summer of Code alumni. You can connect with me on Twitter. My handle is Nidhijha98 and on GitHub my handle is NidhiKJha.
Let me walk you through the agenda of my talk. So we'll talk about, what is Headless CMS? Why do we need it? Then we'll talk about a specific Headless CMS called Contentful, the features of Contentful where I'll walk you through the website of Contentful and how we can create content model and content in that. And let's code a feature, where we'll connect our front-end with the Contentful. And then you can ask me any questions, if you have.
What is Headless CMS?
[00:56] What is Headless CMS? So the word Headless comes into the picture with an idea of chopping the head, which in our case is front-end, from the back-end, which in our case is content management repository. So that is what Headless stands for.
Previously, the traditional CMS that we had, in that we used to bundle up everything from our content images to our code in one single bucket. Now, with the modification of content management systems, we have a new approach called Headless CMS where we have separated our front-end and the content modeling and the CMS completely. And further to connect that CMS with front-end, we can use an API for seamless display across all the different devices. So previously, when CMS were designed, the way content was served was mainly through the website, but now, it can be served via wearables or smartphones, et cetera. So that's also the problem Headless CMS covers.
Why do we need a Headless CMS?
[02:07] Now let's talk about why do we need a Headless CMS? It unifies your entire data into one single Headless content hub. It provides you with a collaborative platform, your entire team can collaborate there. You can make your content highly reusable and accessible. So for example, you can create one content type and then you can create further, further you can add content using the same content type. Then there is separation of code and content in a Headless site. CMS makes life easier for content editors, they can edit the content directly in CMS without worrying about the code.
What is Contentful?
[02:50] So what is Contentful? Contentful is a Headless CMS, which is an API-first content management platform where you can create the data, modify it, and publish it on any digital channel. So the structure of Contentful is you have organizations, once you log in, you have organization. And each organization, there can be multiple spaces, spaces are for projects, specific to project, you have an environment, and then you add a content model.
When you add a content model, you add a specific content type thinking about the idea behind is to add what type of content you have to add later on. For example, say I can create a content type page and then I can use it to create different content. For example, I can use the same content type page to create homepage, to create product pages, et cetera. So this is about the structure of Contentful.
Tour around Contentful
[03:48] Let's take a tour of Contentful to understand features of Contentful and how we can add the data. So for that, once you go to your Contentful website, you see this here. If you do not have an account, you need to sign up first and if you have, just login to that. Once you log in, you will be redirected to a page like this... Sorry, to this URL. Here you can see, I have added my organization as Test. This I created for the talk only. And then you can add your talk space here. My space right now is a talk space where we are going to create some content, we can add some content here and some content model.
So to understand what exactly we are going to add here, let's go to this website. So I have an application, and it has a title, an H1 tag. For H2 tag, I want different blocks and each block will have a different title, obviously. So I want to create blocks with different titles. I want to display the list of titles that I can have.
[04:59] So let's go back to our Contentful and create a content model where we'll add a content type called Blog. So once you create the content type, you need to add fields in this. You can choose any of the fields here, as per your requirement. It can be rich text, text, number, date and time, location, media, Boolean, JSON object, to reference. I'll go with text since I only need to add the title there. It'll be my block title. And since it's going to be short, so I'll be selecting a short text. You can select long text as well. Create. Settings. Now you can add different validations here.
For example, if it's going to be a required field, you can check mark this one. If you want it to be a unique field, check mark this one. Character count, if there is a certain set of characters that should be there, you can select from here, then match a specific pattern. If you want to add a regex, you can do it from here. Prohibit the specific pattern and accept only specific values. You can change it as per your requirement.
[06:12] Now, I want to add one more field. I want to add a media there, so let's name it Blog Image. I want one file at a time, but if you want to upload many, you can just go ahead with that as well. Now let's create this one. Save it. And then we can add content from here.
So we have created only one content type right now. This is a blog, but once you add multiple, you can have multiple in the drop down. So let's add our first blog and name it, Blog Example 1, and add a media. To add a media, we have two options, add new media and add existing media. So let's add new media here. To upload any asset, you need to add a title and description, and file. These two are optional, so even if you skip these, it won't matter, but since it's required, you need to upload an image here.
[07:27] So you can select any image that you want to. I want to go with this one, so I'll add it here. Once your image is uploaded, you need to publish it and as soon as you publish it, your status will change from draft to published. So I published it and it changed from draft to published. Now going back to your blog one, you need to publish this Example Blog One as well.
Now let's add another blog. Let's give it a title, Blog Example 2. Add media. Let's choose to add existing media this time. Select from all the images that we have. Publish it. So now we have two content blogs added over here. So to upload any image or any media here, what you need to do is you need to go through this media tab and here, you can add assets. So if you want to add a single asset, you can go and select a single asset. If you want to add multiple assets, you can add it. So a single asset is how we have added that new media when we were adding the content. And to add multiple assets, we just need to go there, click on multiple assets, select files to upload, and here you can choose out of these the number of images that you want to add. And then after that, just upload it and your images will be uploaded. And then you can just... These images will be uploaded as draft, and then you need to publish them.
[09:13] You can manage apps from here if you want to. And then we have settings from where you can manage the settings of the space. Now, we have added our content model, we have also added our content. So let's connect this content with our Next.js application.
Let's fetch the data there. To include any content, first we need to add a Contentful package, that's the tool we have to install, Contentful. Once your package is installed, to get the data from Contentful, you can either write GraphQL queries, or you can use getStaticProps function. I had used the getStaticProps function here. So let's save this code. Sync function getStaticProps here.
[10:14] Now, we need to import one thing from the Contentful package, which is createClient, so let's import createClient from Contentful. And now, so how will the Contentful know, how our code knows which space it has to connect from Contentful? So for that, we need to create const client equals to createClient, where you will pass space that's a Space ID which will be a string, and an access token, which is again going to be a string. To generate the Space ID and access token, you need to go there in the settings. In the API keys, you need to add a new API key here. And you can generate... You can see we have our Space ID and access token. So let's add our Space ID and then let's add our content access token here. So now, we have connected our Contentful with our Next.js application. To get this data, let's create another const res, which will... Client... Oops... client.getEntries and which will take a specific content type.
So right now we have one content type that we have added in the beginning, which was blog. Here you can check. So you need to pass which exact content type you have to pass. So we have a blog here that we need to add. So we've added a blog and we have generated that response, now we need to return it so that we can pass it as a props. Props here will be an object. There, my name props is blogs, and this will be res.items.
[12:39] To access this props list, let's pass it in our component down there. Console. Let me check it in our console what props do we get. Let's go to our website, check it here. What can I see in my console here? So see, we have an object. It says object prototype. I must have missed something. Hit entries. I have passed the content types. Okay. Let's reload the website once.
So now you can see, we have our two blogs here and in blogs, we have fields and each field has a blog title that we have added. So to show this blog title here, let's write our map method. So it will be props.blogs.map where we will, let's name it Blog. Here, where the H2 tag, and this will be blog.fields.title and the ID that they want to ask here is blogs.sys.id. You can add anything else if you want to in the ID. Blog.sys.id.
[15:00] So now we have added it here. Let's save it and check if we have got the data there or not. Oops, I guess, I missed something. Blog.fields.title. So blog.fields.blogtitle is there. So blogtitle, and now we'll get it.
So see, we have got titles here. If you want to add the image there, then just we can get it from blogimage.fields.file.url. So this is how you can get the data from Contentful. Few suggestions, do not use my space and access token and since I'll be pushing that code, I'd recommend you to store it in your EMV file. So this is about Contentful and how you can get the data. If you want to pass this data as a prop to other component, you can do it from here.
Questions
[16:22] Juho Vepsäläinen: Yeah. I think we've moved to the discussion. So do you think you can combine this system with the other ones? So it was Contentful as a back-end and then something like React Bricks on top, or how do you say this?
Nidhi Kumari: Sorry. Can you repeat the question please?
[16:50] Juho Vepsäläinen: Yeah, it was more for Matteo maybe that is it possible to combine something like Contentful with another system like React Bricks or Storybook?
[17:01] Matteo Frana: Well, I think it's possible. But to provide a great experience to a Contentful user or Storybook user, we should have an embeddable version of React Bricks which just edit a piece of content. For example, let's say that we take the page as a good piece of content because with the Headless, you don't have this concept of page. Page is just another entity, but you have any entity that you want. But if you want to create a page entity, we could just bind the entity in your Headless CMS with a page ID of React Bricks and then we could have an embeddable version of React Bricks in order to edit the landing page, let's say for example, for a product of an eCommerce inside of a Headless CMS. Really this is a thing that we have in mind to do, especially for eCommerce in Shopify. This is a thing that we are working on to help, to provide a landing page for products in Shopify, but of course, it is an interesting thing to integrate with Headless CMSs too. So we can talk about it.
[18:22] Juho Vepsäläinen: Any thoughts from the Storybook side, if I'm going to equally somehow Contentful with Storyblock or...
[18:32] Facundo Giuliani: Yes, I think that somehow they collide in the way of how storing their content, how delivering... I mean the concept behind using an API to connect and to grab information from a service that is providing the content already created on store probably is very similar. I mean that I can't imagine a way where you would use both product at the same time probably because they have the same purpose let's say, but yes, again, I think that the goal behind this is make the job easier for the people that is creating the content and using it in the front-end of our application, using different technologies, using different frameworks, using different programming languages, and leaving that decision to be made by developers, for instance, and the designers to implement the content created in the best way and deliver the content in the best way. So I think that the final goal is to offer a great experience for the user that is using our products, let's say.
