Build a Fullstack App With Strapi and Next.js | 1-Hour Tech Talk | DigitalOcean

hello everybody welcome welcome and uh good morning well i can't say good morning i am out of las vegas nevada where it's morning for me it doesn't look like it's morning for a lot of you we got india colombia poland welcome everybody eric maleth olivier welcome everybody oh i always have like nerves when i start these and then i come in here and the chat blows up and you all say hello and all those nerves kind of disappear you know welcome everybody ecuador good afternoon oliver hey joshua from england switzerland israel brazil south africa i love it so much welcome everybody this is going to be a really really fun tech talk i love this stack and i am going to use this stack for a lot of my next projects nigeria welcome columbia venezuela i love you all welcome right on oh so much fun all right so let's get this started everyone keep going in the chat i'm reading it i'm gonna say hi periodically but let's get started so here at digitalocean my name is chris sev i am a developer advocate at digitalocean and i really like building full stack apps so if you've been following my previous tech talks we've been doing a lot of back-end stuff with strappy a lot of back-end stuff with laravel and now we're doing front-end stuff with next js react all that good stuff and this is the first tech talk where we're taking both sides and going and merging them together dubai argentina welcome i love it ivan from mexico so here we have strappy which is a back-end that can build apis for us quickly um and their name actually comes from bootstrap api so strappy is its name and i absolutely love how they got their name and then on the front end side of things we're going to use next.js which is a react framework which helps us build out really fast dynamic applications quickly so we're going to take these two mash them together we're going to build an api today and we're going to build the front end that pulls from that api today so you can see that connection between back and front end and see how a full stack app is made panchak from nigeria i know from ghana welcome fabian from columbia i love it so here we have a site that i built maybe seven eight years ago now scotch.io and what we did was we built a blog and we grew it up to about four million page views monthly and the cool thing about this is we did this all on laravel and it's on a digitalocean droplet and i get asked a lot lately is how would i build scotch.io pretty big size blog in today's jam stack type world i would build it with strappy and next js i think that is a fantastic stack for building out a current size blog and the cool thing about these two is that they're going to be really really highly scalable because nextgs can serve static sites strappy can handle the api on the back end side and then digitalocean can host the strappy api using the new app platform cool so let's get started right i want to just jump right into the code we're going to go here and what i have is i have two new folders blog next and blog strappy so we're going to build out a quick blog and what we're going to do is we're going to connect those two and maybe we're going to add some dynamic components to it like reactions like you see on dev 2 like liking um they have that unicorn icon that i'm not totally sure what it does but let's get started so here i'm going to start a strappy api and let's do this let's create an api in about five minutes hey craig welcome we are just getting started so you haven't missed too much we're all just saying hey and where we're from ashish from india welcome welcome everybody so let's go npx create strappy app and i'm going to put that in this blog strappy project and i'm going to use quick start which is the way that we can use sqlite for our apps all right so as that's going through let me read through the chat samuel from nigeria mihai from london welcome everybody fernando peru awesome shivam says please start from scratch we are starting from scratch you can see right here we are starting a brand new strappy app and i used npx create strappy app right here manual from france golly everybody all over the place javier thanks for saying that cool so as this is loading let's talk a little bit about our kind of format here let me load up my vs code and i know i'm going to get questions on it so let's start with the obligatory my theme is monica dot pro and my font is i believe cascadia code right now and cascadia code is free monica pro is i think a free trial so that's uh starting there if you want to check those two out right on welcome james welcome and get pack indonesia awesome so what we're gonna do is our strappy app just got started so it opened it up in chrome so i'm going to let this wait out real quick and i'm going to go back here and let's talk about our setup so if we were to build a blog a full stack app in today's jam stack type world this is our setup so we're going to need a backend api and that's going to be from strappy and we're going to need a front end and type today which is going to be next.js let's keep it consistent let's go next js we're going to have our back end api with strappy so the backend api we're going to have two different types we're going to have posts and let's add in reactions so you can do like f2 does where you can like a post the cool thing about strappy is you can add in comments um any sorts of other things that you need really quickly so the front end this is our backing we're gonna have posts and we're gonna have reactions for each of those posts and then here we're gonna have a front end and on the front end we're going to say on the front end we're going to say we have an index page so we're going to have a home page show all posts thoughts and we're gonna have a single post page show a single post and that's how we're gonna run it so this right here may seem a little simple but this can be the back end for starting any type of app going forward so a lot of the stuff you're going to see today is going to be necessary for a lot of the apps you're going to want to build soon uh craig you with a question how does strappy store its data strappy can pick a different database so in the documents right now locally we're using uh sqlite you can pick mongodb you can pick postgres you can pick mysql and that can all be done through the settings okay so here's our strappy app let me show you how quick we can build an api that we just talked about let's go here my name is chris last name sev c can anyone pronounce my last name and here password i'm going to type something in but this is local so we're all good there and i'm going to click let's start cool first himmy hello hey aaron from nigeria welcome so what we're going to do is this is the strappy dashboard that you're going to see when you start a strappy application let's build out that first content type called posts so check out how fast it is to build out our database and our content types so i'm going to say display name post all right easy enough i'm going to go continue we're going to have text rich text and this is why i love strappy is because of its kind of graphical builder for your apis you can build out your models by clicking through the dashboard and i absolutely love laravel still but you have to do the migrations you have to create the models you have to do all that stuff to do what this is doing honestly i'd love like a graphical interface on top of laravel that'd be nice so let's click text i want a title we're gonna go for short text for this one and i'll add another field kushali can this be used with react yes it definitely can the cool thing about strappy is it just gives you an api and says here's an api that's all i want to do so you pick your front end and in this tech talk we're picking next yes you could have picked view next um angular whatever you need on the front end so let's click text i want to add a slug in here we're going to go short text i'm going to add rich text in here for content and let's finish that out so we have title slug and content i think that's okay for now yeah i think that's okay for now let's see let's save that not sure what those are but let's double check and see if it worked cool so we have our post type title slug content and then over here now we created the post and now we can go add a new post i'm going to go title my or let's say hello everyone in chat and you can have this auto generate right now i'm just filling it in for kind of time purposes hello everyone in chat you are all awesome and my favorite people okay so now i have a new post i'm going to hit save right here and i'm getting a few questions in chat uh can we have access to the stream for later reference absolutely yes all of this will be um hosted on the digitalocean youtube channel check out invoker by marcel ooh awesome i love everything coming out of uh marcel on that team thanks for that doug i'll check that out um cool so now we've saved it let's publish it and now i can show you something we can go to localhost 1337 slash posts and if i press enter here this is how we get to the content that we just created through this api endpoint and strappy automatically builds out the api endpoint just by creating the content type which is amazing but you're like okay chris we can't get to the content it's forbidden what are we doing here so the cool thing about this is we go down here to the strappy dashboard go to settings we just have to open this up for public usage by default the api is secured and not allowed to be used by public so i'm going to go here settings roles and we have two roles currently but you can add more roles like an author like an editor like an admin but i'm going to go click public go down here i'm going to click for public usage we can find one and find all but the public should not be able to create or update or delete any of these posts so i'm not gonna check those okay so i'm gonna click save here roll has been edited now if i go over here and i do this and i refresh there is our first blog post here so that was how fast it was to set up an api set up the model update the database create the api endpoint and pass back data and also secure it so i don't even know i don't have any fingers enough for that what we just did but all of that just through the dashboard of strappy and that's why i really like strappy um edward mason says what does the account permission do let me show you so if i scroll here sorry i keep zooming in now i'll click count i'll click save and it shows you the route right here on the right so you can go to forward slash post slash count so i go here posts slash count check that out we have one post so it's a good way to like just get the number of posts that you have cool right on thanks lauren's yeah the setup here is fantastic and very fast you'll have to define all the fields as well and strap you to do a migration uh i'm not sure i think you just update your models in the content types builder right here and it'll handle it i think the strappy team is kind of hanging out in chat if i am wrong so please correct me if i'm wrong strappy team all right let me just read through some of these comments and questions should we also define a reference to the author dimitri yeah that makes sense it's a post it should have an author let's do that right now i'll go to post add another field i'm going to call it a relation right here check out how fast it is to do relations in strappy and we're going to say this is a user right here and a post has one user no post has and belongs to one user no post no so we're going to say post has many sorry user has many posts and then we're just going to call this user right here and this is posts and that's it i'll hit save here oh actually for clarity we should just capitalize this i'm still not too sure on the capitalization thing but let's keep it similar perfect so now if we go to posts um actually this won't work because we need a user so i'm going to create a user right now and i'm going to pick someone from chat let's go for uh hamza and let's go for hamza at test.com and then password i'm going to type in some random stuff confirmed yes and strappy also does email verification for account signups by default so what's cool here is now under posts i can say well hamza you can own this post hello everyone in chat and i'll click save yes i know it's not a good password chrome so the cool thing here is hamza now has that post you can go to post as well you can click here and you can see that hamza is the owner of this post cool uh david sells with a question can you do everything on strappy like on apis on node.js yes you can this is all in the dashboard but let me show you something really cool about strappy is if you need to do something that the dashboard doesn't support let me show you this real quick let me go in here um let me open this up i'm opening up strappy envious code now let me zoom in let me hide some things so everything in the strappy dashboard is going to correspond to a file in your repo so if i go here api this post folder let me zoom in more it's going to be everything that we just created in the dashboard so if i went here to models host settings.json everything that we did in that dashboard is right here so title is here slug is here content is here user here so if you need to do anything more than the dashboard provides you have all of these files right here to customize your controllers services configuration and all that good stuff so that's why i really like strappy it's like best of both worlds cool oh hey strappy in the chat thanks for joining cool so here we have posts let's create a couple more posts right we want to make sure that once we start building out our next js side of things we have content to pull so let's go a new post um let's see i'm just going to start pulling comments from chat amazing flexibility ability and do the same content for each one awesome can i create a author from here oh that's okay though so i'll hit save and i'll hit publish so strappy comes with a draft publish system out of the box okay so there's one right there let's go create a new one add new post uh i'll go with brino's that is awesome okay save that and publish that i'll go to another one connect yes code to oh too strappy okay and i think that should be good right we have one two three four i'm going to go users and let's add those in oh i don't remember everybody's so let's go for sean sean test.com password confirmed and then let's give you amazing flexibility okay let's go for another user let's go for brino look how cool this is we're creating users we're creating posts and this is only what 20 minutes into this tech talk and the first five minutes was us hanging out posts let's go for that is awesome okay no don't save that all right one more and we'll go four who's that last one i'm sorry i can't find it now oh i got it kevin so kevin okay and we'll give you the post of connect vs go to strappy okay get out of here okay so now if we go to localhost one through three seven slash posts each one comes with the user object that uh created the post so if you've built apis before you know how amazing this is that we've done this in 20 minutes as far as building the api data database content all that good stuff right seriously we're like ahead of schedule now so i can i can kind of like just say hi in the chat again all right right on so next up we're going to move into the front end because we have our back end for posts and really that's about all we need for content for posts eventually you do a little bit more maybe let's go look at a scotch article let's see let's go for this one so you would have a featured image most likely you would have your author here date is in there you maybe build out comments you would build out a bookmarking system and then you would have your content and that's all there is to a blog right cool so let's keep here we have posts i'm gonna go and start a strap a next.js project now i gotta start closing these i'm getting confused so we have blog next and blog strappy so we have the strappy side done i'm gonna go ahead and go create next app and blog next so now we are creating a next.js app from scratch from the command line uh chris mulvaney says i love strappy i could not deploy strappy and my front end to the same server the cool thing about digitalocean's new app platform is that you can deploy the back end the database and the front end all together as one app and that's why i really like app platform for full stack apps is because it can do stuff like that osmar is here for authentication i don't think we can get to authentication today but that's definitely a topic we should do in the next one that's such a big topic right on okay awesome love the questions keep them coming so let's say we have our brand new next project so i'm going to go code blog next this is how i open it up in vs code quickly this little code command okay so let's do some organization i don't need this anymore this is up i don't need the status bar on these okay so we have now this is our notes let's delete this we don't need our notes anymore okay so we have strappy we have next.js and we have chrome so let me change out our colors here so i like know what's going on so let's go blue for that and then next gs can be um yellow cool so front end is yellow back in is blue and we have chrome and this is uh an extension called peacock that i'm using okay so here is the front end pages right here we have api app and index this is the start of any next js app if you're using create next app and i'm going to go back into my vs code right here and i'm going to start this npm run develop and i'll let that run so our api is still running again i'm going to go over here and i'm going to run this npm i think it's start everyone uses a different name it's so confusing dev dev okay so now our front end is working on localhost 3000 our backend is localhost1337 and this is the start of our project so i'm going to close these out now and now we have our dashboard we have our api we have our front end app okay let's keep it going right so here in our next.js app i want to do the home page first so i'm going to go to index.js and let me zoom out this is a little far in there we go so i'm going to go balance outward delete all that free delete that hi everybody that should be good there okay so if i go back to let me just do that right here and then do this right here sorry organization for these streams is like the hardest part of it there we go so this is our next.js app so let's go over here the thing to do with the next.js project is if you want data then we're going to have to go get it and you might think oh in a react app i would go and do a use effect right and then you would do like function fetch data right here and then you would call that up here but since we are in next.js we have a specific way to call data if we want to be able to server side render it so that's right here what's happening oh okay um so to do that with next.js we have a special function called export async function at static props and the cool thing about getstatic props and the really cool thing about nextgs is that we can do two things with it we can one generate data on the server side using node or two generate data um get data on the front end client side and to show that off check this out i'm gonna go console.log i am on the client here i'm going to say console.log i am on the server and this is kind of the magic of next.js is you can do things on the server and on the client side so you can have a best of both world sort of scenario so if i'm here i'm going to open up this right here i'm going to refresh this page it didn't return an object of course i have to go down here and say return right here um props and i'll do an empty problem there we go so if i refresh this you'll see that there are both of the client and the server gets logged out on the this is the server side right this so this is considered the node side and that's because the node side kind of processes the whole page so that it can give you a static page a pre-rendered page and over here we have console i am on the client so only the client side console log got shown to the client side and that's all good there question are we going to make this video live later yes it will be it will be um on digitalocean's youtube channel okay so here we have get static props now i want to go back to the api we just built and go get data so i'm going to say um get posts from our api and i love commenting out stuff like this so that i know what in the world is happening so here we're going to say const or as equal to a weight fetch and that'll be http localhost one three three seven slash posts and ideally you would move this into an environment variable but for times sake we're just doing it right here let's go const beta is equal to uh await res.json and then let's see what the data looks like here okay this is super zoomed in so the data looks like that big s array of stuff um from the api so it looks exactly like this thing right here array of objects so that's cool there so since it's not wrapped with anything we can actually just call this pose then we're going to pass in posts through our props and now we are able to grab all of the posts from this so now we have posts up here and let's go ahead and do our map over them so we can loop loop over the posts and show them and we're going to do uh div right here if oh my computer's doing weird stuff give and we're going to say um wow i'm forgetting my syntax here we're going to go post post.map post so to do a loop in react we're just to do post.map let's say key is equal to post dot id and here let's do an h2 and in there we're going to do post dot title i think it was capital right okay fingers crossed no problems here it should work cool so here are all of the posts that we created in our api amazing right so i'm going to go here and let's go create a new post and let's see let's pull somebody out of chat let's go for code on github and the answer is yes i'll add the code to github and then we'll put these uh the links to the repos in the description to the youtube video okay so code on github code on github awesome i'll hit save here um and then we need to give this an author let me zoom out here it's getting crowded well let's see code on github was from edwards so let's go for edward confirmed and your post is code on github save that and i think the problem here notice that it's showing blue i don't think i published it yeah it's in draft mode so let's go publish and if it's in draft mode it won't come through the api so that's good to know so this should update itself and show a new post if i refresh there we go so it's that easy to on the fly build out a back end add to the back end and our front end gets updated how amazing is that right um there was a question where do you host strappy from albert ho i use digitalocean.com um product slash ad platforms let's go here products app platform so this is kind of a new project from digitalocean where it lets us deploy strappy apps from github repos and then we can attach the next.js front into it and we can attach a postgres database to it so all of that can like live in one spot and that's where i personally am deploying all of my strappy apps okay so this is all of our stuff right here i wish i could i wish i had time to style it i don't like how not good looking it is but that's okay so let's go and say well let's do a little bit more so let's say div we're gonna say post dot user dot name username let's go for username and the question here was i believe why are they capitalized i think that's just because of how i set it up in the dashboard if i go here you can see that it's user slug title um you could have easily gone into content types builder and change these to lower case right here i'm still not sure what the best convention is there but not sure cool um let's see mountain ash because i work here is that because i deployed my apps here i see um so scotch that i have my background built scotch.io i've hosted it on digitalocean since it was created and um yeah so take that as you will okay lowercase looks better yeah i think so too everybody i made a mistake all right so here is the cool thing about next.js is we have um all of these and we're able to show them but if you have a blog or an app you're going to need pages right so we're going to need like slash hello everyone in chat so we're going to need pages for each one so you might be thinking since next.js does pages by route does that mean we have to create a brand new file for every single one of those pages so the cool thing about this is we can say new file slug dot js so this is kind of a tactic that next next.js applies to dynamically generate a bunch of files so i'm really really cool here because we can generate all of those files right here one two three four five all without having to do a new file for each one and then we can statically generate the site as a giant html um folder of files so let's start here i want to show you what this looks like export default function let's call it post turn give oh if cool so we need to do two things here we need to tell next.js how many pages there are and then we need to for each individual page get the data for that page so those are the two things we need to do and nexus knows this and has come up with a way to do that we have export async function get static paths and then export async function at static props uh mountain ash is right ecommerce can be done on like the cms the content side of it but it doesn't handle payments or orders uh i just i want to show you all a quick project that i just found out that i found was really cool it's called member stack where it just lets you add payments on top of your current app kind of a fun project i haven't played with it myself but interesting okay so let's do get static paths first we want to make sure that we can get all of the data so what we're going to do is we're going to say const response is equal to a weight fetch and it's pretty much the same call from the homepage localhost 13337 posts once data is equal to awaits res.json so the way that we tell nextgs how many pages to build out the syntax is a little weird we do return paths and then we say um paths is an array i believe yep and then fallback is false so paz is basically saying okay well here's the first one we want slug to be um all right we want params and the slug is gonna be the slug oh my gosh my syntax is so off here slug sorry is the post dot slug well capital s so that's kind of the syntax that it wants so for us to do that we are going to map on this giant posts array right here so i'm going to say params paths right here is equal to um let's do it up here so we're going to say const paths is equal to post that map post first yeah there's a cheat sheet on the other screen but this is the try to pride myself on not using the cheat sheet but this is the time that i need the cheat sheet so please bear with me sorry i'm using a cheat sheet everybody um slug post dot slug it's just this syntax always trips me up for this right here the path section okay no more cheat sheets uh cool so we have res we have posts and then we're just like reformatting the posts to create paths and then thanks guillermo and then we have paths here and fallback is false and i want to show you what this fallback false means because this one line i think is where a lot of magic comes from next yes that i absolutely love so if i go over here get static props let's do this um we are gonna need params out of this and all of the syntax you can find on the next js docs i know this is kind of like a running through a lot of new syntax if you're not used to nexjs um cool so let's go const slug is coming out of params and then now that we have the slug here we are going to say const res is equal to ace await so let's go get this data from our our api and let me show you what it looks like actually so if we have posts how do we filter for this one slug right here well you can just go at question mark slug is equal to like that and that will give you one of the posts so really cool because you can add in filtering all from the url and strappy has that all built in for us and you can find all the ways you can do that in the docs you can do like greater than less than you can filter all that good stuff uh live streaming or why isn't actually just so bad at maintaining scroll position i actually don't know on that one but it is frustrating huh thanks jonathan cheat sheets are a must making me off all of you making me feel good for the cheat sheet appreciate it very much so http e localhost one three three seven slash posts and then we're gonna say question mark slugs equal to slug so yeah that is how we're gonna say go get data from that api endpoint for this specific post and then we're going to say const data all right well const post is equal to res.res.json can't type anymore um let's call this data and let's call this const post is equal to data zero because it brought back an array we only want the first one in that array and then now we can return props is going to be post okay um live streamer i appreciate that i have never gotten a super chat but i don't think we can do it on this channel i'm not sure actually okay so now that we have post down there we have post up here and now we can say finally hey post dot let's just double check that this works a lot of writing and this get static pass in this getstatic props but if you have any dynamic data in next.js you can generate like if we had a thousand posts this file right here would be able to generate a thousand files um cool uh sergio getstatic props revalidation i'm not sure let's just see if this works real quick so here's the homepage and then if i go for hello everyone in chat enter now we go straight to our single page which is really cool okay so that is how we can get data from strappy and pull it into next.js and generate a bunch of files so i want to show you that static generation and what that looks like with nexjs because a lot of people love gatsby because you can generate like 3000 static files and now your site is super fast right because you're serving html files next.js can do the same if i go to let's close that out i'm going to go to my package.json but here are our scripts dev build and start i'm going to build out a new one for export next build and next export okay so check this out i'm going to build out oh well the server's down but i think it was six posts so that should generate six pages for us so if i go here there is all of these files right here i'm gonna go npm run export let that run let's make sure it doesn't error out cool so it generated a bunch of files for us in this out folder and let me show you all so now each one of those files that we each one of the posts that we had in strappy is now a brand new html file right here cool so amazing flexibility code on github we can open it up and see it is also minimized minified and ready for serving on a static host okay ike with a very good question so next gs has the ability to dynamically generate a site or statically generate a site so here we did static generation so you can have this be your build command and you can just go serve this on a host right the cool thing about this is if we make a change in strappy we can just say hey next rebuild the site that's cool that's fine and you can do that with web hooks but what we can do also is the the tough part about static generation is let's say scotch.io has 2000 articles right if i made an update to one article then that would force it to build all of the site again so why am i building 2500 files when i just had one update right so the benefit of dynamically generating and i'll show you how to do dynamic generation so one is static generation is build all files at once build all files when one changes right okay and then we have what next.js calls incremental static generation which is server side rendered and static generation so basically when first first visit happens generate the page when second plus visits happen serve static page cool so that's kind of the difference in both of those approaches for having something as large as a 2000 you know file site or if you have an ecommerce store that has 10 000 products i would recommend going incremental static generation it's just always working for you you don't have to like manually go and manually generate your files so let me show you how to do incremental static generation in next.js this little line right here fall back is false you just set this over to true check that out and now next yes says okay if i don't find a specific file so if i get a 404 i'm gonna go see if i can find that file before i give you the 404. so kind of a really amazing tactic for building out these dynamic apps that are pretty large um let's see what's the font you're using i'm using cascadia code um guillermo 50 000 plus products that's amazing yeah i think uh this would be a fantastic approach for you if you wanted to go to the next js route okay so i guess the last thing let's do a little cleanup let's go import link from next link and let's go down here instead of this div let's change these out to a tags and actually what is the syntax for link it's link um href host dot slug like that and then the key goes up here now key is post.id we close out the link here and then i think i'm missing one thing yeah it's right here so we're gonna go post that slug slash there oh slash goes on the front sorry flash there so that should be able to link back to um to each individual post right and then this let's do the same thing up here i'm gonna import link from next link and then we're going to return this div right here i'm going to do an h2 oh that didn't work at all h2 there hold on almost and we're gonna do a link tag right here href is gonna be to the home page and then you need to put the a tag inside of it and then say go home he tag close link cool all right so now if i restart this npm run dev i should be able to kind of maneuver around the site like you would a normal site okay so there's our site let's click on each one of these hello this goes go home that is awesome so you can tell it's kind of fast because it's just serving us um quicker sites right cool but i know it's kind of a bare bones demo but the code here can be used for any sort of dynamic application so i think yeah we are building a blog for this scenario but a lot of these techniques that we're using with nexus with strappy can be used to build out any sort of full stack applications that we would want um let's see relax mood how to code easy understand please help me i think a lot of practice is what's going to get you to be good at some coding and honestly you're doing it right you're here in this tech talk with us and you're learning um maybe some of it is a little bit too much but i don't know i think you're doing a great job all right so we're coming up on the last nine minutes of this and uh i don't know i just want to reiterate how much we were able to get done in 50 minutes and you know we don't count the first five because we were hanging out but we were able to start up a strappy app create an api for posts right all right here so now if you had people that you wanted to write posts you could just say hey here's the url here's the login um go and update stuff on the site right and then you would have the front end right here where you can pull all that data show that data and then link to each individual page and i don't know a lot of this stuff we did in an hour but a lot of the stuff used to take a long time so i really am happy with this stack let's see roman add comments to the post page i would love to um what you do here is you go content types builder you go to create a new collection type oh clicking in the wrong spots then you go for uh comment continue and then you have like rich text as the content for that comment add another field relation comment belongs to a post um post has many comments like that oh and then it probably has an author right so we'll add a relation to a user uh user has many comments and we'll just call this user and we'll finish out there and we'll save um not sure where that one happens oh cause my dev server wasn't running or was it oh well so here's comments here's post here's users so now you can generate posts you have a full crud system on the comments and you can hook that all up cool all right any any questions throw them in the chat i'm reading through the chat right now let me bring this over so we can all just see what we're reading through um live streamer scrolling position in nextgs i'm not entirely sure how to solve that honestly i did see somebody do it i think it was inertia js i'm not totally sure though sorry uh can you restrict admin for content use i don't know why this is scrolling all weird um is it possible to deploy yes so i don't think we have enough time right now but let me show you real quick what that looks like here i am in the digitalocean dashboard so what i have here is blog strappy next this is kind of a sample that i was playing around with um sorry i'm bouncing around but let me let me show you what it looks like so you can go create app you can go to our digitalocean app platform dashboard you can pull from github so you can say blog strappy you can click this you can click next you can pick your region um let's go for that you pick your branch and then you can auto deploy code changes so anytime you push to github it automatically deploys really really nice feature there click next there let that fish for the code so we have it's a web service it's node.js or you can deploy the static site if you're using the next.js side of things you can add environment variables you can add your build command your run command you can add a database with one click which is really nice because we are going to need a database for strappy i'll click add database so here we are deploying node deploying postgres going to click next and then you pick your pricing for whatever level that your project is at click launch basic app it'll go ahead create the app for you and do its thing but let me show you the really cool thing about this that i spoke about earlier is you can go to what's called components right here and here is two components we have a database we have our strappy backend which is node and i'm going to click create component we can add a static site and now let's go add blog next i'll click next so now we have blog next we're deploying from the master branch static site build command we don't want yarn build we did create a new one called export so we'll do export and that's how it's going to generate the static site and serve everything up for us static sites are no additional cost on a on an app that already has like a node service and from there we just click launch static site and now we have the strappy backend a database and our next.js front end all living in one app here and that's why i really like the app platform setup is because you can do stuff like that all right brutal chub z could you now expose a post endpoint for the users to submit new blog posts yes you absolutely could uh let's see i have uh lucas how did you do it before the deo app platform uh i just spun up a digitalocean droplet and did it that way so let's see let me clear out let's create a new request here create a post we might for sure be running out of time but we're starting it so to get posts to open up to like we can do authentication in one of the next tech talks let me know in the comments if you want to see that but i'm going to go posts here you go settings you go roles public and we say public can create a post and update a post but not delete a post and you hit save there so on this create you can now do in here we can do a post request to http localhost 13337 um posts like that and then you could put the body as the um well let's do it as a multi-part so let's do i don't know title hi there see if that works uh needs to be json okay so let's go json okay that's fine title hi there cool so now that created a brand new post it doesn't have comments it doesn't have a user but if i go here now to posts check it out brand new comment our title didn't get passed through but that's how you would do it a lot of authentication authentication plus nine from uh guido what is that ui roman i'm using a tool called insomnia it lets us do um api exploration alessandro you are correct i didn't connect a particular database for my local strappy when you're local if you add in the this was the command i used to start up my server npx create strappy app um my app as soon as i did quick start it uses sqlite so that's all that needed to happen there oh raphael compilations thank you for that that is why igor thanks for that just another reason to go lower case huh uh doug do we have et on bitbucket support i don't think we do or yeah but we're adding stuff to that platform as fast as we can we just added gitlab so soon is what i think should happen jwt with strappy and next yes that would be a great um next tech talk everybody it seems like everyone wants authentication we can definitely do some authentication where we let people uh i don't know sign up and build out maybe create posts on their own after they're authenticated hey james from india welcome thanks so much bye kayla thanks for showing up i know that um a lot of this is kind of advanced sorry about that right on malath uh hey real quick everyone if you want to hang out and chat with me you can find my twitter chris underscore underscore sev i can drop a link in there here's from wales yeah thank you everybody for joining i know we're up at the hour so thank you very much for spending your time here building a full stack app with us for an hour i appreciate you all showing up uh really thanks come see me on twitter my dms are open i'm happy to chat and it looks like authentication is one of the big ones that's coming up thank you mihai thanks lucas bjorn osmar alex thanks everybody for showing up mary chan max appreciate you all showing up really i i really do made my day right on i love it all right everybody well have a great rest of your day and i'll see you later

Channel: DigitalOcean

Views: 46,064

Rating: 4.9423218 out of 5

Keywords:

Id: WrmndNpWSJw

Length: 61min 42sec (3702 seconds)

Published: Wed Feb 10 2021