 So I will start. So I'll be talking about building a REST and GraphQL API with JavaScript in five minutes. So maybe a bit of working with a timer. So expect that. My name is Daniel Madelisa Piri and you can find me anywhere online as Mao Gambiz, M-A-L-G-A-M-B-S. I do developer relations at Strati and I'm a disc jockey, I mix house music and techno on mixed clouds. You can catch me there as Mao Gambiz also. This talk will have a couple of Lego references, sort of an inside joke at Strati. We seem to really like Lego. Yeah, and this is a brief overview of what we'll be going into. So like the talk says, I have five minutes to build a REST and GraphQL API and then we'll get into like a quick Strati 101. Then we'll look at how Strati fits in your stack and I will sprinkle a bunch of resources in everyone's faces. So let's get started. Actually I haven't done this. I don't know if it's true, just like an add to like intrigue. So if you wanna get started with Strati and this conversation earlier, my preferred package manager is Yarn. There's an NPN and NPX alternative, but you can start with Yarn create Strati app and your project name or you can use a digital ocean droplet and I have a link to that. So the first command you see is to get a Strati project done and the second one is to get a Strati project running on digital ocean. So let me start a timer and let me take a couple of deep breaths. We'll set this for five minutes and we will go. Okay, so it started. Sorry for the noise that will come up when the time ends. So once you run the command that I shared, you have to register and create a user. I'll try to please do this quickly. I already have a password and my email. So let's just get into it. So this is a dashboard and we have to create our first content type, which is basically a collection of what type of data we want to store. I will create one for coffee. So this is sort of like a collection of different related fields. So I want to create something for coffee and in that I will have individual fields. So I want to have a name for a coffee drink and I want to have a, what can I call this? Yeah, okay, a brew, my bad. A brew, okay, let's finish. So we'll save that. I'll tell you where it starts. This is a Strati server and take a bit, but yeah, super about my five minutes now. Let me just refresh. Weird. I'll do it manually. Yeah, and the demo got the never with me for some reason and my time is almost up. So bear with me. Okay, there we are. Great. So we have our collection type coffee. Let's actually add a few, like actually add content to it. So a coffee drinks out there. There's like a mocha and then that's a espresso coffee. Let's add another one just for control. There's like a, what is it? Just like an americano. I'm definitely not going to make five minutes. This is also like espresso, but just change the user, it looks nice. Cool, okay. We have like content, great. So now, so that we can actually get our API running, we have to add permission so we can send requests. So we have our coffee collection type. We just click find and find one so that we can get that working when we save. We have the server running on localhost 1337. So we can actually send a request to localhost-coffee. Okay, there we go, coffees, I don't know. So we have the mocha and we have the espresso built by me and we have the americano, we have the espresso. So that's the rest API done. I don't know how we're doing for time. We have a minute. And we can actually get a GraphQL API up and running by installing a plugin. So we'll do this, fingers crossed, this works in five minutes. But this is literally all you have to do to get the GraphQL API running. It's a plugin that you can just install and configure the same way as I did the rest API. Okay, seems like I have to do this manually also. Can we take it? Okay, excuse that, if we go to GraphQL, we should have that, wait, it didn't actually install. My bad, this is like the worst demo ever. And five minutes is up. So I'll just close that. All right, let's go back to our slides. I promise five minutes. Can I make it? No, but we can actually have the GraphQL API installed. I don't know for some reason why that's not working. I have a backup API running on Locos 30 and 38. I will switch to that. Where is that? Zoom is being funny. So I have another server. I think I just think if anything wrong happens. And this is actually a collection of albums for music that I DJ. If I run this, you actually make a GraphQL query and get back some data. So that's pretty cool. I actually want to get back into the slides. Did I make it? No, sort of. I don't know, you tell me after. And I think I did a lot of what might seem like magic because I'm not sure if everyone's pretty familiar with Strapi and this is probably the right time to get into a Strapi 101. So Strapi is a headless CMS. I'll get into what that is a bit later. Headless CMS, yeah, I'll get into what a headless CMS is. It's open source, it's for an MIT license. You can tingle with the code on GitHub. It's fully customizable. Like I said, it's open source. You can fix this API and mess around and do a couple of like ads and abstract of business logic in Strapi. It's self-hosted also. So you choose where you deploy it. You choose where you host your data and use or own your data also. And like I mentioned, we built the API with 100% JavaScript. It's built with Node on Coa and yeah, I guess it's the popularity JavaScript has. It's good to have like a backend with JavaScript and a frontend with JavaScript too. So that's also a big plus. Got a really cool plugin system. So you can build additional functionality into it. The GraphQL API, which gave me so much, the GraphQL plugins, sorry, which gave me so much trouble is a plugin built by a community member and it's called GraphQL. Rest is default like you saw. The rest API was working very well. And then there was an issue with the GraphQL but GraphQL is supported like you saw in my backup. So a bit into what a headless CMS is. So it's sort of like a backend where like your data is accessible by an API call be it Rest or GraphQL. If you think about like traditional CMSs and what that looks like, the likes of like Drupal, Joomla and WordPress come into the picture. They sort of have a very connected coupled approach to the way they serve data where you have a frontend that you cannot disconnect it. Well, now you can with headless WordPress. They're going headless also. But traditionally everything in your frontend was connected to your backend and you had no control over how that works. Yeah, that's sort of what a headless CMS is. I have a really cool illustration that I think will sort of cement the idea of a headless CMS. So you can deliver content anywhere to any frontend. So this is like a mobile application. You can actually call it from another server that's your thing. You can have like wearable devices, IoT devices, websites. If you can make an HTTP request on the device and you could probably use a headless CMS. So yeah, your content isn't really locked into one platform especially now where mobile is taking over. There are more people using mobile phones than people using like computers. So that's a huge benefit of a headless CMS. Use cases, when you think about use cases and CMSs, I think I like to call this the curse of WordPress. WordPress was really used to make mostly blogs. So everyone assumes that all you can use for like a CMS for there's actually lots of use cases. We see people using things like Strapi to create career websites. There's like vendors who do fast food, displaying info on their menus in Strapi. There's people building games, CR, people. And even just like normal games to use like a Unity plugin if that's your thing. Although it probably isn't, this is a project. So people use it for a lot of things. I've added a lot of resources for things I've built with Strapi. A couple of websites with Gatsby, Nux. And SAPR, I think it's so talk also, so that would be cool. So yeah, it's way beyond blogs and corporate websites. There's so many use cases for CMS. Can we just take some water? Yeah. And so you're probably asking where does Strapi fit in your stack? And after my explanation, you probably have a good idea of where that might be. So have data in your backend with CMS and you want to send that somewhere. I have like a very quick description of how to add Strapi to a Nux application. So yeah, we're using Nux. Before we get that, like before we actually have our content displayed on our Nux website, we have to do a couple of things. And this is installing Apollo client and the GraphQL packages so that your Nux application is able to call your Strapi backend via GraphQL. And then we get our Strapi endpoint. We edit our Nux config file and then write some code. Yeah. So this is all you need to add GraphQL to your Nux application. You add this module and do install the GraphQL package and you're good to go. Like I mentioned, immediately after installing it, you get your GraphQL API. So my bad. With Strapi, you can customize the endpoint, of course, but the default endpoint is Logohost 1337 slash GraphQL. For the slash GraphQL doesn't change. And, but the port number can change. That's very customizable. And once you define this in your Nux application, you're able to call your Strapi server and deliver content to your frontend. Well, of course, it's for using the GraphQL API. So we have to make a GraphQL query. I ran this query, but just in case, like just so it makes a bit more sense. So I can show off the benefits of using GraphQL. You can really define exactly what you want to get out of your query. Let me just zoom in a little so that this is a bit more clear for everyone. So we have an album collection type and inside the collection type, we have a couple of fields. ID name, description, image, GraphQL. We don't necessarily have to get everything back. We can only get back exactly what we want. So let's say we don't want the ID for some reason. Usually the ID is much easier for lots of data, but let's say we just want the description of an album and the name. When we run our query, we get exactly that back, the name and the description. And we can do the same. You can just have an image, my bad, image, and that image contains a URL. So if you run that, yeah, there we go, we get our name and an image for the post. So yeah, that's pretty much your GraphQL request. So this is a GraphQL query we're making. This is the information we're getting. We're getting the ID field, name field, description, image. Yeah, I think you get it. And then we sort of import that query so we can actually process it. And remember, we use Apollo Client. So we import the query that we defined in the other file and add that as a parameter for the Apollo query. So Apollo knows that this is the query that we're running. This is the data that we want to get back and sort of filter that data and get back like much more refined like data that we can render on our page. So this happens in your index.view file, NUCs has a really interesting way of organizing its directory. Every page is in your pages folder and index means that's your index page. And if you wanna have another page, you can really just call out page two and that would be like your website slash page two and it would open that up. So yeah, this is practically what we do. All we're doing here is importing our query, our graph scale query, telling Apollo that this is the query you want to make and filtering that data. And then rendering it, actually rendering the application. So all we have to do here is use album name because that is exactly what is written in our query. That's the field that we want to get. So we want to display the actual name and the response data is in the album data property that we defined here. And that's exactly what we do because we query for an album with the name description image. We render exactly that, the album name and the album description. And everything is awesome. We have Strapi working with Naxx. So I actually want to show you the website behind this. This is, let me just make that smaller. I think I zoomed in too much. So this is exactly how things will look and just so you can actually get a really good idea of what like, and so you can compare the graph key or query and the response on, yeah, there you go. Windows is being Windows. Great. Okay. So let's get back everything. The description. I actually want to have the ID here so we can have a look at everything. So yeah, here we have the first item. Malgam is on air, matches that. Description matches that. And so basically just rendering everything that we get from our query response. And yeah, again, everything is awesome. Very happy that this demo wasn't as much of a disaster as the previous one. So that's great. Yeah, if you, like I said, I'll sprinkle a bunch of resources in your faces. I have curated or I will be creating. So if you want to catch up with what's new in Strapi, this is a really cool place to look at for resources. So bit.ly slash Strapi dash resources. So I've listed a few plugins, a few blog posts, links to like getting started, quick start guides, documentation and a bunch of projects that I mentioned that use Strapi with Gatsby, use Strapi with Nux, use Strapi with Sapper. Yeah, that's pretty much it. I'm bummed out that the GraphQL plugin didn't work, but thank you very much. I will stop sharing my screen now. That's great. Is everybody have any questions? Please unmute yourself and ask questions about Strapi. So we have one here from Dominic. Does Strapi have its own database and is it customizable? Oh yeah, a very good question. I didn't touch on that just so that we can try and keep things short. Strapi does support a couple of databases and that's up to you to choose when you're getting started with it. So we have like MongoDB, we have MySQL, we have Postgres also. So you have your database, you have the freedom to choose your database when you use Strapi. And so yeah, I hope that answers your question. I have a feeling like the first demo you did, you did it like you already installed it, but the UIL is wrong. Can we try that again? I'm just curious. Sorry. Now can you try the first demo again? Yeah, sure, okay. So the next one is slash graph QL. And you did the demo, I think you did like slash something slash graph QL. Ah, I see, okay. That matters. Probably. Let me just share my screen again and start that. Why do I do that? Also my mouse stopped working mid-presentation so that was very uncomfortable. Cool, okay. So where is that demo? Let me just make this full screen. So that was here. I'll just refresh this that we get back in our Strapi admin. So the issue actually, okay. So the GraphQL plugin is installed and the issue was, you said I put the wrong endpoint. Yeah, I have some field control. Yeah, you're right. Okay, so I should be able to query coffee. Can we use my... So let's call this query coffee and... Ah, yeah, okay. Very correct. Thank you very much for that. So the demo didn't show. Great, so coffee brews and what else did we have? Name, cool. And yeah, exactly, we got that back. So I guess I did it in five minutes. I guess the pressure of making it in five minutes made me mistype the endpoint. So yeah, there we go. So we have another question here. Okay. Why Strapi over other headless CMSs? Well, I think that's a very interesting question. My question to a lot of things like this is always, it depends if you're in a scenario where the benefits of using Strapi would give you value, then you should definitely use it. So if you want an open source CMS, then it's an awesome, like it's an awesome CMS to use. If you want a CMS that lets you host your own data and customize the API, then Strapi is probably much better than others. There aren't many headless CMSs out there that have the combination of things that Strapi has, like choice over your database, the types of, and APIs we have, both GraphQL and REST, the customizability of the API, it's super customizable. We have hooks that can like populate your CMS on like your server starting something really cool that a lot of community members have been playing around lately is using Strapi for authentication. So you can actually manage users with Strapi as you would with a service like Auth0 or instead of actually building your own authentication, micro service, this is something that Strapi can handle for you also. And there's a lot, but like I said, it depends on what benefits you think would make sense for you and like what you want to build. So that's my reason, at least, all the reasons a lot of people choose to use Strapi. Strapi have a pretty awesome community. The project's really community driven and it's open source so you always have Strapi. I'm not sure if it's any other question. Do you have plans to support Svelte? So yeah, we do support Svelte. In my resources, I linked to a blog post, a blog that I built with Svelte. For Sapa is sort of a framework to build web applications with Svelte. And I use GraphQL and Svelte. So like Apollo has a Svelte package also that lets you query GraphQL APIs and render the data in Svelte. And I built like a minimalist, I could show you if you want. I don't know if we have time for that. Sure, yeah. I think it's pretty cool. Well, I like it. If you like minimal designs and minimal websites, then this is probably for you. What is it called? Minimal, minimal, yeah, Sapa. Cool. Probably shouldn't go to the end point. But yeah, this is the site. So this is built at Sapa. Yeah. So about, and just got a couple of articles. Also like this site is in production. The articles portion is the one that has like the GraphQL. So it would take some time for my Hiroku instance to wake up and actually bring back my data. Cause like for demo purposes, I just use Hiroku because I don't use this site every day. Yeah, that's why articles didn't work. But yeah, this is built with Sapa, which is practically sold. So it works with Sapa. Yeah. That's awesome. Yeah, that's pretty cool. Any other questions from the rest? All right, I think right now if no one else has any questions, you guys can, if anything comes up, you can always ask Daniel at the end of the session. Yeah, so.