Jamstack + Headless CMS Sites Using Strapi (with Daniel Phiri) — Learn With Jason

hello everyone and welcome to another episode of learn with jason today on the show we've got daniel perry daniel thank you so much for being here how are you doing today i'm doing all right um first time i've had coffee in a while so i am very happy with this show you're raring again so i'm super excited to have you on i think this is gonna be a lot of fun we've had a chance to we were on some some podcasts and panels together um but i'm excited to to learn from you today so for folks who aren't familiar with your work do you want to give us a little bit of a background on yourself yeah oh i mean like back room you told me i'd have to do this and i was prepared but now it's like ah you put me on the spot ah gosh what do i do so i i do dev stuff here and there i like to build like city funky things that i almost never share um very rarely do um and then i got into developer relations because i liked um working with communities i started really enjoying working with developer tools and just like going really into how um the software industry works at least from the developer standpoints that was pretty nice and that's a lot of what i do i do demo at strappy now um and uh still build things here and there so nice oh and i think people tell me to not be too coy about this also i just started music production and i i i dj techno's also oh nice nice yeah that's that i mean i love that stuff i um i keep telling myself that someday i'm gonna get back to making music again and it's it just never it just never happens um someday i'll have spare time like who gets spare time how does that work i i you know i i've seen this joke made a few times but i've just thought for a long time that adulthood is just repeating the phrase things are going to calm down after this week until you die yeah it's like oh it gets better it's like it's like a mix of it gets better and it is what it is to be honest um so i'm just learning that also like i'm new to this whole adult thing um well cool so so uh today what we're gonna talk about is um we're gonna talk about headless cmss in general and strappy in specific um but so let's start with a little bit of like the high level right so headless cmss i think um a lot of folks who've seen the show are probably at least passingly familiar with the concept of a headless cms but we've got new people coming in every day so if if you are one of today's lucky ten thousand learning about a headless cms what is the the the concept what are you um kind of what's the benefit of using one i think i was wrong with the concept before i get into like the benefits uh oh what are these we're getting boo pooped nice okay um yeah like for the whole concept of headless cms i guess came from evolving tools we changed the way we build on the front end and so we had to sort of um improvise and adapt to the way we collect data and store data to like hit multiple platforms multiple um like you know devices and just make sure that that's more like a seamless and better developer experience and just in general a better experience and that's sort of like where the whole idea of headless came up with so it's it's like there's i mean headless means there's a head right there there was a head at some point um so the front end is usually what's used in this analogy as the head and then like headless is like okay it's front and agnostic in short meaning you know don't really rely on a specific front end to sort of display your content um and that's sort of where headless cms content management system comes from in the past you had like a content management system what you stored um served a specific platform right and like i said um we evolved um we got new tools got new toys to play with as developers and we sort of had to make things um work um and that's that's what it is it's like exposing your content management system your admin backend um to a bunch of different front-ends via an api and that's good yeah i you know the part that i get really excited about with it is this idea that you know um because i i come from an agency background back in the back in the day i ran an agency we did a lot of wordpress work and what i always struggled with was somebody would come in and they would say hey we've got a we've got a forum we've got a store we've got whatever and we want to put all these things together and i would end up like a lot of times you just you just suffered through like you were you're trying to shoehorn ecommerce data into wordpress or you're trying to make a blog work on magento or just something that the tool wasn't really built to do because the the front end of the site had to be tied to the the way that data was stored on the back end of the cms and the the thing that i got really excited about was when headless started to catch on we didn't have to do that anymore so i was able to say oh you've got a blog on wordpress and you're managing your page content but then you've got a store in shopify and you manage your products there and you've got a forum in you know whatever cool let's use the headless versions we can build you a custom website and we'll just pull that data in from the platform where it makes sense to keep that data and you get to use the best in class cms but i as a developer don't have to figure out how to fit together four different bespoke templating languages for four different cmss so that to me was was really exciting and it started to make me feel like okay we can start to treat the front end of the web as like a product and not an outgrowth of managing back ends i love the way you said that you know the front end is like a product um like yeah because that's exactly where it came from everything was like sort of fixed together and one man one managed backend meant a single front-end that's usually the web right um but now more platforms are becoming like really important i was using my smartwatch and headless cmss can send things there um i have my mobile phone which is practically an extension of me and i use it more than i use my laptop so you know there's all that that headless enables um and it's a pretty cool thing to have and one thing i like about it now is it's growing beyond that i think this is something that happens with technologies that its initial benefits it outgrows its initial benefits and it sort of starts to create its own um it's like oh someone's using it for this really weird obscure thing but it's also awesome um oh this is another really cool thing that it brings to the table um and now was sort of seeing it being integrated into like other systems that existed before and people are sort of asking themselves hey okay we got rid of like the whole idea of like the monolith cms which is what i like to call like pre-headless right um and we got rid of that but then we lost some of the efficiencies that came with having a system like that or the features that sort of got developed because of a system like that and headless is sort of right now i wouldn't say playing catch-up but innovating in its own right and building out new workflows for modern um teams which is cool yeah absolutely i think like i i just i like seeing that you know it it feels less like there's contention how you want to manage your content and how you want to build your website you you can make choices and and you don't have to like accept the downsides of the the front end management of one cms platform because you really like the the upsides of of the content management part and you know and and so actually that brings us to uh to what you're doing over at strappy right so strappy is uh i would say kind of a unique um a unique approach to headless cmss or or it's one of a kind of a unique class of headless cmss and edward in the chat is edward in the chat's work in overtime for you today he says strappy is the most flexible and extensible open source cms out there so what when when you talk about that you okay so open source in and of itself is very cool but when we talk about flexibility and extensibility what what is it that strappy is doing i guess okay let's start with what is strappy and then let's talk about what flexibility and extensibility mean yeah sure that's a good place to start so strappy like edward says is the most flexible and extensible um i'll get i'll get his copy but yeah it's basically that it's a headless cms node.js based open source and it's truly known for like its customization its flexibility and its extensibility um why this is is sort of to understand that you sort of have to go to like strap these roots like where did strappy come from um it has its background in like an api framework which could be a bit confusing for a lot of people because like now that we're sort of evolving as a cms people are like hey i should be able to do this with strappy but it's like okay um we've had to sort of like tighten some things in certain places and it's still pretty flexible um and i should probably talk about how it's flexible now uh so there's so many places i'm trying to figure out the best place to start to be honest i think one the fact that it's open source means its code is customizable we see a lot of people doing a lot of really interesting things um particularly with how we do apis and i'm sure once we get to demoing that um it will sort of make sense um you you sort of work through content modeling and then that's sort of how you build your endpoints you build your apis and then that's what's accessible and once you do that you sort of have this code which you can open up in like vs code and change a bunch of things you add like hooks you can um tweak uh what what do we call these we call them like controllers and you can build services and change how you interact um with your database and it's built on cora so it's got this really interesting request response flow um at which any point you can sort of tweak how data goes into like your database or how your client receives a response and that's super underrated i think that a lot of people use that and then even just going a step a step back and talking about databases we support a lot of sql databases which is really cool and being self-hosted means it's also super flex about where you deploy it i know that's not everyone's cup of tea but at the moment that's a lot something like a lot of people really like about about strappy and then even when you talk about like how you access your database sorry your api we've got like restful apis and graphql apis and something i like about graphql is like it's it's not super hard to get into like customizing your schema and building custom resolvers it's so fun and even like building uh like you know your own custom endpoints that are independent of your database schema it's just like um it's really cool and there's like a lot of really cool resources i see richard is in the chat he's saying bootstrap your apis on the user success team and uh yeah they've done a really great job with like resources for the community and um like making sure the documentation has all um holes plugged so i don't think i've done it justice but uh i don't i don't want to draw too much on that but it's super super customizable yeah i i mean i've i've done i've done a little bit with uh with strappy like we we've got a couple episodes in the archive of of doing different projects with strappy um but what i think is exciting about it just from from the outside looking in what what i find compelling about tools like strappy is that they are there's no magic box to them um one of the things that that strikes me a little bit with with certain tools is when you log in you're through a ui and you start like clicking buttons to make things happen and and then like you don't really know what's going on under the hood and then if you break something you're you're helpless right you just feel stuck and what i've found to be really powerful about tools like strappy is that when you're configuring strappy like you still get that really nice ui experience but it's configuring code under the hood so you can actually see what changed what's the schema what's what does my data actually connect like and i think that that's something that's strappy and like a few others out there like sanity is another one that does it really well where you get like code as the source of truth which as a developer that's what i want and i think that um for for developers out there looking for a really flexible cms being able to actually look at here's how your your cms is defined these are the way the fields are defined and how they relate to each other it just helps me reason and feel more confident that i've done something correctly um as opposed to just hoping that like i understood the way that this ui was put together in the way that these things are actually talking um so you know it's it's a it's a nice little power up that way but yeah so i i think you know we could probably sit here and and talk about it in the abstract all day but it's probably easier to show people so maybe we should switch over and do a little pair programming what do you think absolutely let's let's get into it let's do it all right here we go so what we'll do first and foremost is let's do a quick shout out we've got amanda here with us today writing down all the things we say doing live captioning she is from white coat captioning thank you so much amanda for being here and that's made possible through the support of our sponsors netlify fauna hasura and auth0 all of whom are kicking in to make this show more accessible to more people which means a lot to me i hope it means a lot to you make sure you go and check that out on the home page while you're checking out things on the homepage maybe go take a little peek at this store because i made a corgi duck it's a little rubber duck that looks like a corgi it's a party corgi you can talk to and uh it's gonna listen to your problems help you help you rub a duck of code and and it's probably gonna make you a better developer i assume make sure you go and check that out i need to sell a lot of them because i have so many please get these corgis out of here um while you're looking at things on the internet please go and check out daniel's twitter it is private so uh you can you can apply to follow daniel on twitter and uh he'll he'll do some filtering later on we are talking specifically about rigorous rigorous screening [Laughter] please uh with your twitter follow submit two forms of id and references [Laughter] oh thank you very much for the sub edward i appreciate that um and uh yeah we're gonna be talking about strappy today so drop the link in the chat for that um with that i think we can start writing some code so if i if i want to do this what's my what's my step zero what should i do first great um i would suggest going to docs and resources so click docs and resources docs and resources here we are in the nav bar yeah i just wanted to show off our resource center i think it's really pretty this is really nice i like i like it it's good looking thank you yeah um yeah so there is sort of like a good place to start and just like look at a bunch of really cool resources change log and all that stuff so i was just going into the developer documentation that's always where i start my project and we have the purple card for that purple card here we go yep all right so i pro i'm assuming i want to go to the quick start guide very correct all right that's good quick start guide um and so should we talk a little bit about what we're actually going to do today so uh so we're going to put together a site what's our site for what are we what are we what are we talking about today is this uh is this a blog is this a marketing site chat way and if you've got something that you've been trying to learn that uh that you wanna that you wanna see um danny you got any ideas of a good use case lots of wild ideas i don't know if the scope's right though um i would say a thought sort of app this is like you know the corgi rubber um duck like crm for our thoughts and cr okay all right yeah let's let's build a little uh yeah a dashboard like we'll build a crm dashboard for for corgi thoughts um all right so if we're gonna do that i want am i am i just going straight through on the gatsby blog or do we want uh a different different setup here oh no so at the top you see two tabs there where it says starter or hands-on just you scroll up yeah so starters will like give you pre-configured apps uh with a front-end and a back-end for different use cases we don't want that so we want to go hands-on okay so i'm in hands-on i'm gonna run this quick start exactly that command all right so i'm gonna call this one strappy corgi duck crm yeah i need to trademark that [Laughter] all right so it has created a folder for us it's installing dependencies now yeah so to do that for a bit um and then we already used the quick start flag um usually it would ask us what database we want to use and then you have to sort of go and set up or add the credentials for your different databases okay um yeah so we can just wait for the dependencies to install so what did we choose by using quickstart is it sqlite uh yeah we chose sqlite okay so that's like a nice temporary uh database on our local machine not much setup to be honest and it's it's a really nice way to get up and running really quick yeah sqlite is great for for local dev um it's a good way to get things just kind of proved out um it's a little it's a little trickier if we want to get this thing live so we probably won't deploy strappy today uh we can talk about how you would deploy strappy today though i think would be a good thing to cover um well let's see how far we get right if we've got plenty of time maybe we will just go ahead and deploy it yeah so that's actually something we see a lot you know once you get started with sqlite it's like okay how do we take this to like production we might want to use something like postgres and we have this really cool workflow where you can work locally with sqlite and then deploy and sort of use the same content models on like a postgres uh database in like hiroku or uh digitalocean or another platform so cool um yeah let's see how that goes okay so it uh it fired up the the dev server here and this popped open in uh my other browser so i just moved it over and so if i want to put in my information yeah all right and then we'll put in a a password really a really really secure password no one's ever gonna get that one that is really long come on okay fine um we're gonna do what oh boy we're playing this game huh oh yeah so uppercase letter and more than eight you hackers you you dirty hackers okay so i'm in i'll never remember that password now [Laughter] so we're we're in and i'm looking at this is what i assume is the like the strappy getting started dashboard experience i see a few things going on there's a create your first content there's some videos uh and i'm going to ignore all of it because you're going to help me today you are my onboarding wizard no worries that's exactly what i'm here for i need i need to get a couple of things like get you i need i need to send you like the onboarding wizard hat so that when we do this that would be epic that would be epic we need to do that okay so we are i think we're ready to roll here we've got um what should we do next we we want to get some data in here right yeah but first we have to create a content type which is like you know a content model and have like a logical representation of the data that we want um so yeah create a collection type um and what are we making again a crm right we're gonna make a corgi duck crm yeah so so this is what are we storing in the year i usually like to like have logical thoughts around this just so so maybe what we should do is uh so one of the best uses of a corgi duck right is to talk through your coding problems right so i can grab my grab my little corgi duck and i can say hey corgi duck my code doesn't work let me explain this to you so maybe what we can do is we can keep track of developers and their problems that they've explained to the the corgi duck and then we can decide whether or not those problems have been resolved that's that's what two two data types that should be okay right so i think problems and developers yes that is perfect all right so i'll start by doing developers um and let's do i need to do any of the advanced settings nope that's fine but we can look at them if you want to let's let's open them up let's poke uh so we have a draft published system nice so i can have a i can work on something and save it without necessarily taking it live um yeah content type and table name we don't care about that localization localization is very cool we don't have time to do that today so so we'll leave that off for now and i'm going to continue all right so let's see this this part is nice and intuitive so let's think about this a little bit um so for a title like somebody's name i'm gonna say that we do want that we want the developer's name and short text says names right there let's let's save that now i'm not done yet so i want to add another field and let's see what else what else do we need in here i don't know if we need too much more maybe we can uh maybe we can just add a name for now yeah you want to go with just a name all right so let me yeah we've got just the name got developers name and i save yes let's save all right uh-oh what don't you like oh yeah see that's the thing this happens every time i'm live i feel like it's a me problem so just like refresh your uh browser tab okay refreshing and it did the thing okay so we have our developers type now i'm going to create a new one and we'll have uh problems yes okay yeah and so this one let's just we'll say you can um this is um so that will give you an error because of the spacing oh so so just like problem yeah so it's like um maybe problem name i don't know is that too verbose we could call it problem description is that okay or is it no space is allowed for the name of the attribute okay so let's call it yeah no space problem description yes problem description okay and then i want to add another field because i want to connect these i want like each developer should be able to own many problems and maybe in a future version of this we would have like problems cross mapped if people have the same problem but i think for this one let's just say that each you know even if it's a duplicate developers can have multiple problems but problems can only have one developer does that seem reasonable yeah i love that we're on the same page which is exactly why i wanted to create the developer one first so just put like the relation collection type down there and we'll be able to do that really well um so before we do anything um we so we have this problems field um when we look at problems what do we want that field to be called um so we i think we can name that developer so that it attributes that to a developer and then on your right side is this right it's right for you also right okay yeah so i think okay we have developers that's right so let's we have to name this field now um but we sort of have to define the relationship first um and this follows like usual uml type relationships or database relationships so got it so with this one there is no cross reference like it would just be a problem has a developer but developers don't need to be aware of problems here belongs to one so they would cross-reference but each developer could only have one problem and we all know that's a lie um problem belongs to many developers while true single is not what we're looking for today a developer has many problems truer words have never been spoken we're just gonna go ahead and screenshot that one um yeah and so we could be a problem hasn't belongs to many um or a problem could be tied to to many developers but i think developer has many problems is is both philosophically and and practically what we're trying to accomplish today absolutely i couldn't agree more so i'm gonna finish that uh and then let's save it yep okay it's restarting there it goes and so now we've got a problem description and a developer but then if we go to developer we should see problem as well right yeah name there we are problems got 99 problems but my strappy schema ain't won uh okay not at all one of these days i'm gonna make a joke so bad that my guest just quits i doubt that i feel like i would i would give you like a south just for that um okay so so now we've got we've got developers we've got problems and so we can start creating some of these i think so let's i'm just going over to the left-hand side i can see my my things now so i'm going to go in and create a developer and first one's going to be me all right so and then so i saved this but it's a draft so if i actually wanted this to be live i need to publish it right exactly okay turn that off in the uh advanced settings like we saw earlier okay then let's add another one all right so now you and i both developers both in the system let's start adding problems so for my problems um [Music] yeah what problems do you have this is like developer therapy so there's there's one and then for my developer i'm going to choose me and let's save it all right and then i want to create another one for me and i'm going to say i have somebody so hard to choose um i can't get this silly thing to do the thing that's a thing that i've said many times so let's that'll be that'll be one of my problems and then uh let's let's add one for you so what's uh what's up what's a code problem that you want to tell to the duck um i want to tell the doc that most times my code only works on my machine that's a that's a good one all right so let's save that uh do you have any others or do you think this is good enough to start um i think i have one more i this is like so much to learn that's like a problem okay we'll publish that all right so now we've got two developers we've got four problems and if i go back into developers and look at one of these um we can see our problems here now this is something that i'd love to fix how what if i want that to display a little more um like human readably because this is showing me ids could i choose a different field to show you could um i know how to do this i know how to do this i swear i didn't uh go to uh your collections type builder oh exactly content types builder no no that's i think that's all right oh was i in the right thing yeah you're in the right thing because we either way it's configure the view configure the view um yeah and then there should be yes exactly so you know what it is so i use rich text which is going to break us here so [Music] i'm just going to ignore it because oh should we should we change it we can i i barely used any of the any of the setup so let's go into content types builder we'll go into problems and no not that one let's go to problems here and then i can just change this to be a can you i was going to like just create another one and then um delete that oh and that's okay we don't we don't need to worry about that we can uh yeah let that be um all right so now we've got developers we've got problems and i mean i feel like oh and we've got one more thing that we need to do which is we need to say whether or not uh telling the problem to the duck solved the problem so we need a we need to add a boolean field so let's get in here to our problems and let's add another field and i want a [Music] boolean yeah so we'll say solved and i want a default value of false and we want this to be required look at that okay so now we have whether or not the problem is solved and on these ones the problem is is uh definitely not solved yet right so these should all be set as as unsolved um oh but you know what i bet now if we go in here we could we can configure the view and say show me whether or not my oh no true and false also don't work that's okay that's all good um that went so fast like we've we've i mean in spanish done so much yeah like a solid 15 minutes of effort here we put together a new strappy instance we were able to go in and configure a relational database we were able to um you know modify our schema a little bit get some data entry done um and it's all done in a way that you know kind of makes sense to me so like if i if i click in here and i look at my problems i can see like hey here's a problem here's who owns it this is all pretty good and then i can oh wait we need to change that one from off on to like true false so let's edit the fields yeah okay i'm going in here can you i i don't think you can i feel like that's a strappy thing oh okay which which i have been very adamant about on and off is a bit confusing for a boolean value and i feel like i just need to open a pr and fix it yes eddie sims thank you for ordering a corgi duck i hope that it does solve all your problems i'm i'm very excited about that you know what i need to do i need a i need a web hook that will like show whenever a corgi duck is purchased so that we can have a little like celebration on the show whenever it happens oh yeah a million things to build in no time someday someday okay so now that we've got hopefully yeah please hopefully soon um but yeah so we've got we've got developers we've got problems and now we can start kind of interacting with this so so it feels like there's a few ways that we could go here um if i want to access this data to start well two things i'm going to want to manipulate it because i want to be able to click a button and change that solve status right um but also if i want to start showing my my dashboard maybe latest questions or something like that how do we start to like what's our next step if we want to do that so what we need to do now is sort of set permissions for what type of access that end users have to the api so like you mentioned you one want to make requests and see that data and read that data you want you want to make changes you want to create and you want to like update so what we need to do now is go to settings uh and tweak those end user permissions go into settings and bottom left and rules right yes so public um because i think this is a public site we don't need to authenticate i think so yeah we can show a feed of like the latest the latest questions yeah let's do that so yeah this is the public growth like generally anyone goes to like url slash that endpoint um these are the permissions that we're sort of giving it and and what i like to do here is um just click any box um under any of the collection types so let's say find and then you see on your right the route that's related to that plus the the type of request you'll be making wow okay so i want to [Music] find problems oh that's cool okay and then if we create problems they could post but we don't want somebody to do that um we could let them look up a single problem so problems id very important maybe find one developer and find all of their problems okay all right this is cool i'm into it and it looks like there's a bunch of other stuff we could do that we we probably don't have a lot of time to to get into today but this puts us in pretty solid shape here i think um if i make this a little bit bigger so the text doesn't wrap on me so if i save this then what i should be able to do then if i understand correctly is i should be able to go to oops i should be able to go to what just localhost 1337. oh wow okay so let's do that so i'm going to go to slash developers there we go and then i want to look up a single developer so let's look up daniel and now we've got my ids too yep daniel and then here's a list of problems right and these are the ones that are are linked specifically to daniel and then same thing for problems because we added that if i can spell it problems good and then let's set like one problem here and it shows us the problem shows us who the developer is we get you know my name uh whether or not it's solved although this one says no probably because we created that before we uh we did the the required field um but we can fix that really fast can it can i change all of them at once no that would have been cool though uh let's not just yet not solved so we're gonna save that one not solved and then say not solved here either and there we go cool all right and then this one actually we can say i need a place to share my problems and that one's going to go to me and this one is solved because we have a corgi duck yes so then if i get back out here and look at my and my problems we can see now it's solved false um i have way too many corgi ducks that one's not solved can't get it to work right um oh i think i forgot to actually publish that problem that one's drafted oh yeah still a draft there it is so i need a place to store my problems and this one is solved okay so there we go we made an api like that happened faster than i expected it i hear that a lot um but yeah that's something a lot of people really like about strappy like in terms of like building mvps really quick i like oh we got into like a planning meeting and then we just sort of like opened up strappy and started like putting a bunch of fields together and at the end of the meeting we sort of had this mvp already and we're like what yeah but i'm like yeah so so there's a question in chat about doing this with graphql it sounds like there's a plug-in so if we uh if we wanted to show that how would we like what's the process of of adding that right so we have a marketplace um under general on your left menu okay and here it is we could either oh that's new um yeah so we could either just press download and that would install the plugin or we could use the cli i like to use the click like i get to see doing everything like installing and rebuilding the admin and then yeah okay let's so let's do that one with this documentation thing because i'm also pretty curious about this uh because open api docs are really cool and very uh very powerful so let's see installing graphql still going it will take some time we have like a v4 coming out um and graphql will sort of be um default oh nice that's that's something a lot of people will enjoy um or not default really installed um by default you won't have to like oh i gotta hold it on your own yeah yeah so i mean what i but what i like about this is you know we we clicked a button but then we know what's happening because we can kind of see here that things are are being changed it's it's getting inserted into the package.json so we would actually be able to track that um it's uh it's pretty pretty slick to be able to do that so we will um my computer's about to take off i can feel it trying to escape it's trying to hover yeah i think because we used like the marketplace to install graphql we could use um the cli to install the documentation oh wait here we go restarted yep here we go or is it still loading here it is oh no there it is okay so now we have it's already installed so what what should i do we want to use this yeah uh you should go to localhost 1337 slash graphql and then we'll get like the graphql playground [Music] and we can start messing around with graphql operations oh beauty okay so let's write a query and we'll get developers and i'm using control space to auto complete here so let's get a name and problems and let's get the problem description look at that so beautiful i always marvel at graphql it's so so nice so fast um and then we can pull like whether or not it's solved yeah excellent so i mean this is great like this is it's so nice we clicked one button got it to work um so next i want to add this uh this documentation plugin but let's use the cli for that so do i need to stop the server to do that yes you do okay and then you i think you have to see you have to like get into that uh i call this scrappy something there we go all right yeah there we go um and now you should use what what are you using npm uh yes or yarn yeah so npm run strappy install documentation nice [Music] ooh i think someone uses hatsura and scrappy on the same database that's pretty cool that yeah that's a cool idea asura if you're not familiar with it is um got some we got some good episodes on this or you should check these out they're a lot of fun so here's one with uh with view here's one uh this is tonmai who's the one of the creators of surah and here's one with christian nwamba and all of these are super fun there's a lot of a lot of cool information in here um i'm a big fan of hasura i think it's great let's get this into the chat so y'all can play with it i'll make sure they show up in the show notes as well and while we're doing that we're rebuilding the admin ui i know there's no search input on the website i we built we built a whole thing uh in this episode where is it where uh here it is um surat taught me how to build this and it was amazing and i have it sitting on a branch but i have a compatibility problem where my my site is built on like all esm and the algolia stuff will work with esm but i there's some just fixes that need to be made and i have to do it and i just haven't someday i'm gonna have it but yeah look how cool look how cool this is like it would be amazing if i could make this work because we'd be able to go asura hey look at all these hasura things but i am definitely not there so uh yeah eventually this will be part of the site experience but we're we're not quite there yet in the meantime if you want to go search for stuff on learn with jason you can you can do it on that episode's demo um i mean like building that must have been so fun oh it was amazing and yeah she like sarah's a great teacher algolia is a great tool and it was surprisingly uh approachable like i i feel like you like auto complete in general but then search indexing and stuff like that is it's a lot yeah and the indexing part took like one click um it was uh it was amazing but uh okay so we've got documentation installed um and if i want to restart can you remind me what the command is a dev develop it is uh develop so npm run develop all right here we go yeah there we go getting back into it so we've got our site here and then if i want to look at the documentation where does one find such things so you should have your documentation under plugins so just like refresh your i don't think did you i thought i did let me see here it is documentation oh and now there's a now there's a thing okay so i just needed to refresh the page oh oh do we remember the password i remember [Laughter] okay um so this token i want to open the documentation and so this ui and this is all generated like open api swagger docs so if i click in here we can see all of the pieces so let's look at developers and now i can see what all of the query parameters are and we can like we can straight test all this can't we um i'm not in here but i mean we can put it in the browser tab and do it right i mean this is yeah so try it out i can just go in here and like just try one of these uh which i will put nothing in it and then i will execute and then you get a response that's got all of your things so like swagger is dope if you if you've never used it um the open api spec makes rest apis predictable in a way that you can kind of automatically generate documentation like this and and i love to see that that strappy's using that so that i don't have to write documentation i can just hand this over to my team and say yeah look if you want to know what a thing is i wouldn't have known that i needed to go and uh and go put all of these features in there because i didn't know that i generated them but strappy sure did and i can can document those properly so that uh so that my my code is useful to people um so this is incredible it does generate quite a lot yeah like you get a lot out of like your first few interactions with strappy and then you can add way more this is again speaking to the flexibility and customization yeah i mean it's like it's also very cool because we can see here as well that it's it's letting us choose like the dev staging and prod um so that if we once we have taken this live i could choose like oh i want to test this on my my local server and then switch it over and try it on the the staging server the prod server to make sure that like oh did i keep api compatibility et cetera et cetera those sorts of things are are really nice and making sure that we are providing a a nice clean experience for the rest of our team we're not jerking people around shipping surprises like that's um not having to do that manually is very nice like having a tool that lets you sort of make these checks part of the process is is pretty wonderful we had a session a couple weeks ago actually with uh meenakshi from postman and we talked a lot about the collaboration and versioning that this uh specific plugin enables and i thought it was pretty cool yeah i'll try and look for that and share it excellent yeah well okay so we've got um i mean we've got got ourselves an api we've got that api documented with swagger we've got a graphql version of that that's self-documenting i think the only thing that's left to do now is actually use this thing to build something huh let's do it anything else you want to show off in here or any other settings that we should mess with before we uh before we start um i think the provider system is pretty cool if you go to settings and on your authenticated route you can sort of register users in strappy and if you look at providers um yep right there under so we have all these providers that we can sort of add to like register users in strappy and then use that user information to access authenticated routes so if we want to make like a sas version of our rubber ducky crm you can set up something like you know github or zero github because it's developers right and then you know you authenticate with github uh strappy will store that user data in the database and then after authenticate you have access to other problems you can see what problems uh developers are solving and what problems um are not solved yeah i mean like this is this is super cool because it's uh like it's it's kind of nice to do this so i wonder chat what's more interesting to you do you want to see uh front end get built with the strappy data or do you want to see us um do a little bit more with the the strappy config itself like we could we could potentially attempt to go and configure github auth or we could get in here and look at uh configuring so that only certain users can change data like we could grant an admin role for actually submitting new users via api um just holler holler what you want to see because we can also build a front end and building a front end is always fun um yeah config sounds great any other takers do it all okay more config i think more config is probably you know we've got plenty of episodes of the show where we build things based on api so let's let's figure out how to config these apis um yeah where where do you want to start do you want to start with with like configuring a github auth or do you want to start with um controlling access to the apis i think let's start with controlling access to apis it gives a really good introduction to like the whole idea of like what you can access and what and what you can't and then builds up the use case for auth okay so let's uh let's see here we've got authenticated that seems like the one we probably would want to have extra permissions and for this one we'd want them to be able to do everything maybe they can't delete stuff like this is uh you can change data but you can't delete data right yeah yeah that seems like a good it seems like a good thing to do um anything else that we want to mess with in here um no there's the email provider i don't think we want to mess with anything so this is like tweaking like the internal stuff i think we can sort of like leave that so we don't break anything okay so now we've got a an authenticated user but we don't have any users yet so i would need to oh i do have a user look at me um yes that's so that's like that's an admin user so this is a a common a common thing that a lot of people have and it's something that we're trying to address because we understand it's super confusing so you have like people who use the admin which is like the back end and this is like this is this role is sort of like what access do you have um for operations in this admin panel that we're playing around with now but uh if we go under user and permissions plugin then we sort of have um the end user roles where it's like people who are making requests to our api what um what what permissions do they have that's sort of where we do that and so to manage end users we have a user's collection type at the top okay okay that's where we have to add uh images okay um and is does this have the same restrictions um [Music] i'll just use the same password so that i don't forget and will just mark me as confirmed and i'm not blocked let me write that one more time you see there you can have a role ah so i want to be an authenticated user okay so i'm gonna save all right i have a user now and if i actually how do how would i even test this what's the what's the path for for testing it so i use hopscotch or i don't know what's your preferred api testing service i have um open source api i've never tried this one so let's this one's my my current favorite let's try it [Laughter] let's uh let's do that so we have a special endpoint i think we have to go to settings and turn proxy off um let me just open up mine also and see how i did it last time oh no not here sorry in hopscotch oh in hopscotch yeah we go to settings and at the bottom there should be like a proxy yeah that should work let's proxy disabled okay no that's good let's not touch anything okay perfect so um go to go back to the home like that yes there we go and um change your method to a post request okay and then our url yeah it should be localhost 1337. [Music] then um we have a special ed point so i think let's like walk through the the authentication flow first of all yeah oh yeah so like what this looks like is um we're sending details using details the user you just made right you had a username you had a password so what we're doing is we're sending a post request to an endpoint with the username um and password as sort of like header data and then um if that's validated in the strategy api what we do is we get back a a json web token gotcha and then that's what we can use um to make like a normal get request with the jot as a header okay cool so let's um so do i hit like is it login is it auth what's the end point for this this user it's auth slash local local okay and then down here am i do a request body okay uh in json uh application json raw input rather yeah let's just use like raw input um and then like open up exactly and then we have like identifier um and that should be your password okay nobody nobody write down this password this is oh sorry sorry no that's wrong um it should be your email okay my bad yeah it's okay and then is it and then uh yeah then comma and then another and then this should be password and then that should be your password okay everybody's going to go hack everything i'm in yeah i know um and that's that's it we can send it yep let's end it okay and so here is our web token so if i go and can i just like copy that yeah let's copy that copied okay so then um and now we can sort of like open another tab if you want to keep track of this um someone wants you to paste it in there um open another type of hopscotch okay and for this one we're going to do like developer actually i'm going to go look at my my settings again so that i can actually see these things so i'm going to authenticate it and then i'm going to look at for a developer if i want to create one we do post to developers and then i can go look at my swagger docs to see what post to developers needs and it needs name and problems so we don't need to we can probably leave out almost all of that right i can just put in name yep um no actually i think because we have that relation um we might get an error if we leave that out but let's try it okay i haven't used um the rest api in a while all right let's see what happens if we if we send it in and then i need to send in a header and that header is going to be uh authorization right and then um is this one of those like like that yes okay so let's give this a shot and it says boom done dave you got problems [Laughter] and if we go in and look at our uh oh wait here we go developers there it is there's there's dave there we go there's dave um so i mean that's that's great now if i try this without the header so uncheck that it should work because i think you still have oh no we didn't give permission it shouldn't yeah um exactly let's try to open that up let's see what happens forbidden without the hacker or without the header it says nah get out of here um there we go perfect so it does it does what we want you need that bearer token or else you can't enter things into the database but we can if we switch over to a get request we can without the the header we can go and get a list of developers and problems all the developers and that's what we want like we're kind of thinking this is like uh yeah dave has no problems he's he's got the password now he's fun he's fine [Laughter] he made it dave um but yeah so okay so now we've got uh authentication here when we know that if we want to actually do this auth there's a flow for that so we would have somebody enter their username and password into a form we would submit that form to this endpoint and then that would send back a json web token that we could then use for making requests yes all right i'm feeling pretty good about that can we take this um what would be the easiest way to make an authentic authenticated request in a serverless function i think we could i mean if we stored that that json web token in a cookie we can just pull that right out of the cookie in the the web token or in the serverless function um it's submitted as a header submitted as whatever yeah i mean you would you need to be logged in i guess if you wanted to you could like also pass in the username and password but that's probably not a i don't know that's the way i would go about that um yeah you'd want to you'd want a login flow and then from your login flow you would uh you would send that that token with subsequent requests um okay so what if we want to take this step further and do github um go back in here and start looking good question um we would need to go to github um first let's look at what we need from github when we go to like providers see client id so the thing with providers is these usually work really well um with a how do i describe this so like you have like a front end right oh you're frozen this question broke daniel uh okay so we'll we'll wait for daniel to get back i think he's having connection issues and while we're waiting for that i'm going to uh oh he's gone gone um he'll join soon probably here he is he's coming back he's coming back my internet's been doing this for like the longest time today um yeah sorry about that it just keeps dropping me off no worries we got uh yeah we got some we got some we got some we got some jokes out of it you know uh okay so so you were saying that github the this auth works with a client-side app so do i need to set up a quick client-side app yeah so what i'll do is just like you know have like a client-side app with the most basic like implementation i've seen is like one button that says like you know login and then that takes us like the github url and then um yeah all of that so that sort of thing the flow we get okay so let's see how far we can get we've got about 20 minutes to do this so we're going to jump in here and say off front end i'll get init and we're going to create an index.html and let's just open this up and we'll make a a real quick index.html page um so we've got this i'm going to use the autocomplete are you going to do the thing there it is and now i can say log into strappy with github that's our goal all right take that yep copy it right down here and we're gonna have a button and that button says log in with github all right so this is the the very basics of what we've got here and if i just run like nullified dev we should get a local server that'll let us do that and then as we add serverless functions that will come on there you go so here's our here's our site currently doesn't do anything we click that button nothing happens um yes so to wire this up what do i need to do right so we need to create an app in github um so yeah you might have to show us your api secrets um let's just do that later i will pull the secrets off screen but this will let us get in so we're going to go to i think it's developer settings we need to create is it a github app or an oauth app do you remember um i think it's a for this particular one i'm not too sure actually it should be a github yeah okay let's do an o um okay so we're gonna call this one strappy auth um this one's gonna be at localhost 8888 and the authorization callback url is the one that they were showing us in here yep there so let's drop that oh um that's the thing uh we're currently local i think we have to use something like ng-rock um oh well let me just deploy it then yeah okay uh so well i mean like um this is the strappy app because we'll make calls to all right i think i've got my um my stuff in a bunch here oh i see what you're saying we need we need the um the strappy app to be publicly accessible so we might have to expose um the port 1337 okay using something like um what do people use i use an energy rock what's the there's one that i saw online that was really nice um what is this specific tool called like does anybody remember what the one is that lets you do a tunnel online like do i could i hack it with netlify dev maybe um i'm not probably not gonna try to do that right now uh online something like it like i know 1002.dev i think i i just did like a quick search tunnel dot dab expose your local web server to the internet um featured on product hunt okay let's see can i installing [Applause] and i swear there was one that you could just like drop in the the name of it and you didn't have to do anything but let's see install let's no let's just do it all right this is gonna be fun let's see how long this takes we we may find ourselves uh out of time on this because we are we're at the 15 minute mark here um oh no well someone said something in the chat npx um oh i had no idea ngrok had nvx like an executable thing on npx okay so that is actually that installed way faster than i expected so let's try this um and we will do tunnel 2 1337 and we're gonna call this doc server denied the oh i need an api key oh here we go this is like oh no it's like email that's a lot now it's all gonna be fine we're gonna make this thing work uh let me get over here tunnel two all right i'm i'm getting over here add a payment method oh no yeah that's exactly what i was scared of wait i thought it would just um yeah what if i what if i just don't use a subdomain and i just want it to be like dang okay well that one's not gonna work all right so we might not be able to do this because we don't have time to to deploy this and i don't want to spend the rest of the time trying to dive in and debug local tunneling since i didn't do any like ahead work to figure out what a good way to do that would be um [Music] but let's uh if you're installing anyway why not use end rock that's a good point all right we'll try one more let's try let's try ngrok one more time so um why do i have to sign in though netify dev public set support to the strappy api i don't think that's gonna work but i can try it um and then what port [Music] 1337. what's that so that's the netlify dev server um but what is the did it do uh oh wait that's the wrong one so uh crap what's the command it is nullified dev help what am i looking for target port oh i do know about this this looks cool no command specified come on can i just have it no op no i want you to oh come on see this is this is what i was worried about it like it'll work but we've just broken framework detection and so it starts it starts trying to figure things out and doesn't realize that we're just trying to like force break it i set the framework option to listen to me framework framework framework there is no framework option in here of course which means that we would need yeah this is gonna like we could get there we absolutely could get there i'm probably not going to do it in the next five minutes and that would mean that we'd have no time to actually do this once we got it running so i think we're going to let this one go um so instead no worries why don't we uh i mean that's but this honestly is a is a good like take a note for the future because this could be a great thing to dig into later how do you do local development right like you know there might be a follow-up episode on this maybe there's a tutorial that could be done but um getting that local dev environment set up with a good tunneling solution for the back end because the the nice thing that we get with like if we have um this site built up which i don't have i don't want to like create a site to do it but if we jump into one like the one we did uh what's one of these it's fresh do the autocomplete one i think um where's that auto complete one one of these is fresh like what did i do yesterday there has to be completely lost was um javascript autocomplete the real-time one so with this one because of the way that it's set up if i run nullified deaf public it will open the local host but then it'll also show us a wait where did it go listening dev server use host to expose [Music] why so this this always works until i'm trying to figure out how to show it off and then i i'd like don't use this enough to remember what the pieces are um it's nellify dev live creating a live tunnel that was what it was it's not public it's live but so check this out so now we have uh a live version of the local instance running so that we can do checks like that so it's it's pretty slick like it's uh it's it's very nice to use on the front end it'd be if i had something like ngrok actually installed and configured we could do it for the back end but we're not there today and uh chances are we're not gonna get there within the next few minutes so instead of that why don't we do this for somebody who's trying to kind of take next steps from here um and let's recap right what we were able to do today is we jumped in we were able to set up uh the schema for developers and problems right we got these configured got the relationship set up between our developers and our problems and then we were able to do data entry really quickly and we can see here the the relationships that happen uh where we're able to add our problems and on the problem side we can see who our developers are um and then we were able to do permissions so we can go into the roles we've got our public yes and we can see that if you're not logged in you can only look up you can't uh you can't create you can't update you can't delete but if you are authenticated an authenticated user can do everything except delete and only the super admin which is uh me who is logged in right now can actually delete things so that would be a way to kind of lock down permissions incrementally where you don't let destructive actions happen in case somebody loses their their database key or something like that um we were able to do all of that in a way that exposes swagger documentation so we've got the whole rest api through swagger docs we've got the whole thing available through a graphql api and we've got it all available through [Music] straight up rest api right so we can get all that data we were able to do that whole thing in 30-ish minutes um so that's that's pretty slick like how quickly we were able to do that so for somebody who wants to take next steps and they want to go further with this where where would you recommend they go well it depends um i see someone shared a link to the deployment guide of course you'd want to deploy strappy somewhere and we've got some pretty explicit guides and how to do that um i would suggest going to our documentation it's um yeah exactly this this side the site that's on your screen it's it's got a lot of really cool resources for setting up and like extending strappy or like using more advanced functionality i'd also send you over to our youtube i've got some really cool videos on a bunch of different topics um and our blog has got some amazing content too so alrighty so there's uh there's the youtube and then the strappy blog is gonna be over here i think yep uh where am i looking for this on your left it's in the resource center oh there on the left tab yep so here if you want to check out the blog lots of information in there as well all righty yeah so that is uh i mean just a ton of information a lot of flexibility here and all of this is open source as well so if we go and look at open source we can also see you know this is here's all the stuff you can go and you can go poke at it see how it works under the hood if you saw anything that you wanted to change like that uh that boolean flag that that daniel and i were talking about you can go open a pr for that right now um and that i think is really like that's pretty powerful stuff i think that's really cool yeah it's just a really cool um we've got this big v4 release coming out so if you want to like keep track of that also you can have a look um at the commits on like the the branch different branches on the main strappy repo um we actually had to release today oh nice um so yeah so here's yeah here's v4 yeah if you have a good look of that actually you can go to strappy.ios v4 there you go it looks like that's been dropped in the chat but i'll drop it again just for posterity um it looks like there's a waiting list there's rfcs that explain what's happening um here's some some general overview love a good teaser and oh video yeah this looks great i like it um the video is really cool well cool yeah this is exciting and so so this is is this like later this year or what's the what's the plan for nice very very exciting stuff like we have at alpha but don't tell anyone that's out somewhere um which and which is like just testing that um and we have a beta coming out sometime early in september but we should be stable in um the solutions engineer from my team derek is there because i just played everywhere and end of september yeah yeah so like early october we should have like the first stable um yeah end of september so like early october um this should be out and it's gonna change so much um i mean like a lot of what we've done was like really cool but we're sort of like tightening up a lot of the things around how we do certain things lots of performance improvements a huge visual overall um making everything a lot more intuitive um making things a a bit more accessible at least you know getting getting there in terms of accessibility also uh there is so much i'm actually pretty excited for this yeah now that's that's excellent well cool so let's uh i think let's call that a great stopping point so if you're interested in strappy go hit all of these things uh lots of resources they'll all be in the show notes and make sure uh go buy one of these corgi toys just so that i don't have quite so many of them around tell it all your problems uh and and that i think is as good a place as any to send a little shout out to amanda from wyco captioning who has been giving us live captions all day thank you so much for sticking around uh and that's made possible through the support of our sponsors netlafy fauna hasura and off zero all of whom are kicking into show to make the show more accessible make sure you go and check out the schedule we've got a lot of fun stuff tomorrow we are going to have morial on we're going to be talking about right to left support then we're going to have a motto is talking about automation with node clies we've got pachi coming on to talk about html and css we've got otto coming back we've got andrew sprouse like look at this list we've got so much amazing stuff coming on the show over the net the rest of this year what's going on where's tim we're missing tim um but i'm like just completely thrilled with with all the amazing things that are coming on the show uh so make sure you go and take a look at the schedule and uh and definitely definitely click this add-on google calendar button so that you can see when the new episodes are coming it's just going to put it on your google calendar it's not there's no notifications or anything it's just for you to to never miss an episode because i want to hang out with you and i hope you want to hang out with me daniel is there anywhere uh any any parting words for everybody before we call this one done um just because this is at the top of my head i saw you have battle snake with joe nash and i am not missing that because i don't understand what that is but i really want to understand i also have no idea what battle snake is and i'm really excited to find out on that episode i'm i'm intentionally doing no research ahead of time uh to the to the best of my understanding it's a kind of you know that phone game snake from like the old nokias it's it's a developer-centric version of that game and i have no idea how it works i don't know how to program games so this might be an embarrassingly short episode where we're just like well i'm too far out of my depth but we'll find out so i'm super excited yeah definitely i mean there's there's a lot of really fun stuff coming in here that i'm i'm super excited about so mark your calendars come hang out it's gonna be a great time we'll see you over on twitch make sure you hit that follow button and all those good things uh go go follow daniel on twitter as well um and hope that he lets you through the lets you through that that gate um yeah i know i i definitely will um but yeah thanks so much you've been uh i don't know if i'm a great teacher or you're an amazing learner i mean the show is learning jason so i think i think you're an amazing learner so it's been my one now now this has been super fun chat thank you all so much for hanging out today make sure you stick around we're going to go find somebody to raid and we will see you next time yep you

Channel: Learn With Jason

Views: 1,821

Rating: 5 out of 5

Keywords: Daniel Phiri, Jamstack, Strapi, Learn with Jason, Headless CMS

Id: EKuGHCBkXBU

Length: 87min 8sec (5228 seconds)

Published: Thu Aug 05 2021