Crash Course into TypeScript for content from headless CMS

Rate this content
Bookmark

In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:

- Generate strongly typed models and structure for the fetched content.

- Use the content in components

- Resolve content from rich text fields into React components

- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production


You will learn:

- How to work with content from headless CMS

- How content model can be leveraged to generate TS types and what benefits it brings to your project

- How not to use string literals for content in code anymore

- How to do rich text resolution into React components

- How to minimize or avoid content-related issues before hitting production

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

FAQ

TypeScript is a programming language that builds on JavaScript by adding static type definitions. In this workshop, TypeScript is used to show participants how to work with content in TypeScript and React components, particularly focusing on how to integrate and manipulate content from a Headless CMS in a TypeScript-based project.

Participants can clone the project repository to their local machine, install dependencies, and follow the steps demonstrated by the facilitator. The workshop also includes live coding sessions, and participants are encouraged to code along and ask questions in real-time.

A Headless CMS is a content management system that provides a way to author content, but instead of having a built-in front-end, it provides content via an API. In this workshop, a Headless CMS is used to manage and import content into a new project, demonstrating how developers can leverage such systems for more flexibility and control over their content delivery.

The workshop covers several tools and frameworks, including Next.js, TypeScript, React components, and the Headless CMS used for content management. It focuses on using these technologies to build dynamic web applications efficiently.

The workshop is recorded, allowing participants to revisit any part of the session later. Additionally, the pace is kept slow to accommodate all participants, and direct assistance is available during the workshop to address any issues or questions that arise.

Participants will import content into a new project, create and manipulate a project in the CMS, and work extensively with code, particularly focusing on Next.js and TypeScript. They will also generate TypeScript models from content types and learn how to fetch and resolve content in Next.js.

Ondrej Polesny
Ondrej Polesny
98 min
01 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Let's start with the workshop, importing content into a new project, working on the content, and spending most of the time in code. We'll discuss the content model and component limitations, generating TypeScript models, fetching content, and adjusting components. We'll also cover creating slug pages, implementing getStaticPaths, rendering landing pages, and resolving content items as React components. Additionally, we'll address the implementation of the nav component and deployment pipelines for tracking content model changes.

1. Introduction to the Workshop

Short description:

Let's start with the workshop. We'll import content into a new project, work on the content, and spend most of our time in code. I'll show you the implementation in Next.js and how to generate TypeScript models from content types. Then we'll fetch the content in Next.js and resolve rich texts into React components. We'll also discuss how to implement deployment pipelines to avoid production errors. First, clone the project repository and install the dependencies.

Let's go! Let's start with the workshop. First of all, let me greet you all here. It's a great pleasure for me to be here to show you some things TypeScript-related. I'm joining you from Czech Republic, Brno, where we have our headquarters. I'm Andrey, I'm a developer evangelist for content. We are a vendor of Headless CMS. I'm sure you know the company. I will show you a bit of the CMS as we work on the content and as we go through the workshop, but today is not a product pitch, I want to show you how to work with content in TypeScript and React components, right?

So, first of all, a little bit of housekeeping. The workshop is being recorded, so you can get to anything back in time, if you miss something, or if you get stuck on something. I'll try to go slow. But you can always get back or you can just ask me directly if something's not clear.

What we're going to do, and, oh, I hope you see my screen. Yeah, I think you do. So, what is the timeline of the workshop today? I know it's designed for three hours. I always try to be a bit quicker because it's really hard to keep your concentration for that long. What we're going to do in this workshop is first we're going to import content into a new project. So, we're going to create a new project in the CMS. We are going to import some content in there. If you're signed up for content, that's great. I'll show you how to import it. If you're not signed up and if you don't want to sign up, that's also fine. I'll give you the project ID of my project and you can work with the content that way anyway. So, you don't have to sign up anywhere. We're probably going to work a bit on the content. But not so much. We're going to spend most of our time in code. So, that should be fine. Then I'm going to show you the implementation in Next.js. I'm going to use Next.js because it's, to be honest, the closest to my heart currently. We have our whole website built with Next.js. I really like its flexibility and ease of use. So, I'm going to use Next.js, but the principles can be used in any framework if you're using Vue.js or if you're using Gatsby. Gatsby depends, but I think they support TypeScript as well now, so it should be good as well. So, I'll show you how the code looks like. I'll show you how the website looks like. And then we're going to move on to actually generating TypeScript models from content types. So, I'll show you how to bring the content from the headless CMS into your project and generate not only the TypeScript models, but also the project structure. That means code names and all the other things. Then I'll show you how to fetch the content in Next.js. That's quite straightforward as we have an SDK in TypeScript. And then I'll show you how to resolve rich texts into React components. That's what it's all about. To tie the React components to their respective content models. So, it's easy to maintain everything. And at the end, there is a little place for discussion how to implement deployment pipelines in a way that the content changes on the headless CMS side don't cause any production errors. So, we've implemented a way to check the content model with every build so that you can avoid the production errors in terms of missing content or misconfigured content to a minimum. So, that's about the workshop timeline. Yeah. And yeah, let's get to it.

First, we're going to import the stuff in the CMS. Then we're gonna open Visual Studio Code and stay there for the rest of the workshop. So, first of all, I'm gonna do that, too. The first step for you is to clone the project repository. Now, I don't want to give you any blank spots where you would be working on your own. I prefer actually going rather slowly and let you work on the tasks as I'm speaking. So, feel free to just do the steps as I'm doing them. And if you get stuck on something, then let me know directly in the chat window or just jump into the workshop and tell me. I'll repeat anything if something is not clear, yeah?

So, first of all, we're gonna clone the project repository. I hope that you have the link, but if you don't, I'm gonna put it in the chat window, right? So, there we go. So, this is the repository. It's a nice JS boilerplate that has a few pages in it. So, let me do the same thing. I'm actually gonna switch to Visual Studio. Can you still see my screen? Can you see the Visual Studio now? Perfect. Yes. Because I lost the green border, all right, perfect. So, I'm gonna put here a new terminal, and I'm gonna just git clone the URL. And let's go, CD Workshop. Now, first of all, I'm gonna do npm i. So, I'm gonna use NPMI to install the dependencies, because I have a bad experience from one of the previous workshops where NPMI took 25 minutes.

2. Importing Content Package and Checking Data

Short description:

To import the content package, go to the content template manager, paste the project ID, and drag and drop the package. Click prepare for import and import data. After a few seconds, the content should appear in the repository. To check if the data is successfully imported, go to deliver.content.ai and enter the project ID followed by /items. You can see the JSON data from the CDN. The plugin used to format the JSON is Firefox.

So, I'd rather just do this when I'm talking about other stuff. So, feel free to do that too when you clone it. It's gonna, it's a fairly small project, so it shouldn't take long. And we should have, okay, I'm gonna open the folder, and we should be, should be here.

Now, the important thing here in this project is this package, content-workshop-import-package.zip. How this works is, in the CMS, if you have a project, you can always do an export of the project which creates a zip package, then you can take that package and import it into another project easily through the content template manager. So, this is not just a backuping tool, it's also when you want to do or you want to give a real project to a colleague or anything.

Now, this is at kentico.github.io.com slash content template manager. I'm going to, again, put this in the chat for everyone. And what we actually want to do now is import that in the CMS. Now, if you haven't signed up for the CMS, you can either go to content.ai, click on for developers, click on get the free developer plan, and this is going to take you to a signup page. If you click on get the free developer plan, you're going to get a free trial. Then after the trial, you can switch to a free developer plan, which is forever free, and it's quite generous. But again, if you don't want to join, if you don't want to create a new project, that's also fine. I'll just share the project ID with you, and you can use mine. That's fine. So I'm going to log in, and that takes me right into the project. If you create a new project in the CMS, if you sign up, then this is what you're going to see, initially. This is an empty project, nothing is here. This is the home car, but on the content and assets, it's kind of lonely here, there is no content here, which is fine if you're looking at the same thing. What we are interested in now is the project settings and we wanna go into API keys. Now, this is the project ID, you're gonna find the same ID also in the readme of the GitHub repo. So this is this ID here. So that's the idea of my project where I'm gonna import the data now. For the import, you're gonna need a project ID and you're also gonna need the management API key. So they are on the same screen over here. And on the content template manager I'm just gonna go and click on import and paste the project ID here. There's a field for target project ID so that's the first thing and the content management API key is on the right card here. Just gonna copy that over. I'm gonna click here on publish language after import. That's because otherwise all the content items would stay in their drafts. So I wanna have it published and delivered to the CDM. Now I talked about the content package so that's this thing right here. We wanna take that and we wanna drag and drop it on the template manager. So let me just put this here and I'm gonna drag and drop it here and then we can click prepare for import and then import data. It's just a few content items. Yeah, this section is not reversible continue. It's just a few content items, a bunch of images nothing too big. It should be done in just a couple of seconds. And when it's imported, you should see the content in the repository. So see, there should be three items. We have three items here, two landing pages, one component and we should also see some assets here. So three images. So I'll give you a second to get here. Let me know if someone got it working like this. Otherwise, you can always use the project ID that is in the GitHub repo. Can I send API keys as well? Yeah, this is the API key. Like if you go here, the project ID is the API key. I don't wanna give you the management API cause that would allow you to delete all the data for my project or do some funny stuff. So I'm not gonna share that with you but you can create your own project and you're gonna have it right here. So David says, I have it but the workflow step is draft. If you have everything in draft, that's because on the import, okay let's go back here. There's the checkbox that you probably didn't check but that's perfectly fine. The only thing you need to do is just click here and do a publish on all these items. So select everything and here via the three dots just do publish and just confirm it and everything is gonna be published in a second. If content is only in draft, it's not gonna be available for our content delivery. If it's in a published step, then we're gonna have everything on the CDN, so you should have everything published. Where can we import file? Okay, the import file is in the GitHub repo. So this is the repository and there it is. This is the zip package that you should import. It's right in the root of the repository. Okay, now when you have the content in place and when you have the project ID, the first thing you can check is if the data are actually making it through. So for that, you can go to deliver.content.ai, put there the project ID and do slash items. Again, I'm gonna put this in the chat so you don't have to type it. So if you click on this, you should see the JSON that is coming from the CDN, right? These are our content items. This is the landing page. We have another one here and we have untitled content item components ETA. So if you change the project ID with the one that you have you should be seeing the same content here. So again, I'll give you a few moments to check that. What is the plugin that formats that JSON? Oh, this is just Firefox.