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

And welcome to react Advance. This is a workshop. They will be talking about building modern CMS driven web applications. Let me know if you use the CMS. If you've used the CMS drop it in the chat. If you haven't, let me know what misconceptions do you have about CMSs. I think this is the whole thing that a lot of people talk about. A lot of people aren't too sure. So feel free to put that in the chat. And a little bit about myself before we get into it. A little bit about myself. I'm Daniel Madalisa-Piri. I'm Daniel Madalisa-Piri. And you can catch me almost anywhere online. I'm going to develop relations at a company called Strapi, which is an open source javascript headless CMS. And I'm a disk jockey at Mixcloud, I guess. I don't know if you can sort of call that a thing. It's not like an official thing. But anyways, I teach technical and I put my stuff up on Mixcloud, basically. A few prerequisites before we get into the meat of everything. You need some basic react knowledge, as we'll be using next.js to sort of build out our blog. Basic knowledge of Node and npm, of course. And basic web concepts. And some knowledge of APIs. Okay, I'm just checking the chat. I see a lot of people or a couple of people have said what they use, GraphCMS, wordpress and Adobe Experience Manager. Both as headless solutions. That's interesting. All right. So let's get into what we'll be looking at today. So we'll be looking at an intro to headless. And then we'll be setting up Strapi in next.js. Give you a nice introduction to Strapi. And next.js, if you're not familiar with it. And then we'll go out and build a blog. And then we'll look at how we can deploy our apps. And fingers crossed, there's a bonus section. So you should be looking forward to that. Has anyone used Strapi in the past? Has anyone used next.js? Before I get into the intro? Yes or no? No? Okay. That's exciting. Okay. Okay. So there's a lot of people who will be... So maybe we should just make this a Strapi workshop. Anyways, an intro to headless. A lot of people seem like they are aware of the concept of headless at least. So let's get into that. I always like to set like a nice preface to how things worked in the past. So someone already mentioned the CMS wordpress, which is... Even though it has a headless solution in the past, it was solely a monolithic. And these are CMS, as we call traditional CMSs. And it had a back office, which is basically an interface where you manage your content. As the name suggests, CMS is short for content management system. And then you had a front office where you manage your webpages. And the thing about that was you're only able to deliver these webpages to one platform, and that was the web. And you interact with that on usually laptops, computers, and all other devices that can have browsers. And they didn't really support native mobile applications, generally support wearables. And it was really hard to connect to different platforms outside of the web with these monolithic CMSs. So the world changed, of course, as you can see today, a lot of how we interact and engage is on mobile, still a lot of the web. But that's because CMSs had to evolve. How people manage and distribute content had to evolve. So we had to stray away from the whole concept of tightly coupling the back office and the front office, where you can only manage content for a single platform. Didn't really make sense. And front-end tooling evolved. I see a lot of people here are really into next.js, which is super hot for a lot of reasons. And yeah, front-end tooling evolved. We had tools like react come out. We had gatsby, angular, vue.js, and a lot of these other tools. And traditional CMSs didn't really suit them. And CMSs had to evolve, not just for different platforms, but also for the web. So why CMS? This is sort of like an argument I like to give for why people use CMSs. I believe, and I feel like a lot of people would agree with me when I say building software is a collaborative effort of multiple teams. So a lot of people come together, sort of make software happen and ship products, ship features, ship websites, ship apps. It's a collaborative effort, right? So who's involved? The most at least active players I see in this are developers, designers, and content managers. That should be content managers. Sorry about that. And at the intersection of all of these, we sort of see headless come. And how, you ask? Good question. So you have developers, of course, who build with the headless CMS, depending on your capability or the capabilities of your headless CMS. You can have developers use that. With headless CMSs, you introduce the concept of content modeling, which I'll get to really, really soon. And what that enables is you to sort of break down your website into components, per se, or different smaller building blocks that make up larger sort of bundles. And that really helps with design because you have a content-first driven approach where you look at the content you want, that dictates what designs you make, the designs dictate what's developed, and it all starts with content. And then, of course, content managers are the people who use your headless CMS. Your headless CMS, of course, delivers content, but who puts data in there? It's the content managers. So there's a lot of people involved with making sure that things work as they're supposed to work. And that's exactly what headless does. So headless means we deliver content to any front end via an api, any front end with an asterisk there because this is mostly front ends that can, I mean, like, front ends that can consume APIs or make HTTP calls. And that's what it enables. So you have a single platform where you edit or you enter your content, and then that ships it out to mobile, ships it out to the web, ships it out to servers, to wearables, to sites, to menus, to traffic lights, to airports, ATMs. And it's like, it's endless. So that's the benefit of headless, at least. So with headless now, you have a back office and an interface to manage content. And now you can sort of send that to a lot of the popular front end frameworks, react, vue, Next, in our case, Next, of course, angular or gatsby. You can send it to Flutter. You can send it to Swift. You can send it to Android. So you can send it to a lot of the other things that people use to build on multiple platforms. You can send it to an electron app. And it makes it pretty versatile because then your content can live on multiple platforms or from a single source. It's a huge benefit. So basically, CMS is in general bringing efficiency in how we manage content. And headless CMS has helped us scale to way more platforms than it was in the past. And this brings about a lot of really cool benefits. There's developer flexibility. It's a much more secure business solution in terms of like future proofing your stack also. You use a headless CMS if things change front end-wise. People really aren't using Next anymore. Or people start using something new like, I don't know, astro or Sothekit. You're sort of secure in the fact that your back end can stay untouched and you can just adapt your front end to suit what's trending if that's the thing you want to do or what's solving your problems in a much more efficient way. You can also create custom experiences like I talked about and all the workflows that can be enabled through using headless CMSes really do a lot to improve your team's velocity. So it's a lot of benefits. A quick recap. I don't know if you have any questions about the concept of headless or what headless is. And I feel like we can get into using Strapi and next.js. So I'll move on in like a minute. And if you have no questions, then we can go ahead. Right. So setting up Strapi and next.js. Just give me a bit. I have my eyes on the chat, by the way. Keeping track of that. Okay. So we'll go into my terminal. Thank you. Let me just grab my chair real quick. All right. Now I'm ready to type. Right. All right. So setting up Strapi. Like I mentioned, Strapi is an open source headless CMS. But before we do anything, actually, I'll just exit this and just go directly to Strapi.io for those who haven't seen it. So this is Strapi. Pardon the slow load. I'm using my phone because my Wi-Fi is down. Thank you, Bruce. But yeah, this is Strapi.io. design APIs fast, manage content easily. Open source, 100% javascript, fully customizable and developer first. And how we get started with Strapi is we'll open our terminal and we'll type, let me change that. And advanced. And let me know if I should zoom in. Let me just do that. Okay. So the command, we can either use yarn or NPX to create a Strapi app. And what this will do is, let's just go with my back end, actually. Or block. That's sort of what we're making. And we'll use the quick start flag. So a bit about Strapi while this command is running. Sorry. Yeah, I was looking at the chat. Yeah, a bit about Strapi and why this command is sort of important. You notice the quick start flag. So Strapi, like most CMSs, needs to store its data somewhere. And Strapi supports multiple databases. At the moment, we're using V3 of Strapi. And this will either, if we didn't use the quick start, it would query us to choose our database. We could choose from Postgres, SQLite, MySQL, and MariaDB. And yeah, that's sort of what we used. To set up the Strapi project. Now, setting up a database for most can be quite daunting. So when we use the quick start flag, what that does is it defaults Strapi to use a SQLite database, which is much easier to set up. And when you go into production, of course, you want to go into something more resilient. It's just Postgres. And you can do that for free on something like Heroku or like the free aws tier. Yeah. So besides that, like I said, because running this locally at some point, we'll have to deploy it. So Strapi is self-hosted. We currently don't have a cloud offering. And that is probably coming. Sometimes, see? And yeah, I don't know if you have any questions about the setup so far. Once this happens, we'll sort of like dive through everything. Well, I should have accounted for. That is the setup might take time just because I'm not using yarn. It's not patched and might take some time for everything to download. And yeah, anyway, a good time for you to ask questions. Did you have any? I'll just check the Discord real quick. And thanks, Bruce, for sending over the commands. So before we actually get started building the blog, we'll just play around with Strapi and I'll show you all the cool stuff it can do. And yeah, let's see. Let's see how that goes. So like I mentioned, usually have a back office. What's happening right now is we're building out the admin panel, which is the portion of Strapi that content managers and we sometimes get to interact with. And this is built with react also. Fairly customizable because it's open source. We've seen a lot of people change a lot of things about this. And people change the fizzy wig. People change a bunch of stuff, actually, the theming, the coloring. You can just deploy one thing. So yeah, just give me a minute. There we go. So there we go. We're redirected to localhost 1337 and then we're asked to enter a new admin user. So I'll just enter my own details here. And a quick password. Passwords are the same. Password is bothering me. And then here we are. Let me just zoom in a bit. This is our admin panel. So this is what you see when you first get into Strapi. We have an admin user called Daniel Piri that we just created. And now we get to build collection types. So CMSs, like I mentioned, have the concept, headless CMSs, have the concept of content modeling, which is creating like a data schema for how you want your data to be presented to your front end. In our case, we have what we call components, which I think would make a lot of sense because they're based on the components that we all know. And these are just reusable sections. So these are a collection of fields that are reusable in multiple places. We have what we call collection types, which are repeatable collection of fields. And then we have single types, which are one-use collections for fields. So let's go ahead and build out our first content type. And we want this to be a collection type. One that I usually find very relatable is books. So we'll create a collection type called books. And what Strapi does, and that's something that I really like, is each collection type you create, you have a corresponding endpoint. So when we're done creating these collection types and we want to query the books endpoint, all we have to do is go to our URL, if this is localhost, that's localhost 1337, slash books, and then we'll be able to retrieve all the entries on that endpoint, which is pretty cool. So yeah, these are the fields that you can pick out. You have the text field, rich text field, a number field, a date, boolean, relation. A relation is really cool because it has polymorphic relations. You have email, you have password, enum, media for videos, links, audio, a JSON field in a UID field, and then these are the components that I talked about. And then we have what we call dynamic zones, which is a really, really interesting feature of Strapi that lets you dynamically add components to an entry and paired with a lot of some magic, or I don't want to call it magic, because paired with some creative programming, you can sort of create some very interesting turnarounds and workflows. We've seen people create forms or page builders, no code page builders, where you have a bunch of components Strapi and these are matched to a bunch of components in your front end. And then by adding new pages in Strapi and using the dynamic zones, you can sort of build out pages in your front end, which is pretty cool. But yeah, let me keep demonstrating books and let's think about what a book's end point would look like or what books, what type of fields a book would need. I think a book would need a title, very important. A book would need an author. And one thing we have a chance of doing here, but I won't, is we could create another collection type called author and then form a relation. And these are the relations that I talked about. Hey, are you asking a question? I heard someone say something. Nevermind. Okay. Yeah. As I was saying, one really cool thing we could do is we could make it so that if we had an author field or let's say user, this is the best author. And what we could make it say is that every book could be there related to, maybe that's not the best one. But anyway, yeah, one could either be related to one, they could be related to each other, one book related to multiple authors, multiple books to one author, many to many, and all these really cool relations. So yeah, I think the relation field is pretty cool. So besides title, what else could we need? Maybe like number of pages, number of pages, page number. Nope, number of pages doesn't make sense. And then format, we have really interesting, I think page numbers are usually integer. Oops. That window doesn't look the best. And we'll add another field, maybe cover. And let's see, cover. Cover is usually like a single thing. It's like a picture. It's not necessarily multiple files. So once you sort of created this, this is supposed to be great. So we save that into like a schema.json. I saw the question. Okay, well, the server is starting to look at that. Yeah, that is possible. So someone asked if it's possible to populate the different collection types that we could create in Strapi from a data set like a CSV or a spreadsheet. We have seen that work, you can sort of create custom scripts that can fetch that data from whatever it is, a CSV or a spreadsheet, a markdown file or a couple of markdown files, and then send that into a Strapi database. This would have to be custom, of course, but yes, it is possible. Great. So we have our books collection type here. And now we can start to enter data. So I don't know what books people read. Let me look at my shelf. Quiet. Old number of pages. And we could actually pick something. I don't know if I have images. I don't have any images that I could pick out. So nice. It's just like random pictures that I have. And we'll upload that. And then one really cool thing we have also is we have a draft and publish feature, of course, which is DFSs have that. So right now our content is in the draft mode. And then if we want to publish that, so it's visible, now we have a published piece. Okay. So now we have one entry. You can see this. And then you can see the number of pages. And then you have a cover. That's pretty cool. We'll add one more just for... What other... So it's like 2021, I guess. I'll do a book. A short book, maybe about 90 pages. We'll add the same cover. We'll save. We'll publish. And now this is sort of where it gets interesting. We can navigate back to our collection types. And I just want to make another one just so you can see the different types of content types Trappy has. So right now we're looking at a collection type, which is multiple entries on a single collection type. Another thing we have, if we go to our content types builder, is the ability to create single types. So single types here would be used in a scenario where maybe you're a publishing house and you have a portfolio, maybe. That's a great example. I think the best example I can think of for the use of a single type is a website homepage. So we can call this homepage. So this is data you only need in a single instance. So I see someone has an issue, Matthew. Could you give me more context about your device, your node version? One thing that I find helps is if you refresh, sometimes it could just be nothing and it's computers being computers, but that indeed is very strange. Try and refresh and I think your error should be fixed. All right, so back to the single type. So we built it out like a normal collection content type. And let's say our homepage needs like a fabric on a logo. You know, that's content that we only need once. It's a single media. We need like a page title. And what else do we need? We might need some metadata. But yeah, we could probably create a component for that. But that's basically it, to be honest. That's what single types are used for. I've seen people use single types for navigation pages where you don't need multiple instances of navigation pages. So when you come and look at this and you want to enter data, you can only enter this data once. And unlike the books where you have multiple entries with single types, you only have this single instance. And it can be very useful. We sort of use that internally at Strapi for a couple of the functionality on our website. So you can go ahead and edit this also. And now we can say, what's the title? Our lovely homepage, something like that. And we'll save this and publish it. And there we go. One instance of our single type. But let's get back to our books api. Let's query that. Let me just sip some water. Okay, back, back, back. Yeah, let's get back to our books. Oh, yeah, I just seen the chat, Matthew. Glad the error is fixed. If anyone else has an issue or if there's anything that you'd love to trouble you, do feel free to send a message. And we can get you through it. Great. So now let's get back to this. I've run you through collection types, single types, and then we have a couple of plugins. Plugins are pretty big for Strapi at the moment, and we'll be getting much, much bigger. We have the content types builder, which helps us build out our sort of content schemas, like we just did. We have the media library, which helps us manage media, of course. I think we have like a tiny, but soon to be much bigger marketplace. Where we have a couple of different plugins, we have a graphql plugin, which gives Strapi graphql support. And you can run a lot of graphql operations, queries, mutations, and graphql works pretty well with Strapi. You have a documentation plugin to get your to get like a swagger documentation, like swagger UI for each of the collection types you build, because at the end of the day, like I mentioned, all your collection types become endpoints. So you can document your Strapi api by using the documentation plugin. We've got a lot of, we've got like a really rich third party ecosystem of plugins in this repo called Awesome Strapi, which I will send into the Discord. And here, if you want to have a look. And this sort of solves a lot of really interesting problems that people have for a lot of plugins. So we have a lot of starters for next.js, for example. Um, we have like expo notifications, most if site maps, um, and different with the wigs, editors, community hooks, email providers, upload providers, different SDKs. Um, anyway, I think you get it. Um, we've got like some really interesting plugins and then, um, something that's coming up. Um, and I'll talk about this a little bit more at the end. Um, Strapi will be launching a plugin marketplace pretty soon. So let's go there. So a new way to make Strapi awesome coming soon. And we'll have a lot of really interesting plugins built from some really interesting people. Okay. So back to that. So we've seen our marketplace and then we have a section here where we can see all the plugins that are installed to our Strapi. Um, plugins can be installed, uh, either visually clicking buttons or via the command line inside the Strapi app repo. I mean, directory, not repo. Um, and then you've also got like internationalization and you can add a couple of cows, unlimited locales actually. Um, and it's free. It comes with the free edition, media library settings, web hook support. Um, and then something which I think a lot of people really like is the ability to sort of limit roles for your administration users. You can create different roles, um, and you can add different users. So it's usually like create new user, enter the details, and then they get sent. You get a link that you can send them and then they can register as a user. Okay. And then one thing, which is pretty Strapi specific is the, um, user and permissions plugin. Right. Um, this is pretty cool, but before we use this, I want to show you what it looks like to make a request to Strapi. Hopscotch. And hopscotch is what I use to make requests. So what we're going to do here is going to make a request to local host, um, 1337 slash books, because that's the end point we just created. Um, and what we should get. Oh, why? Very weird. Anyway, we'll just do it the old fashioned way. So, uh, let me zoom in a bit here. When we make the request to locals, 1337 slash books, we'll get a four, three forbidden, which is very normal. This is exactly what we want to do out of the box. We don't necessarily want people interacting with, um, end points that we haven't properly configured or that haven't been given the right, um, or, you know, the right permissions or like, um, things haven't been set up in the, in the right way. And I wanted to do this so I can show everyone how we actually do something like that. Oh, okay. Um, there's another workaround, which I can show you for, um, getting or changing the port. Um, so Strapi is pretty configurable, which is one thing I mentioned after doing this, or kick around the Strapi, um, what do you call it? The Strapi directory and look at how like a Strapi app looks, looks like. Um, okay. So what I was saying, yep, our endpoint, books endpoint is forbidden, which is great because we haven't configured permissions for how we want to interact with that endpoint or how we want people to interact that endpoint. By default, we have two roles, authenticated and public, and they sort of dictate how people interact to our endpoints. So, um, this is the public role, of course, is for an authenticated user. And when we come here and scroll to application, so now we can now, we can define actions for specific applications. So for our books, um, collection type, um, ah, thanks Philippe for, for the fix. So for our books collection type, we can just like play around with these and see, see what we can access. So when we just pick here, we don't take the box, but just take the section that it's on. We get something really nice here, which says the type of request we can make on which endpoint. So count means we go to books slash count delete means make a delete, um, on book slash ID and, uh, find one we didn't mean to take it and find one is book slash, um, the idea of the book update is a put find is a get create is a post. So we can make all these operations or we can enable these operations by ticking certain things. And remember when we came to the book's end point, it said forbidden. So we'll take this, um, so we can actually query the book's end point. And when we do that, we finally get our books, which is pretty cool. So we have quiet number of pages and then we have some additional data for, um, when it was published, created, updated. Um, we have our cover image with details. There's the name, uh, URL for the image. Um, and yeah, that's pretty cool. So now we're able to access our data. Um, you should have a public role. If you, uh, we can just click there. Let's, let's do that to start and navigate to settings, uh, in settings under user and permissions plugin, you should click roles. Um, and by default, these are the two roles that we have. Everyone should have them authenticated and public, and then you can click public. And then now you can start to set the settings that we like, like we just did to give yourself or to give your, um, uh, defined actions allowed on that specific end point. Um, let me know, Bruce. Ah, yeah. Um, I'm guessing that's Alex. So there, they can be a bit confusing. There's administration panel here where there's roles, which are the three roles you see. What you're supposed to do is go to roles under user and permissions plugin. And then you see authenticated and public. So not here, but here, no worries. It's, it's, it's all good. So, um, yeah, that's pretty much, that's pretty much how we do things. Um, let's, let me, let me open up like VS code and, um, and, um, get things. What did we name this blog? Okay. So let me just zoom in. Right. So this is your, um, strappy, um, folder. And these are a couple of things that you should see. Like I said, it's no JS. So it's, um, you've got a package.json. And, um, in config, you should have server.js. And then you can sort of set, um, if you want to change what port, if you have problems with, um, things, so you have like your admin secret here, and then you have your, um, your port, you can change this port to anything else. You can change the host to something else too. Um, you have like a database of JS, which, like I mentioned, because we're using, um, and my SQL, we just have like a temp DB, which is exactly why you probably shouldn't use that in, um, production. We have a couple of things. If you want to set up cron jobs, we have a nice, um, section where you can run a couple or set a couple cron jobs, a bootstrap function, which can be really useful for making, um, certain operations occur whenever your Strapi app starts. Um, this is just like the admin build. And then we have the api section, um, which is really, really interesting because now we're getting into like the architecture of how the Strapi backend works. Um, a lot of people love to customize these things and add custom functionality, um, either checks before things get into the database, um, hashing passwords, appending things, all that can be done either through services, um, or the controllers, but, um, that's, um, more intermediate to advanced Strapi functionality. Uh, but yeah, that's pretty much, pretty much what a Strapi repo looks like and just some, like, bulletproof stuff. Um, yeah. Yeah. Cool. So what I'll do now is, um, change directors really quick to react advance so we can play around with next JS. I let you have any questions. Is there something, or maybe let's, let's do this actually. Let's install graphql just so we can show you how graphql works with Strapi because that's something a lot of people are really interested in. So we're back in the command, um, in the terminal and we're in the blog folder, which is where our Strapi app is. Um, and we'll run npm, npm run, um, install, um, npm runs Strapi install. graphql. So we install graphql and then we can, we can use it. Yeah. Yeah. We could add the Swagger one also, if you'd love to have a look, I will install it right after graphql. Yeah. That's something a lot of people really like. Um, let me see if I can pull this up. Um, we had a, a webinar with the folks at Postman and we were playing around with the documentation plugin. Let me see if I can send you a link. This is like a recap of the webinar that we had. I'll send that into the Discord also. I think it was a really cool thing. We really set up a lot of interesting things with that. So we're just waiting for the admin to rebuild. Let me know if this is too small and I need to zoom in by the way. More than happy to do that. Awesome. Um, yeah, should be done pretty soon. I apologize. I have way too many tabs open. So generally things are a bit slow. Okay. Well, that's, while that's, um, installing, let's, let's, let's get like our, our next app started. Let me zoom in a bit there, see if it's similar. Okay. It's installed actually. So now let's install the documentation and we'll do the same thing. It's, it's npm run, strap the install documentation. Um, yes, it will be recorded, um, and will be available later. I think they're recording right now. So, um, while that's installing, let's, um, do NPX create and do like the usual next app. Um, my project, let's call this client. Sounds like so. Oh, my bad. NPX. Okay. Now the, the admin is rebuilding and then we can play around with the graph QL and, uh, documentation plugins. Um, by the way, if like, this is all looking really cool. Uh, thanks Bruce. Um, if you think this is amazing, wait till you see, um, the next version. So right now, to be honest, you probably shouldn't check it out, but I will show it to you. Um, we have a much sleeker, much smoother version of Strapi coming out really, really soon. So the version you see right now is Strapi v3.6.8. Um, and we have a, oops, I have a v4 coming out soon. And, um, this has, there's like so many things, um, that are really cool about the v4. Maybe I should run it. No, if we have time at the end. Um, so we have like a much more streamlined developer friendly, um, plugin api. We've improved our, um, sure, sure. Let me send the command. No problem. Um, let's just go back. So I ran, um, NPX create next app. Thank you, Alex. Um, I, yeah, that's what I run. And our next app is done. And, um, let me just finish up this thing. So better error handling, new database layer, new REST and graphql APIs is like a couple of things that have been hyped up and then basically the beta is out. Um, but yeah, back to, back to Strapi and next. So yeah, we have our documentation plugin installed. We have our graphql plugin installed. We're in the blog directory. All we have to do now is, um, run npm, um, npm run develop to start our Strapi server. I'll just send that in the chat in case anyone wants to run it. Okay. So our Strapi server is back up and running. Uh, and first things first, um, yeah, yeah. And it, it, it really does. When you go to plugins, uh, let's refresh. You go to plugins. Now you see that the documentation plugin is installed and the graphql plugin is installed. So when we go to documentation, um, we have all this and, and what we can do now is open up our documentation. And now we have like this, um, Swagger UI for the Strapi collection types that we just created. So we have books. Um, and now we, we can test out and try out different things, which, which makes it much, much easier to play around with these things, um, and make requests and, and build out applications. Um, so that is really useful. Really, really useful. Um, and you have the same thing for the single type. Um, we have an email provider also. So that's the documentation plugin. If there's anything specific that you'd have wanted, I think we can try and squeeze some time in at the end. Um, and before I go into graphql, I think when I was looking at roles and permissions, we talked a lot about the public role, but we didn't necessarily talk a lot about the authenticated role. So with the authenticated role, um, what this does is it, it sort of adds another layer of security to your endpoint. And whenever you enable certain actions for different endpoints on the authenticated role, the only way to access that is by sending a JWT token with your request, um, by putting that in the header. So it's like bearer, and then you have the JWT token. And once that is confirmed as a valid JWT token with the Stripy server, and then you have access to that data. So you can sort of gauge your data with the authenticated role. Um, and the way to get your JWT token is by, um, passing a user. So we have users here that we can create. You'd be asked to put in like a password and a username or an email. Um, and then we send an end, we send like a request to a certain endpoint. It's, um, your Stripy URL slash auth slash local. And then we get back a, um, a JWT token, should our password and username be correct. And then because someone mentioned, um, authentication, we have, um, um, um, an email plugin here. Um, sorry, rather provider plugins. So what this means is you can set up, um, all these providers to register users in your Stripy app. So you can use Auth0, Cognito, Discord, normal email, Facebook, GitHub, Google, blah, blah, blah. So basically in your front end app, uh, you set these providers up and then you, people just click sign up with Google, sign up with Facebook, and then those get converted into users in Stripy. Those users can then make authenticated requests to, um, your Stripy endpoint. That's if you want to keep your, your content gated. Um, but that's practically it. I just thought that's worth mentioning. Um, okay. So we've looked at the documentation plugin. Let's look at the graphql plugin real quick. Um, I don't want to like rush through everything else because there's still a bit to get through. Um, and so, yep, this is the page. So let me just take that out. So this is your graphql playground, which is like an IDE integrated development environment that helps us like test out queries. Um, and one thing that I like about it is it sort of has this auto-complete feature, but before we actually do anything, we can have a look at our graphql schema. Um, and you can also have a look at this locally in, in VS code. Um, where is that? Yeah, we can have a look at that here also, um, but we won't. And we can also, we also have nice docs created for making queries and seeing what's possible, uh, different operations are possible. So if we want to do like books and, um, we can see what fields are available inside books and what type of things we can get. So if you aren't familiar with graphql, you have two types of three, but for now we'll focus on two types of operations, um, which are queries and mutations. So queries are, um, with queries, what we can do is, is it's like the name suggests we're querying data, we're getting data from a source and then we're getting that data back. An example of this here is, um, and you see that auto-complete that I mentioned, um, it's very intuitive. It's we're typing a query. What do we want the query? What are we trying to query? We're trying to query books. Um, what in books are we trying to query? Um, we want to sort of get the idea of books. We want to get the title. We want to get the, um, what else did put page number, number of pages, sorry. And, um, we want to get the cover, um, and in cover, we want to get the URL. So this is sort of what queries do. And, uh, then we get everything back, which is nice. And it's pretty much the same with mutations. Mutations on the other hand are, um, as the name suggests again, um, you're mutating data. It means you're either changing it in one way or another. Um, I'll get to your question soon, Felipe. Um, I said your name right by the way. So with mutations, what we're doing is we're changing data in some way or form. And I think this is best, um, shown by the docs here. If you go to, where is that mutations. So we have, we can either create a book that's a mutation. Um, so we're creating a new book entry we're updating a book entry, deleting a book entry. And these are all mutations that we have access to. Um, so ideally we, we, we would put in some input and then, yeah, we could make a mutation. Let me see. We've been playing a lot around, we've been playing around a lot with, um, before and the structure is a bit different. So let's see, create book. Um, let's see, is it input? Create book, input, um, data, uh, I told, um, what I thought would be the book to be for it. Yep. I think that's an interesting book. Then the dip and what else number of pages is also a short book. So maybe like 75. Um, and then under this, we want to return. This should work. Um, oh, my bad. And this actually should, this should not work because we have to set permissions up to do this. Um, but it's a good opportunity to go back and, and look at, um, at that. So there we go. Forbidden. And now we can go back into our Strapi app again to settings and then roles and providers public. And now if we go to create, we should be able to make this work. So there we go. The dip. So that's, that's like mutations. Um, and now if we go back and query, query this data, we query books and, um, let's just get names, titles. Sorry. We should see three books, right? Quiet, search one, the dip, all, yeah, all done using graphql. Um, okay. So Felipe is asking if there's a way to, to get absolute, um, image URLs and just for context, um, let me show what it means. So when you query the URL, the book right now, what's happening is, um, you're only getting sort of this like relative URL depending on where this is deployed. You have to sort of append this URL to that domain name. Um, and yes, you can get absolute URLs, but to do that, you'd have to use a different provider. It's because Strapi is self hosted. We really can assume in advance where your thing is, um, deployed. Uh, and sort of to do it that we have a bunch of, um, upload providers for images and media in the media library. One popular one is Cloudinary. And when that happens and you use Cloudinary as your output provider, whenever you upload data to the, um, to the media library, that is stored in a service like Cloudinary. There's one for Microsoft azure. There's one for, um, aws. There's one aws S3. Um, so what happens is whenever we enter data or media in the media library, it's stored in that third party. And whenever we make requests, we get, um, absolute URLs rather than this type of URL. I hope that answers your question. Um, okay. So that's a lot of Strapi. Let's get into, um, building out. Yeah. Yeah. Cool. Um, yeah, let's, let's get into, and you can see all these requests in the terminal that we're making. Sorry. Another question. Absurd mutations. Um, what are absurd mutations? Sorry. I don't think I'm familiar with those. What do you mean? Um, yeah, while we're waiting for that, let's, um, let's do this change. Oh, no, print this in the wrong directory. I thought we changed directories. So, um, let's, let's, let's, let's change directories. Oh, we did not. So we have to run that again. My bad. Sorry. So we run, yeah. So this is a command we're running now just to set up a next JS project again. Sorry. Um, oh, okay. I see what you mean. Um, uh, I will point you towards the graph QL RFC, which sort of gives you a good idea of, of what's coming up in Strapi before, but we have, um, yeah, it's probably in it. I will have a look myself and, and see, but if it's not, I think that sounds like an amazing idea. And I will probably ask the engineers to work on that. Yeah. Or at least to add it to roadmap. I'm actually actively looking at it right now. Yeah. As far as I can see from the RFC, it is not, but, you know, that sounds like a brilliant thing to have. If it is standard, I will, I will try and get that for you. Okay. So back to, yeah, now here we go. So clients and, um, npm run dev. Okay. So now we have things running on local host, local host 3000. Open that. And we have like the usual next project and oops, you're building a page. Gonna wait a bit. Okay. There we go. So welcome to next JS. We have the usual stuff that we see and, um, let me open this up actually in three of the photos. So go through the repo. I mean, the directory, I keep saying repo, sorry. Um, I don't know. Is, is anyone unfamiliar with, with next JS? So we have like a next folder here where we have a couple of things that make next tick in the background, patch the static, um, build manifest, non-modules, of course, for all our dependencies. Um, and just because this is sort of like big enough, I will, um, I'll have this section here. Sorry, let me just check the, sorry, let me just check the, yeah, we have this page section here, which I find really, really interesting. So the page that we were just seeing here, welcome to next, get started by editing pages, index.js. So we will do just that. Let's go in index.js. And start to edit stuff. So we have the head section, which says like the page title and, and everything. Then we have the main section, which says, welcome to next JS. Um, and then get started by editing. Then we have that, which is like the page name and we have these nice cards and let's actually edit something. So just above that, let's put like a p tag. What do we save? I think from react advanced, advanced, advanced. So save that and, um, it's a good update. But did we start it again? We did not start the server again, my bad. But let's just do npm run dev. Start our server again. Wait just a little bit. Oh, it comes up, compiled successfully. And now here, typing from react advanced. So yeah, I think we can, we can like duplicate this. Um, just duplicate that. Name it something else. Um, what do we name it? Let's go to JS and go to. Right. So let's see. Now inside test.js, we can, um, sort of say typing from react advanced in the file that we just made. And there we have it. So the, what is all the jazz about next.js? I don't know if people here have had experience with a tool like react or in general, just building something for the web. next.js sort of, um, makes things easier. Let's say that it, um, of course has a lot of really interesting features, um, and advanced feature sets, besides just making things much easier, um, besides making routing, um, and not being as, or, I mean, there's still a lot of room for, um, playing around with different state management or, um, different types of, um, building, you know, multi-page, single page static, uh, surface side rendered, uh, it gives you a lot of flexibility in what you can do. But I think the best thing that it does is it lowers the barrier for, for entry for someone wanting to get up and running with building, um, websites in react. And then that, um, coupled with the platform that for sell is, um, I think it makes it much easier to go from development where you're on your local machine to production where, you know, you have this thing being used by people who actually need to use it, um, whatever app you're building. And that's the really cool thing about, um, the really cool thing about next.js. So this is sort of why I chose to, to build this thing out with, with next.js. So now we, um, now what we want to do is build out a block. Um, I don't know if you have any like next.js specific questions besides that we have like a public folder, a bunch of config files, package.json, um, uh, styles page. And, um, yeah, we have like an app underscore app, which is sort of like the base of, of our web app. And we can add a bunch of config and, um, change how, um, our app works. So now that we sort of want to build out our block, um, I want to go back to the slides, not physically, but just mentally want to take you back to the slides and how we were thinking about content first and, um, where sort of think about how, how you would approach building something. And even though this is just like building a block, I get the goal of this is to sort of give you the blueprint and, and give you like a firm foundation of how you would approach something from a, um, content perspective, whenever you want to use like a headless CMS, um, be it strappy or anything else, I think you need to start from the content and what that looks like. Um, design wise, I already have like an image of what the blog would look like. So ideally the next step for us is to sort of structure our content the way we want it to be presented to our front end. And like I mentioned in my slides, that starts out in the backend. So we're going to do an exercise of content modeling, which will be fun. So let's, um, let's go for it. So we're going to build a blog and this blog will have writers, this blog will have, um, articles, of course. And then each article will have a, each article will have like a category. And then you have like a bunch of different categories also, that sort of, yeah, describe where your article lies. So we'll start by doing that in, in strap. You will go back to strappy and start building out this content model. And then once that's ready, we'll come back to the next year's app and then start to add the code that actually powers our block. I think we're about halfway. Um, usually I think people might want a break. Um, if you're good to go, cause I think we have, we're like literally at the halfway point. If you would not like a break, please drop a message and I will carry on. If you would love a break, let me know so we can, uh, yeah, sure. Um, let's do five minutes. I think it's a good compromise. Let's do a five minute break and, um, um, we will head back here. I think it's, it's, it's pretty much a natural stopping point. So five minutes and then we're back. Cool. See you all in five minutes. So that's, um, right now for me, it's five 18 and, um, let's say we're back at, um, five 23. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Hello. Hi, hi, hi. So we're back. Um, I'm back standing. Um, while we wait, um, I'm going to put up a few polls. So you should see something in the poll section. I'd love to, to hear from you about how you're using or what you're using for your backend. All right. So let's say people using, uh, headless CMSs and custom databases. Okay. There's something that I haven't put in the poll that you use. Uh, let me know. Ah, nice. Nice. Glad to hear that. I'm, um, very interesting polls that are going to come up after this also. So I think we're ready to begin when 35 out of 41 people have answered the poll. Then I'll know most of us are back. Okay. Where 26 people get answering everyone. Okay. 27 people. People just, uh, we'll open it right up soon. 28. We need to get to 35 so we can start. Okay. Ah, nice. C start. That's equal server node and Mongo, azure Cosmo DB. That's interesting. 29 people. 28 people have answered the poll. Is everyone back? Should I just assume that, uh, people who haven't answered haven't used it. Okay. Great. Just give me a minute. And then we'll get started with building out our content model and then building our blog. I have something that I want to share. So I'll end the poll. Um, that's interesting. Very, very interesting to see. Share these results. Yeah. Just let me know if you can see the results. Okay. Okay. I'll stop sharing. And, um, in about an hour, I will share another poll. So I'm going to go ahead and, um, restart everything. So we'll start up our server again. The yarn, uh, develop or npm run develop. This is our Strapi server. Let me just look at the chat. It looks like this activity. Um, awesome. Okay. We're up, up and running. And where is Strapi? Here's the browser. Here we go. So now we can get started building out our content model. Here we go. That's not it. Here we go. So we, before we went off for the break, we found out, or we at least defined that we want our blog to have categories. We want our blog to have articles. We want our blog to have writers. So we'll start off by doing exactly that. We'll start out with a categories, uh, collection type. So we'll go to our content types builder, click new collection type, and then we'll name this category. That's good. So what we want every category to have a name, short name. Um, and you can follow as I'm doing this also. And if you don't, I'll give you a command at the end that will sort of set everything up for you, like a template. And then we'll add another field and then we'll have a, uh, a slug and we want our slug to be a UID. Um, so it's a slug and then we, the thing about UIDs is you can attach them to certain fields. Um, so what happens is this will be generated automatically based off whatever the name is. Um, and then that's pretty cool. So we'll finish. And so right now we have name and slug and then we'll save that and wait till our server restart. Our tag TV is done. And now what we want to do is, um, we want to have a, what do we want to have? We want to have a writer. So writers. So we go back to our content types buildup, create new collection type, and then we'll go ahead and name this, uh, writer. What do we want writers to have? We want writers to have, um, writers have a name, of course. All right. Just have like a picture, a picture, can you not picture? Picture, sure. Media. Picture. And single media, of course. We'll add another field and this would be email. Um, we can just have it like this. You can use the text field and let's name this email. Finish. We have two pictures. We'll delete that one and then save. Um, I don't think that's possible because if it's restarting, then it's not up. So no one can access the content. Um, and then last but not least, we'll have article. And, um, now let's think about what goes conceptually. So articles, of course, have the title and add another field and they have a description. This is very long text. They have, um, we use rich text here just so that we have like the article content and, um, we'll add an article slug also. And we'll attach this to the title and add an image in case you want like a cover. It must be single media also. And now we get to sort of see how relations work. So we want an article to be related to a writer. So we have a writer there and then what type of relation do we want the article to have with the writer? So every article has one writer. Um, so basically writer has many articles, right? Um, we can sort of toggle through this article has and belongs to one writer. That is true, but a writer has many articles and this is the most ideal. Um, but no, we do not want article to belong to and as many writers. So we'll just, we'll go ahead with this and then, um, we'll add another relation for category. So we'll go to category and what we'll, what we'll have here, let's see, each article has one category. It has many articles. Um, article has many, no, take this one category has many articles. So we have one category and then many articles are sort of attributed to that category. That makes sense. Um, we actually don't want to add anything else yet. Um, so we have seven fields, title, description, content, log image, writer category. That makes sense. So we'll save this and we'll restart. Um, just in case you are left behind, I'll send something that can get you up and running. You can use a template. We have like pre-configured Stripey apps and what I'm doing right now is building our block template out. And I'll send that in the chat if you want to skip this and dive right into the meat. So just put that command into your, um, terminal. And then you have all of this already configured with, um, entries already, which will help us get to the next stage much faster. So that'll be helpful. Uh, yeah, welcome by the way. Uh, you can get recordings after the session or not immediately after, but they will be available after the session. Okay. So I'm sort of built out what we want with, um, the collection types. And then we'll look at, um, the others. We have category, which you can see has a relation with article, and then we can start to add, uh, content here. And let's try and add an article and you see what I mean. But before we do that, let's, let's add a couple categories. So, um, I don't know. Heck is usually a category. Um, and what else is category? Um, news is usually a category. Okay. And let's go back real quick to writers. It's at a writer who would like to volunteer to be a writer. I'll start with like myself, get this image because, um, Daniel. Uh, we don't have any articles yet. Um, we'll save that. And then we will, okay, we have one and we can go to the article now. Now we can sort of see how this plays out. This is the editing experience. We've entered Daniel. Our slug has been auto-generated, um, is doing a workshop. The description is a workshop on building CMS in 2021. Um, content, this is like blah, blah, blah, blah. So we can have something. And now we'll sort of see that we can assign a writer and we can assign a category to this article, which is exactly what we want. And we'll save that. Um, now there's an issue because one of the categories, sorry, one of the writers that we edited was not published. So we published that and now we go to articles and now we can publish that. So everything's good. Reads are too. Um, and then when we query, it's, it's good to articles. Let's just use graphql real quick. So query. Query. And now we want title ID. We can also get like writer, um, name, name, category, um, name, stuff like that. And then we, we, we get that back. Oh, we haven't given ourselves the permission to do that. So as we did last time, we will, um, give permissions for find, find one, find one, um, yeah, by, and write a, find one. Yeah. Perfect. So there we go. I just did a workshop. Barely any news, but yeah, there we go. So where were we? Great. And now, um, we can build out the the single types that will be essential for our blog. Um, and this gives us an opportunity to play around with the component collection types. So we'll go into our collection types folder again, and now we'll sort of see how components work. So a new component, let's call this seo. Um, select a category. Um, we'll name this Shared. And because we want to be able to share that seo, um, it's like an upwards arrow. And now we can build this component. We want a, um, meta title. That's short. Um, we want like a script and meta description. It's usually much longer. And then we'll add like a shared image. Shared image and, um, single media. We'll finish. I will save that. So now we have an seo component that we've created. Um, go ahead and now create a, a global, um, a global single type, which I guess will explain really well what the usefulness of single types is. Um, it's like global details for our webpage or our blog. So we'll start out with, um, an image. We want to define our favicon in our CMS. Uh, that'll be single media. Um, we want to define our site name, uh, be strict text and want to define our, um, I want to add like an seo actually, actually. So what we'll do is we click component. We can name this, um, and we can name this like default seo. And now we can select, so we can use an existing component and select component. We don't want this to be repeatable. So single component. Um, like I said, name this default. Yeah, we'll select our component and then shared. We have the seo component. Um, that's pretty much it. And now we have this show up. We can add this to literally anything else. So we could go to books and add the component. And then this is much easier for stuff that you want to reuse in multiple sections. So if we ever want to have like seo for an article, um, if we ever want to have like the meta title, when we share on social media, um, we could literally just come here and, um, create a component, use existing component, um, article seo, and then select that component, um, single, uh, and then finish. And then we have an article seo portion, which we get to connect to like, um, the head portion of our next app basically. Um, yeah, we will not save that. Yes. Confirm on the cancel. Um, so that's pretty much it on like creating this stuff. Now, like I mentioned, um, and I, I will share a link. Let me actually share a link because it will make the next portion much, much, much easier. And as we build out the blog, so there's a bitly. Let me know you have access I'll send that in the discord. Um, so there we go. And I will send it, uh, chat. But yeah, this will make the next section much, much easier. Um, so like I mentioned, we have a lot of content that we created. Um, that's just building out and, you know, from thinking about it, how we wanted it, we knew we wanted a category feature. We knew we wanted right to feature and we wanted those things to be related. So we made them related with, um, relations. We knew that we wanted, um, writers kept degrees articles. And then we also created a single page, a single type rather that can hold a lot of the global data for our site. So what I would do now is, um, change and run this command. And you should, you should do this because it will give us the proper foundation for the next part. And for the strategy, yeah, just grab the blog back in. We've got the other one fine. So let's just go with api. Yeah. So it will build out a pre-configured blog. So to do everything I just did and make sure you select the quick start, which is recommended. Um, it will, yeah, it will build out everything I just did. Um, just so that the next section is much easier. And there's like no mistakes in between that could probably make, um, finishing up the blog site much harder. So you should definitely go ahead and, uh, run that command. I'll send it in the chat again, but if you clicked on that link, you should see everything that I was just saying. Um, and keep track of, um, how things are supposed to look, how your content models are supposed to be, um, the different types of components is supposed to create and how things look. So now we're going to get into like the next portion. Thank you. Bruce. Yeah. We just wait for this to finish. Right. Does anyone have any questions at this point? Um, I think there's a couple of people who joined, but just take you through what we've gone through. And, um, I would advise you to have a look at the link I just sent. Um, yes, yes, I will show a static web app, which is exactly what we'll be building. Um, that's very weird. Um, let me know if anyone else is getting that issue. Okay. Okay. Where are we then? Hmm. Okay. There we go. And then we named this, um, api. Okay. Um, yeah, we are going to build a static web app for this. So what I'm doing right now is installing the template so that it gives us like a great base. I'd advise everyone else to install the template also just so that there's no mistakes as we go into the next, um, portion of the workshop. Should be done in a few minutes and then we can get started. Right. Um, so let me just talk about what, what we'd want this to look like. Um, so first of all, it probably have components of, of course. Um, how do we want these things to look like? I think we'd structure this. So we have the main page where we go to. Um, and then that main page directs us to a specific blog. So when we click on one of the articles that we see, that takes us to, um, this section where we see, um, a bunch of different articles. I mean, the actual content of the article, my bad. So of course, what we'd start out with is, um, and let me just start this up again. Okay. It looks like it's running. So we have our next app here. Um, let's refresh that. This is exactly how we left it from last time. And, um, we'll go back to our terminal and install a couple of things. And if you have the webpage that I sent you, you should have, you should, you should, it should look something like this. Um, and if you go to setting up a blog, um, under install packages, you can copy this and install everything. So you can either follow along or go along with what you see, um, in that file that I just sent. So, uh, next to install markdown react markdown and react moment, react moment helps us, um, work with time, um, so that we can say when something was published, when an article is published, react markdown helps us, um, put markdown content and display that as html, you know, our pages, um, because we're getting, um, we could deploy this app on Vercel. We could deploy this app, deploy this app on, uh, Netlify, but, you know, uh, time's a bit, it's a bit of a time constraint. So I hope we can get to that point. Um, so just look at that. Admin is building. Okay. So we've installed, um, the necessary packages, and then the next thing we want to do, um, in our next app, and just so you know, I have VS code open here and we have our next app. This is our next app code, and this is where we'll be, we'll be working from here quite a lot. So we'll be switching between localhost and we should go back to 300, 3000 rather, and the terminal. Yeah. So we just installed everything and then we'll start our server again. So npm, npm, undeveloped. And, oh, yeah, sorry. It's looking a strappy. Um, okay. So for the quick switches, back to the strappy section. Now that, um, our template is done, um, you should be redirected to a, um, to local study 37 slash admin. And then, um, your strappy app should start. And once you open that strappy app, you should see a content models built and you should see, um, entries. So we'll go into here, uh, strappy admin and create something really quick. Uh, and then Okay. Perfect. So this is exactly what I meant. We go to our content types builder and we look at our collection types. Um, you should see this built out. You should see this built out, uh, the component also seo. You should see that built out. Um, and then if you actually go here, you have content that you can actually query and play around with. And all this should be available. Um, should you have run that command that I sent? Okay. Now that that's running, we can totally focus on next JS again. Right. So what we just did, um, thanks Bruce for sharing in the zoom chat npm, um, to install react markdown and react moment. And now what we want to do next is I'll switch over to VS code. Let me just refresh that. I have been, uh, running on local host 3000 and now I'll switch over to VS code. So what we want to do now is in our route, create a new folder called assets. Um, inside assets, we need to create another folder called css. So what we're doing is, uh, uh, not a file, a folder, and then inside css, we need to create a new file called style, um, style dot css. And inside that we need to paste the code that you see in the snippet. Um, everything is in the page that I shared with you. And what this is, is just, um, different classes, css classes and differences as properties for app. Okay. Let's configure that. Um, so once you've done that, now we're ready to sort of start building out things. But before we do that, um, we need to set up how our next app calls our Strapi app. So remember we either have graphql or REST APIs, um, that we can use to, to talk to our Strapi app. So what we want to do is, uh, create a new folder again, code lib. An inside lib, um, create a file called api dot JS. Um, and really quick because we have like 30 minutes left, we will, um, put the code that makes the request. So what this does is we initialize a function called getStrapiURL, which either gets an environment variable code, next public Strapi api URL, or localhost 1337. We can go ahead and, um, create, we'll save that first of all, and we'll come back and we'll create a dot end file, um, new file, uh, dot end file, and just dot end file. We will initialize that value as our URL, which is just perfect. And back to this. Um, then we have another function, which is fetch api. And what that does is we define, um, a request URL and then get a response. And then we parse that response and then send that data back. So whenever someone calls fetch the fetch api function, um, it gets this URL and makes a request and then parses that request and then returns back the response data. And this is like I mentioned how our next app interacts with, um, the Strapi, uh, api. And then the next thing we need to do is because, um, there's a really important question that was asked around how we manage media assets. So you can either use like specific domains. It can check what your, um, Strapi URL is here, or maybe you have an absolute URL if you're using a third party, uh, upload provider like Cloudinary or, um, aws. So we want to be able to manage our media in a, in a very systematic way. And so because of that in the lib folder, we'll create another file called media.js and inside media.js. The first thing we'll do is, um, import the, um, get Strapi URL method from the api file and get Strapi URL. It just gets, um, the, either the end fireball or local is 3037, which we define, um, either here or not. And so the first thing it doesn't get that, and then we'll define another function, um, get Strapi media. And what this does is it looks at an image URL and it asks, okay, does this start with a forward slash? If it does, that means it's one of those URLs like we saw in, um, in Strapi. Let's just go to, to, let's get, um, articles. Yep. So if you look at that, this URL starts with a forward slash. Right. And what, what that code does is it says, okay, if it starts with a forward slash, that means it's not an absolute URL. And what we need to do is append, um, this Strapi URL to the media URL that we created. Or we can just serve the, the media URL as it is. So that's what happens with this code. Um, and now post this, what we need to do is make an update to our pages. Remember app dot, um, underscore. What is this? Sorry, if I'm rushing through, um, and then I did a terrible job managing time. So I'm really hoping that we get to everything that we need to get to. Okay. And then this section, um, is really fun too. The first thing to do is get rid of all the fact and then import a couple of things. So, um, we're putting app from next year's app, which we just got rid of reporting head, which helps us define items on the page head. We're importing, um, our css, um, create context, the fetch method that we just defined and the get strapping media method. And then now what we're going to do next is get a couple other things. So we have a global context, which is just setting, um, setting up what our page looks like globally in terms of, um, I guess seo and how it's managed. So get strapping media is what's called. And then we call, um, global, which if you recall, we go back to our content manager, we have a connection type and we have our Fabicon stored here. So a setting of Fabicon by making a request from Strapi and then defining it in our app.js file. And we're doing the same thing, um, by providing all this global data to next JS so that we have, um, the page name, um, the site name and meta description for our blog, as well as a shared image for whenever we share it. So I just really hear optimizing for seo, if you can call it that, or if you'd like to call it that. And we're doing pretty much the same thing, passing on, um, getting our initial props, um, by, and this is just our request. Again, we're using fetch api, which is the function that we just defined and calling the global endpoint, and then passing that data, um, into our props and getting global, which we then pass on to next JS so that it knows that this is, this is what my webpage looks like. This is like the metadata that makes up my webpage and the head tag. So that's pretty much why we're updating this page. It's the part that isn't as fun, but usually has the most impact. Um, great. And then we need to sort of keep doing that. Um, they're not so fun parts. So next thing we need to do is create a, um, underscore document or JS file. And what this does is it helps us, uh, modify the existing document page. We've already, uh, I already introduced you to the concept of editing the head and body portions of, um, like your, uh, next JS, um, web page. So we're going to pretty much go in the same line and do that with our document page. Uh, and this is sort of like, if you're a traditional developer who's worked with like vanilla javascript and html, this is sort of us just like injecting scripts into, um, like our html file at the top, uh, for things like CDNs, or, uh, different scripts to run different libraries. So just inside our pages folder, we'll do the same thing. We will create a new file and we'll call this underscore document dot JS. Okay. And come on, paste. It's a, it's a lot. And I'm hoping you all have the, yeah. And then getting this error. So what I will do is just it's a document. Sorry. Wait, just give me a minute. Um, um, let me see what the, it's just referred to the actual next documentation. Um, and I should probably fix that. It's document. Thank you so much for the correction. So it is pages slash document.js confirmed. Okay. There we go. So document.js. Um, and I have no idea why we're getting that error because this is the document.js file. So I'll just ignore that and you probably should too. Um, so in quick fix, just say disable, um, on this line if you're using ESLint, um, if you like things looking pretty. And like I mentioned, what that does is it helps us extend the existing next document by adding different links into the head section of our html, uh, file for our next app. And what this does is it adds the Google fonts api for the font that we'll be using on our front end. Um, this is for the UI kit, which is the UI library that we'll be using for building out this blog. Um, and the rest are just like icons and, um, other UI kit, uh, CDN stuff, which are just injecting into the document. And that's why we're creating the underscore document.js file. Um, cool. Now we had a, what did we call it? We had a, we had an seo component. We had two, let's go back. We had two single types here. Um, we had this homepage, which sort of stored all seo data as well as, um, some hero, hero text, right? And then we had a global, um, single type. We've already seen how our global data has been used by injecting that into, um, the next html file so that that's, um, aware of this content, uh, aware of this metadata. But we haven't yet seen how we use the homepage data, which is what we're going to do next. Okay. Um, cool. So back to the VS code. What we're going to do next is, um, create a components folder. Just clean this up. Um, um, new folder called when it's called, no, no, no, just hold on. All right. So inside this components, we should create an seo.js and new file seo.js. Okay. Then we have this seo code. So the first thing we do is we import a couple of things, um, head, because that helps us modify the head section of our html file for next, um, use context, global context, and strapping media, which helps us manage media. And then we start to define a couple of things. Um, it's a really long file, but very useful too. So let's just paste that there. And let's like, just go through what we're doing here. Right. So we're defining a couple of things. Um, and before we go up there, I think it makes more sense to just to start here. So we're getting a couple of things, our meta title, which we're getting and setting, um, our share image, which we have from strappy. And then we're setting this up and using this as, um, constant, and then we're passing that into the actual head. So what we're doing here is we're setting our title to a meta title, and then we're setting our page, uh, meta title as well. Um, this is for Twitter. If you want to have those nice Twitter cards, uh, and this is for platforms like Facebook and LinkedIn. And you're basically doing the same thing for, um, your description, um, for different platforms. And that's pretty much the reason why people, um, feel that in, uh, I think for a lot of people, these are things that are really important. And if you share something, you want to have that description, that image, um, because it's more appealing, more visual. And that's what we're doing with this seo component. And it's just really cool to see how it, um, it sort of trickles down from the CMS to your web app. Um, so yeah, that's the seo component that we're doing. And now we can actually get into like the other stuff. So next we need to create a nav.js file. I realized that I can add these, um, I'm going to build them hard, but realize that we don't necessarily have that much time. So and I shall provide you with these. So I should probably add this to get a repo because that'd be much easier to share. Okay. Right. So most great web apps have a navigation section. Right. And that's what we'll do now. So inside our components again, create a new file, code nav.js and we'll paste in the code that's supposed to go there. And I'll just make this a bit smaller because it's filling up everything. So we imported a couple of things, react and react link. Uh, sorry, next link, which is next way of helping us navigate through our pages. And then this is the, um, the portion that we return. So our nav bar, this is what we're building. We're basically building out the nav bar here. We have a section that says, um, a blog, and then, um, we're fed in data. Um, that is the categories that we get from our CMS. And then we map those out and create sort of a, a left, right, sorry, a right menu of all the categories that we have. So we can just click on those items, um, and then navigate to the different categories. Oh, yes. That didn't mean, um, I have to actually put them after I, there we go. You should see nav now. I'm adding those in real time. Let me actually just add all of them so we can go ahead much sooner. I think that'll make it much easier. The next one is this. Yeah, just give me five minutes. See that? Um, okay. Okay. Okay. Now we can continue. So we've created our nav bar, um, and now you should probably see everything. We've created our nav bar and now we can actually utilize that nav bar by creating sort of this layout that we want, um, our webpage to have. Um, so we'll get a new file and create something called layout.js. And what layout.js does is let's put that there so everyone can see it. We import our nav bar, which we just created, and then we create this new layout component. Um, and then we feed, um, our nav bar section and then passing categories, because remember our nav bar section, um, has, or at least utilizes categories because it needs to sort of map those out on the nav bar. So we should probably check our web app, see how it's doing, see if we've got any errors. Yep. Nothing is showing up yet, but the UI has changed because it changed styling. Why is nothing showing up? Because that webpage is fed from our index.js file and we haven't changed anything there. So until we're done with components, we pretty much won't see any changes on our index.js file. On the plus side, nothing's broken. So that's great. Um, okay. So, um, um, the next component that we need to create is, um, oops, my bad. The next component that we need to create is an image component. We're going to use next image to sort of make sure we're optimizing all the images that we're using. And inside components again, new file, image dot, um, JS. Right. And then here again, you notice whenever we have to deal with images, because we're not really sure if it's, um, an absolute URL or, or it isn't, we have to import get strappy media, and then we import next image, which optimizes images. Um, and then what we're doing is we'll practically just, um, creating a component around next image and then setting up a bunch of, um, these properties with width, height, um, source and loader, and then sending that into, um, wherever we're going to use that. And where are we going to use this image? We're going to create a new component called card dot JS. And this is sort of be a card that has the image and some, some text. So we'll copy that. And like I said, like we're using the, the image component that we just created. So this is, um, it's a link first of all, because whenever you click it, you should be redirected to article slash, um, the article slug. And then this is what we click that takes us to the next page. Um, and then we have the extra fair, um, these classes for styling. And then here's where we passed in the image details and then those get processed by the image component. And then here we pass our article category, nice and, uh, organized and right below that the article title. And once we start to build out our index, the chairs file, all this will start to make way more sense. Okay. And last but not least, our article, what do we actually see? Um, when we click something or how are we arranging things? So another file that we call dot JS and we'll save that. So here we're defining a couple properties for, um, the way our UI will look. So our finished UI will have a couple articles on the right and the left, sorry, a couple articles on the right. And this is just defined that chick and slicing up articles so that we can display them and order them, um, with the way that we want them to stop. Um, and then here we just map those out, uh, into the UI and render them. So we have the articles that are on the left and then we have the articles that are on the right. That's pretty much it. And this also to make way more sense. Um, now that we're actually going to edit our index dot JS file. So now it's the moment you've been waiting for index.js. Um, you have the code there also that we need to get. And so you can literally just take all of this out and replace it. But before we even look at anything, we need to look at what we're doing. So we're importing articles. Remember I told you the UI will sort of be skewed because we have some stuff on the left, some stuff on the right. Um, and just that we know we can add like an extra H one type and say, Hey, this is, this is the VAT file. Okay. So here we get the articles, categories, home page. Um, we put the categories in the layout so that they're on the nav bar as we want. We have the seo component and we're passing in data so that, um, um, like web crawlers and different social media sites are aware of the metadata in our page. Uh, and then we have this title section, which we get from, um, the homepage also, and then we have this thing that we just added. And then we pass in articles so that it's displayed in the article, um, component laid out on the left and the right. And, um, below that we have our get static props function. Um, and what that does is we make a couple requests, uh, at build time so that these pages are populated and then, um, we get returned something. And then that what we get returned is passed on to props. And then that's used in the page component, um, to power the different components that we just imported. So we'll save this and then now let's look at, um, let's look at what things look like in the front end. So component articles cannot resolve. Looks like we misnamed something. We named it article, sort of articles. My bad. Let's change things. I think it's crossed. There we go. Um, okay. So, hey, this is that file is showing up. So that shows that this is us editing the, um, the blog section. Uh, I mean, sorry, the index or JS file. Um, when we click categories, that should give us an error, which is perfect because they haven't built that page out yet. The same thing should happen when we click a blog post. It should give us an error because we haven't built that page out. Okay. So let's, um, do a quick recap. But before we do that, let's just clean this up a bit. Um, let's take that out. Hey, this is that file. Okay. Um, I'll have a bit of a hard stop quite soon, but we'll try and get through this. Um, the next section isn't actually what it is. There's another section that I need to add, which is creating the slug. Great slug. So what we're doing right now is, um, this is a static web app and everything is sort of like pre-built and then rendered. Everything you see that's appearing was got from the CMS and then, you know, um, everything was processed in the way that I just explained it. And that's how it shows up on your screen. The next thing we're going to do is create the functionality so that whenever we click on an item, we can actually view that item which I guess is very important, right? Um, um, one page, one minute, sorry. Also, what we need to do next is create a single category page and, um, a single article page. And in real time, you see that being built out in the document. So let's create a single page. You see that being built out in the document that I shared. So you can actually copy and paste that code. Um, but before we do that, we actually need to go back to VS code. If we do anything, I need to support that before it gets too dry. Okay. So in the pages folder, what we need to do is create a new, um, a new file, sorry. We need to create a new folder, one called articles. And then we need to create another folder called categories. And inside those folders, we need to create a new file called, um, so I don't know, it depends on which part of the world you're from, but, uh, these, I call these square brackets. So we need to create square bracket, opening square brackets, slug dot JS. And then, um, we need to do the same thing in categories, um, new file, open square brackets, slug, close bracket dot JS. And what this, why we're doing this is we're utilizing next.js' dynamic pages functionality. So like I mentioned, we're sort of pre-building all of this and Next really doesn't know what type of data to expect from where, right? Um, so by doing this, we're sort of creating this template for Next to sort of parse through different data and dynamically create pages as we go along. Because if we go back here, we aren't really sure of the data that's coming from the CMS. Like we don't know all the data that will come from the CMS. So we can't have, um, like a list of literally all these pages and their slugs so that we can generate those and then serve them to the user. So we do this dynamically. Whenever we get the data, we get the slug, we process it, and then we build that page out. So that's what we're going to do next. Um, and, and this is probably going to be the last thing. So this is the BS code. Give me a minute. Yep. So this is articles. So we need to go into articles and we interface this. Don't worry, I will share it, um, in the doc also. There we go. And then, um, we need to do the same thing for categories. Okay. Perfect. So let's go back to articles. This is exactly where we are. And let's look through exactly what we're doing. Okay. So we import react markdown. This is the, one of the first things that we installed because that helps us, um, can sort of convert markdown, um, to html so that we can have this, um, displayed on the webpage and then moment, um, helps us with tracking, uh, or managing time in javascript. I have the fetch api, which helps us get data. We have layout, which is the thing that we just made. Then we use the, um, get strappy media because we're dealing with images. Yep. Sorry. Um, and yeah, this is, um, this is what's happening at the bottom here. We have get started parts and get started props. So we're using the fetch api again, uh, and sort of like dynamically calling an endpoint, um, based off the stag, um, and the category. And then passing that data, um, that we get returned as props that help us build out the page that we want. Um, so that way we get, um, the image URL that we want. Um, where is that? Yep. Here we go. Articles and categories. Um, so that way we can still sort of display the categories we want and then display article specific data, right? Um, based off the slug, we're making a request to Strapi and then we get that data that corresponds to that specific page. And then we display that data. So we display article specific content, um, the picture of the author, the author name, where things are published, um, and all of that stuff. So let's see. Once we save this and we go back to our webpage, once we click a necessary fresh, once we click an item, we should be able to see what's happening. Ooh, some chorus issues just a minute ago. This happened before. What I would do is I will go back to, I will stop that. Um, and I will go to, uh, where's the file? I'll just delete this next folder and, um, restart things again because we still have Strapi running and everything is good on the Strapi end. On the Strapi end. Sorry, the folder name should be equal to the content type. Ah, yes, that is a, is the, uh, no, that's a good point. This is articles, which should not be, yeah, good catch. Thank you so much with that. Um, great. And, uh, let's see if we have things up and running. Okay. Let's see now. So everything is looks good here. And if we click this, then what is that? That was weird. So we have things displaying, but we have that little error for a short while. Um, okay. That's interesting. Click that same error script. And this is probably a, a request response thing. It's probably trying to render the thing before it gets the response. Um, but that's okay. We have the blog part working, but one thing that we notice here is if we click articles, we still get that error because we haven't set that up yet, which we will do now. So this is actually a hard stop in six minutes. So I need to rush through everything. So we'll just go back to VS Code real quick and, um, paste the code in the category section. It's pretty much the same thing. Um, what we're doing is importing, um, the relevant, um, components that we need, seo, layout, articles, and of course, using the Fetch api, because the Fetch api method from the api in the lib folder. Um, and then we're calling, um, this endpoint with categories for a specific slug. And then, um, when we're returning that or returning that article, I mean, in that category specific content, so it displays all the articles that are in that category. So we'll save this and then nicely also it has a meta description and, um, meta title for the category name. So you have this seo optimized, um, and this is something you can adapt to, um, other places. So we should go back. It's just very fresh for good luck. Um, and quick news. Very weird again. I think I missed, I did not name it the right thing. Yep. Rename. Yeah. Thank you. So now we should be able to. Well, that's a really good catch. Um, so because of how we're naming things, um, yeah, because of how we're naming things, this folder sort of has to be the same as the, um, content type. Otherwise things don't work. And you could see that error because I named, um, the articles folder articles instead of article. Um, it was literally just an S and the dynamic paging, the next dynamic page, um, feature would not let that, because that's how it works. So, um, now if we click on tech, for example, we should see all the tech related articles. Um, and we can click on those and, um, yeah, we can see a bunch of articles. Right. So in three minutes I will rush through the other stuff that I was supposed to, to get through. Um, I would just share a link again to the thing that I was going through HTTPS, it don't know why, because it has way more resources. Um, that can sort of help you. Um, yeah. If you want to, if you want to go through that, but, um, like I mentioned at the beginning, when I was giving you an intro to Strapi, um, where were we? Um, yeah, the next thing that we're sort of supposed to go through was, um, deployment. Um, for next.js, someone asked the question, where can we deploy this? The quick answer is Vercell is really a great platform to deploy a next.js project. Um, another option is something like Netlify. Um, but I have linked here to the official documentation on deployment and for Strapi, like I mentioned, because, um, even though we're using the quick start and that has a SQLite database that doesn't necessarily, um, work best in production environments. And I would suggest using something like DigitalOcean or Heroku, um, azure or aws. Um, if you want something free, Heroku is usually the best fit and I've linked to documentation here for how to deploy Strapi to, um, Heroku. The bonus section that I wanted to get through, um, was, um, yeah, the bonus. Thank you, Jorge. Um, thanks for coming on. And, uh, yeah, you can apply to azure and, um, your own VM. I've seen people do that and there's a couple of guides on how to do that and set that up also. So if you've got like your own, like on-prem stuff, um, that's something that you can definitely do. And, um, yeah, previews are something that I really want to talk about because it's a big feature that is sort of missing from a lot of like modern CMSs, being able to preview the content that you create before you publish it. So you enter, um, something in here. So it's, it's, maybe we enter a new, we enter a new item here, but we don't necessarily want it to show up in production yet. We want to see how it will look like, um, on the website. And what I wanted to show was how to sort of enable that with next.js. Um, and because I could not do that, I've left a couple of resources. Here's like a very detailed blog post, um, that shows how to implement previews with next.js, um, an intro into what previews actually look like in next.js, um, as well as an example application by the team at Verso on how to use previews. And then I also have a couple of startup projects that you might want to get through and resources that you might want to look at. Um, and literally everything that we did today is, um, is detailed in this page. So you have the slides. If you want to go back and look at what I was talking about in terms of headless and where it fits, um, you have details on how to set up Strapian Next. Um, plus you also have this recording. I think, does anyone have any questions? I think I could take like one or two questions before I have to jump off. Uh, but thank you so much for joining the workshop. I hope it was useful. I hope you, um, I hope you've learned something new about the new modern way of building, um, CMS driven applications. Um, even though it wasn't necessarily the most perfect one, uh, because of time, but I think we got through some really fun stuff. Um, hopefully you have an understanding of Strapi and where it fits in your stack and how you can use it and how you can get the best of it. Um, hopefully you've got a glimpse of how to implement it and build, um, web sites with the blog example that I chose to have. Um, but yeah, thank you so much for joining. And, uh, I hope you hope you all have a great, uh, I hope you all have a great conference. Um, so I'm not sure what the 4i principle is. Okay. Ah, okay. Um, um, yeah, yeah, you can do that. Um, we have rural management, so you have someone who can, um, probably show that really quick here. Um, there's something that people were confusing. Give me a minute. You truly have just a minute. Yep. There's something that a lot of people were confused by. Um, and if you go to like administration panel, you have different roles that you can create. Author, editor, admin, and you can sort of, sort of decide what type of, um, access people want. So if you look at the author, they can create read, um, but editors can only, um, you know, do certain things. So you can have someone who can only write something and they can publish it. And then they have to wait for reviews. And then you can have someone who can only publish. And then this also works really well with internationalization because you can limit who has access to different languages or who can do certain things with different languages. But, um, long story short, yes. Um, hopefully that helps. And again, thank you so much, everyone. I hope you had a great time.