Strapi.js Crash Course | Headless CMS

[Music] hey what's going on guys in this video we're gonna take a look at strappy which is an open-source headless content management system and strappy makes it incredibly easy to create REST API s with JSON web tokens authentication you can create relationships between your content types and you get this great admin area similar to what you would have on like WordPress except you're not bound to any specific front-end you can use whatever front-end you want if you want to build it with react or view or whatever because all it does is serves JSON data so we're gonna take a look at it we're going to create a REST API with products and categories and also implement users and authentication and I'm just gonna show you around the admin area a little bit and then we'll also jump in the code and I'll show you how you can override and customize things as well so this is the website here strapping io and if you go to get started you'll see the little tutorials and documentation which is pretty good and we want to create a new project so you can install strappy globally with yarn or NPM but we can also use NP X and just run this create strappy app similar to like create react app now in terms of data in database you can use MongoDB you can use postgrads MySQL if you use the quick start option it's gonna set you up with SQL Lite and that's what I'm gonna do just so I don't have to go set up a database but you can easily implement MongoDB or something else and I'll show you where you can add those credentials as well if you do decide to use you know one of those databases so we're gonna go ahead and jump into vs code and I just have an empty folder here and I'm gonna run npx create strappy app and then we would put a folder where we want this to go I want it to go in this folder so I'll just put a dot and then dash dash Quick Start and that should just set everything up for us and as soon as this is done it should open up a new window where it asks us to create an admin user for our admin area all right so it opens this page up here on localhost port one three three seven by default and then admin off register so here we just need to create a username a password and an email and then we can say ready to start and it should take us right to our admin area and this is it's very clean it's not you know it's not as cluttered as something like WordPress it just gives us the stuff we need and there's actually a concept of plugins which I'll get into in a second but there's these collection types and you can see we already have users so we already have the functionality to create users which I will do in a little bit but I want to create some new content types so under plugins you'll see there's this content types builder if we click on that you'll see that there's collection types so user is one of them and then we have the fields for the users so user name email provider because we can use different authentication providers like github and Google and Twitter and then we can also have obviously you know authentication or login from our database which is what we're going to do and you can have password reset password token confirmed so all the stuff comes right out of the box we have roles so we have this role collection type permissions what I want to do is create a new collection type called product and you want to keep it singular because strappy will actually use the plural version when you when it creates the endpoints so we'll say product and continue and now we can start to select what fields we want so it's a product so I'm going to have a text field so I'm going to choose text right here and make this the title so we can do short text along text and if we go to advanced you can have a default value regular expression pattern and then under settings I'm gonna choose required and unique for the title and I'll click add another field and you can see all the different types we have here we have number date boolean email relationships media all types of stuff so I'm going to choose text again and this is gonna be the description and I'm going to choose long text for this and then add another field and then I'll choose number and this is going to be the price field and you can choose the type of number I'm going to choose decimal add another field another number and the last one is going to be quantity and we'll choose an integer for that okay so we'll just click finish and now it's going to give us a summary of all the fields that we want to create and then we just click Save and it will create our product type okay so you can see it here you can see it over here and it's actually plural now over here products now before we add any data I just want to create another collection type called category so say category continue I'm gonna choose text and we're gonna have a name for our category we'll go ahead and say that this is gonna be required and unique I'll click add another field and the only other field I want is a relation to my product category type I'm sorry collection type so we'll click relation so we want to relate category and then we can choose a collection that we want to relate it to which is going to be product and there's different types of relationships so if you want to have like one category per product or whatever you can do that I'm gonna choose many to many so it says categories has and belongs to many products because I want to be able to choose multiple categories for our products so we'll click finish so now we have our name and products relationship and we'll click Save and now we have a categories collection type so let's go over here to categories and this is where we can actually add our data so just like you would in something like WordPress where you would create posts or whatever the the content type is so let's say add new category we'll call this will say mobile phones so let's just pretend this is these are products for like a Verizon store or something so we'll click Save add another category let's say tablets and of course you can use whatever data you want here and then we'll create one more called laptops so we have our categories now let's go over to products and let's say we want to add a new product so I'm gonna put an iPhone say iPhone 11 and I have a description I'm just gonna throw in you can obviously just put anything in here for the price we'll say six $99.99 and then quantity we'll say we have a hundred in stock and then under categories we can see the three categories we just created I'm gonna choose mobile phones and save okay let's add another product let's do I'll say Samsung Galaxy S ten and I'm gonna throw a description in there and price will say five $49.99 quantity you'll say we have I don't know seventy and that's also mobile phones and then we'll create one more product which will be an iPad and grab a description price we'll say three $29.99 and we'll say we have fifty of them and we want to choose tablets for that category and you can choose multiple categories because of the way we set the relation up alright so now we have some data so what I'm gonna do now is open up postman so if you're not familiar with postman it just it's just an HTTP client allows us to make get requests post requests and all that just like your front-end would you would do this from react or whatever you're using on the front-end so I'm going to create a new tab and make a get request to HTTP localhost and we want port 1 3 3 7 slash products ok plural now by default it's going to give us a status of 403 which means forbidden it means that we don't have access to to this resource now that everything you create is always going to be forbidden at first it's going to be basically set to private so we have to mess with the permissions so let's jump back in and let's go down to under plugins you'll see this roles and permissions so there's two default roles authenticated in public which are pretty self-explanatory but you can create new new roles if you want however I'm going to go into public and you'll see under permissions we have our product and category collection and we can choose what we want to be public so I'm gonna choose count so we can just count our products find which means basically list all the products and then find one which is just finding a single product and we'll do the same for category but we don't want create delete or update we want that we want the that to be private for authenticated users so let's go ahead and click Save and then let's go back to postman and try to make this request again and you'll see now we're able to fetch all of the products and we have an ID that's created automatically it's auto increment we have all of our fields we have this created and updated at field that gets added automatically and then a categories array and it's an array because we can have multiple categories ok and we can also check out a single product so if we say slash one that'll just give us you know the ID of one now we can also add on query parameter so if we put a question mark we can do like underscore limits let's set a limit to two and then let's do ampersand and sorts and we'll set that to I'm sorry its underscore sort and we'll set that to title so if we run that you'll see that we only get two back and they're sorted by title so by default right out of the box you have stuff like this and you can look in the documentation for other query parameters as well and of course we can check out categories so if we do like category slash one it gives us just the products in that specific category so pretty cool and and I mean this would take quite a bit of code just just to create a REST API like this now I want to open up a new tab here and I'm gonna try to add a new product because remember this is a REST API so we can just make a post requests to create a new product so I'm gonna grab say posts to slash products and we're gonna go into body and choose raw Jason and let's go ahead I'll meet make this bigger so we'll add a product we know we have a title title I'll just say test product and let's say for the what else do we have description I'll just say this is a test product and then we have price so for price I'll say ninety nine ninety nine and for what else do we have the quantity say we have a hundred alright so I imagine that some of you guys know what's gonna happen when I try this we're gonna get 403 back because we didn't set a permission for this for to make a post request because when we make a post request it's running the create method so let's go back into our admin area here and we're gonna need a user so if we go to users could say add new user will just call this user Sam and email will just say Sam at gmail.com password will do one through six and we want to confirm the user because you can actually have a flag for confirmed if you want to have like an email confirmation or whatever there's also a blocked option as well and then for role we can choose one of our two roles I'm going to choose authenticated so that they can access things like create now just doing that is it's still not going to work because we actually have to go to our roles and permissions and under authenticated we want to go down and I'm gonna choose select all for both product and categories so we can do all of this stuff as an authenticated user so we'll save that and now we should be all set now in order to basically log in because I mean if I send this again we still get 403 because the way this works is we use a JSON web token so we have to open another tab and make a post request to let's say 1 3 3 7 slash off and then slash local okay because we're using a local strategy we're not using something like github or Twitter or something to log in we're using local database fields so under body we want to send raw JSON and what we want to send is a object with an identifier and this identifier can be either the the username or the email I'll just put in Sam which is our username and then the password and I'm gonna put in the password that's wrong first I'll do 1 through 7 and we get back a 400 bad request and you can see we have an array of messages and one of those is identifier or password isn't valid okay so I mean you can format that you can use this in your front-end to display this and an alert or you can actually edit the code if you want to change error messages and stuff like that but let's go ahead and login with the correct credentials and what we get back is an object with a JSON web token and then also some user data so I'm gonna grab the JSON web token and obviously you would do this in your application you would probably save this to cookies or local storage or whatever and then you would send it along when you want to make a request to a protected route such as this products this create products so what we need to do is just in postman we can set the authorization bear our token I already have something in here I'm gonna get rid of that and paste that new token in and now if I send we get a 200 response back and it just gives us our object okay so it gives us the product we created now if we go back to make a get request to slash products we should see right here we see our new test product and if we go back to our admin area to products we should see it here as well and we can even edit it we can add a category to it put this in laptops we can change some fields here if we want you can save it okay so I mean everything we're doing in postman obviously you would do that through your front-end whatever that might be so there's a there's a ton of functionality just right out of the box there's even a media library so for you know images and video and stuff like that there's a marketplace with other plugins you can implement graph QL so lots of capabilities here right out of the box now what I'd like to do next is just kind of look at the code a little bit so if we jump into vs code I mean we've basically created this API with authentication and sorting and all that without writing one line of code so if we go over here we have some just basic config and stuff like that if we take a look at the package Jason we have strappy along with a bunch of strappy plugins and utilities now if you stop the server and you want to run it again you can run NPM run strappy develop and that will run your development server and then you can build build it out with strappy build you have your public folder here which just has an uploads folder in it for any images or anything like that and you can put your front-end application in there and then as far as the database goes if we go to config you have this environments folder with three different environments development production and staging and you can set different variables and different databases for different environments so for instance my development environment if I look at database Jason you can see I'm using SQL Lite so that's where all my date is getting saved right now now under production if you go to database Jason you have some other fields like host port username database so if you were to use something like MongoDB you would change this client here and you would put in your credentials and now all that stuff is in the documentation but this is where you would set your database and you can even have a staging environment as well so that's the config the I would say the most important folder here is the API folder because this is everything that we just did you can see we have category and product and in each of these folders we have a config folder with routes so you can see all of our routes so get request to products this will run product dot find as a hand as a handler okay so it'll call a controller method find which then calls the service find which I'll show you in a second and it will fetch the data as you saw so we just have all of our routes here if we go to controllers you can see it's completely empty here but you can basically override certain methods and there's even a link here you can follow to customize your controllers but just to give you a quick example if we want to override our find method we could do a sync find I don't know why does this we say async fine and this takes in a context and then let's say we want to get our products so we'll say Const products and then let's await because this returns a promise strappy dot services dot and then product because that's the name of our content type that we want to fetch and then dot find and then you pass in the contacts dot query so that should get us our products and then we can map through those so let's say return we'll say return products dot map and we want to say for each product let's just say that we wanted to return just the title so we could say we don't even need this we'll just say and the product title alright and I'll do a console law just so you can see that this is running we'll just say 1 2 3 so if I go ahead and save this and I make a get request to products that's the that's gonna call find so if I send you'll see now we're only getting back the title of each product because I overrode the product controller and you'll see a console log 1 2 3 down here so it's pretty easy to override these methods now I'm gonna just get rid of this because I don't want to keep that but I just wanted to show you now you saw I called strappy dot services dot products dot fine you can even over overwrite services so if we go down here let's say and there's a link right here that you can follow if you want to look more into this but let's say find and this takes in params and populate and let's just say console.log and I just want to show you that this the service gets called so we'll say service called and then I still want to return and we use strappy dots query oops and then we put in here the collection we want so say product I think it's a singular product and then we can say dot find and then pass in params and populate so that should still give us the same response but you should see this lock down here just to show you that it's getting over oh so I'm gonna just send so we get our initial response back and then if we look down and our console we get service called so you can manipulate it however you want both the controller and the service that's called so I'm just gonna clear that out and then the last thing I want to show you here is the model now in models you have two files one is going to be this settings dot Jason which is basically like our schema so under attributes we have you have some options like increments and timestamps but under attributes we have all of our files this is similar to what you would see in a mongoose model if you were using Mongoose we have the title which is the type of string required unique description price quantity categories so you can you know you can customize this if you want this is basically like the schema and then product J s this is really cool there's a bunch of lifecycle methods where you can do certain things at certain times so we have after save we've before save and after save if you want to run some kind of functionality when you save a product or you know before you save or after you save for instance in my node API course we had it so when you put in an address just one line of address and save we had some middleware that would then store that in different fields like street and city and so on so you could do that right in here very easily we have before fetch after fetch we have and that's just for one item fetch all is gonna be if you you know we fetch everything so I'll give you an example just go ahead and uncomment that so this is going to run after we fetch our data so I'll just do a console log and just day after fetch and we can access the model the response we can access just about anything we want so let's say console.log and let's take let's say response we'll just log the response so fetch all is gonna run if I go ahead and send this request so I just fetch all now if I go back down here you're gonna see the response that I logged which is just all the data so if you wanted to to do something with this data you could and you can see it's logging after fetch so I don't really have an example of what I something that I would want to do here but you can see that you can hook into any of these the any of these lifecycle methods so it's really easy to do I'm just gonna uncomment I'm comment that back up so I mean that's the these are the most important files that you're going to be working with as far as any customization but yeah so I think that I mean that's a good overview of strappy obviously there's more to it you want to check out the documentation but I know sometimes they make videos on technologies and then they're never heard from again by me but this is definitely something I'll be using in the future I'll probably be using in courses because I tend to feel like I'm repeating myself when I have to keep creating a just a REST API with node and Express so this will make things a lot easier but that's it guys thanks for watching and plan on having some more content in the future using strappy maybe we'll create a full stack app with you know view or react on the front-end but that's it thanks for watching and I'll see you next time

Channel: Traversy Media

Views: 233,432

Rating: 4.9694929 out of 5

Keywords: Strapi, strapi js, rest api, api

Id: 6FnwAbd2SDY

Length: 25min 5sec (1505 seconds)

Published: Wed Apr 29 2020