Let's Learn RedwoodJS! (with Anthony Campolo) — Learn With Jason

sorry i was getting messages like are you guys live yet i know hello everybody and welcome to another episode of learn with jason uh sorry for the technical difficulties but we are here and we're ready with me today is anthony campolo thank you so much for taking the time to join us today hey i am so excited to be here thank you so much for having me uh i'm someone who like am a budding developer advocate developer educator myself and your work has been like such a huge inspiration to me so it's really great to be here thank you so much that that uh that's my warm fuzzy for the day uh so now that we're done battling the computers and we are we're live we're ready we're talking to everybody i'm gonna send a tweet that i meant to send out a while ago uh let's see might just be the trick um https twitch.tv langstorf so my computer just rebelled and it like wouldn't cooperate at all wouldn't uh it wouldn't stream it was just yelling at me it was being rude it hurt my feelings but we are up and running now and i am just plain thrilled about it so um let's see ajc webdev which you all should be following um the one okay tweeting it has been quote now voted chat thank you for uh thank you for hanging out with us appreciate y'all spending time um so anthony for those of us who are not familiar with your work as you said you are a budding web developer uh or a dev advocate what is your what's your background what kind of what what have you been up to yeah i'm someone who came through the non-traditional background i was originally a music teacher that's partly why i really resonated with your story you know someone who came up in touring bands and you know worked on your band's website and yeah yeah all that stuff was like yeah no i did all that i did you know cross-country like 22 state tour back in the day so that whole life and then um i spent a couple years uh running a performing arts summer camp so it was a camp that i went to myself as a camper and it started as like a theater camp and then they added rock band and film and like all these other things so it was like a general performing arts summer camp and that was really incredible i learned a lot about like just operations and logistics and admin work and how to like run events and it was it was great but it wasn't like really what i wanted to do for the rest of my life so i eventually kind of found my way to uh web development type stuff i originally was interested in like machine learning and was learning python and like tensorflow and that kind of stuff oh nice which is cool and i'm still like really passionate about but um it was like hard to really make progress there whereas like web dev you can like just start building stuff like throw up an html page and just like see the results and so a lot of people you know have talked about the virtues of that kind of like feedback loop and i eventually joined lambda school uh studying full stack web development and so i'm still currently in that program i'm going through the the computer science unit which is kind of like the final unit after all the the web stuff so i'm getting near the end of that cool and i'm like really passionate about redwood js and um i'm kind of here to talk about that absolutely yeah so uh you mentioned before we started hey chris what's up thank you for the raid hello everyone um good personal raid i see uh i know chris was doing advent of code which if you haven't heard of advent of code it is a oh thank you chris for the sub as well uh advent of code is a um it's a challenge in the month of december with uh some puzzles code puzzles that'll help you kind of sharpen up it's especially useful if you are trying to break into tech um coding interviews can sometimes be like algorithm challenges or things like that and these questions are very similar to that so it'll help you kind of think in that in that mode so if you if you want to give that a shot it is advent or advent of code that's the one um so feel free to go hit that it's a good time um but yeah thanks chris for joining thank you everybody for coming along for that raid and uh you had mentioned before we started that uh that it can take a second to get a project with redwood initialize so instead of doing what i usually do which is talk about redwood and then initialize a project let's initialize and then we'll talk about it so can you walk me through what my first step is if i want to create a new redwood project absolutely do you have yarn i'm assuming you do uh yeah i do great so the first thing will be yarn space create space and then redwood dash app like that and then space and then dot forward slash and then you'll give like the name of your project so you can call it whatever you want to call the project let's call this one what did i name this episode let's learn redwood js okay and so this will do the whole generation of the the projects it usually takes a couple minutes because there's quite a lot to do it also installs your dependencies and yeah so so maybe what we can do to start is we can talk a little bit about what redwood js is so i've heard the name but i'll be honest this is the first thing that i've ever done with redwood.js so i'm brand new to this as a technology so what what is it at kind of like the high level yeah so we say that redwood js is taking full stack to the jam stack and the kind of longer version of that is it's a full stack serverless framework for the jam stack so there's a lot of buzzwords there really what i want to kind of get across is that it's a project with your front end which is like a create react app and then also a back end which is like lambda functions graphql type back end stuff so it's about taking all these pieces of modern web development and yeah the way people are wiring up their own kind of full stack projects and formalizing that with conventions okay and in one one way that i've heard this described oh that went so fast um okay i am i am installed wow okay i i was i was expecting that to take way longer so 66 seconds all right uh so now that we're in here i'm just gonna open this up uh let's open it up over here actually there we go yeah so this is this is great it's i find actually looking at a project is much easier than trying to determine theoretically yeah one second i gotta get in it in here so that it doesn't dim everything how about now and we'll probably be deploying this also so much better okay so now we've got we've got a project um i'm trying some new some new vs code settings that uh i saw mentioned by i think it was burke holland's idea and then nikki muleman pointed me toward these uh of having the vs code like filed on the right which still getting used to it but i think i like it it's very interesting yeah okay so um so now if i look in here i can see i've got an api folder i've got a web folder so let's look at the top level here um we've got our redwood.tommel okay we've got a readme readme's are always great but today you are my readme um we've got graphql config babel config um an example n file now i assume we're gonna have to create a database right like it doesn't do that for us yeah so the the database question is an interesting one the way it's set up and the way we'll probably do it today is you create a heroku postgres database and grab the environment variable and throw it into netlify where your front end is deployed got it okay cool so all right so um where should we start if we want to kind of pick this apart because what you said it like it lands with me because i think that jam stack has so much potential and you know i think that there is a there's a a general perception at first at least that when you build a jam stack site that there are severe limitations on what you can do with it um but i think that as you dig further into that that becomes less and less true you can kind of do whatever you want with with jam stack sites because static assets don't necessarily mean static experiences and so what what redwood is promising then is to take a lot of the question marks out because you know getting from static assets to a highly dynamic experience with databases and serverless functions and all these things there's there are some decisions to be made because you know serverless functions that's a whole mental model you have to build databases that's you got to choose a service you got to choose a database flavor you got to figure out how to configure that you got to decide how you're going to secure it and lock it down um all of those things are that's cognitive overhead right and so so what you're saying is that redwood is trying to eliminate a lot of that decision-making process by giving us a ready-made like this is an app building framework that has made the decisions to give you a good shot of doing this the right way is that is that a safe assumption of of how to frame that yeah that's a great way to put it it's as we say convention over configuration we have if you look at historically we had really strong conventions around full stack development with things like ruby on rails and then as single page javascript applications have become more of the main thing we've gone away from a lot of those conventions and this is trying to take everything we've learned over the last five years or so with things like react and graphql and these like new modern web paradigms and stitch those back together into conventions that make sense and that eliminate a lot of the decision fatigue and choices that go along with just how you set up your file structure how you connect your front end to your back end how everything speaks together so yeah it's and it's trying to do that in a jam stack paradigm by taking what we all like about the jam stack and the benefits of the jam stack in terms of performance reliability and security and extend that to the entire stack absolutely okay that makes sense so um i have a brand new project so if i want to get this up and running um i assume this is kind of is this already ready to serve can i just start it yep so the first way you would get it going is the main command to start your dev server is yarn space rw which is the alias for redwood you can either type redwood or just rw and then space and then def or dv dev okay yeah so this is going to give us our main splash page and then from there we'll just start generating pages and that's kind of the first thing that we can we can get into i find that just start kind of like building out the project like incrementally you learn the different pieces and how they all fit together if you try to like explain the whole thing like there's an architectural diagram if you go to go to the home page real quick uh like the redwood js homepage and scroll down keep scrolling yeah that thing right there yeah so that architectural diagram that's a picture like the whole project um i find that if you're someone who like likes architectural diagrams that may be really useful but um it's like a lot to take it didn't really make sense to me until like i had already built like the whole thing and then i went back and looked at that picture like it now makes sense yeah yeah yeah and i mean it's you know this is what's always interesting about these is that this is just about any app is going to look pretty similar to this whether it's built on the jam stack on a traditional like lamp stack you're going to have you know your you've got your web bits you have to deliver markup css and javascript to the browser and then you have your kind of like api or or dynamic layer where you're sending requests back to some kind of a server so in this architecture we you know that and that's the front-end back-end split i like this this dotted line to kind of signify that um yes you do i tell people to start with look at the left side and that's like your actual directory structure when you're looking at your web folder and your api folder and those are all contained in the mono repo yeah yeah all right so this all makes sense i i mean you know i'm excited to see how it actually works but in the abstract i get where we're going um so now that i've got this site running it's over here we can see uh we've got redwood router okay so that's the thing that we're gonna have to learn but this looks pretty similar to like react router or reach router if you've used those so that's good it feels feels familiar um what so yeah i guess like i saw it it set up it said a prismaclient does that mean that it also set up a database or it just kind of set up an empty client to start yeah so right now it's like kind of initialized and set up to where you could get your database going really quickly we haven't quite gotten to that point yet we'll start off kind of in the front end generating some pages and routing those together and then we'll get into like the prisma database type stuff but um out of the box like everything is like very much ready to go in terms of like it's already wired up for sql light for like development and then you just have to change like a single variable and one of the config files to make it for postgres but um this kind of is getting ahead of where we are right now sure okay uh so what we should do is you should keep your terminal running and then we should get another terminal open so we can run commands to generate pages and stuff like that cool so i'll just keep this one running in the background we'll use the we'll use the uh the vs code one for everything else so i'm ready cool so the first one everything is gonna have basically yarn redwood or rw is gonna be like the first kind of starting commands okay and then for this one it's either g or generate so just the letter g is the alias for generate and then page and then space and then all lowercase home and then space and a forward slash so what this is going to do is this is going to create a home page for us and it's going to create a route to our just main home page that's what the slash is for that's going to generate the route and the home is so it's going to name the it's going to be like home page going to the name of our component and it's going to be in a folder called home page and it's going to generate a whole bunch of stuff so that's the okay that's the the command so go ahead and run that so so to just repeat this back and make sure that i get it we're using yarn so that we don't have to globally install the redwood cli correct then now and that's because it's installed in our package.json down here um and so when we have redwood then we can run this redwood command g is for generate page is the type of thing we're generating yes home is the name of it and this is the path like what we want it to be from the website url yeah you got it got it makes sense all right so i'm running this command and it's also going to generate a couple other things as well it's going to generate a storybook file and a test file so it's set up in a way where you can run your storybook automatically you don't have to configure storybook at all and you don't have to like set up just tests like it gives you kind of like it it sets you up for tdd out of the box because like this kind of goes along with the rails influence is they're trying to bring some of the conventions around testing as well into these javascript frameworks gotcha okay all right i'm i'm with you so now that we've created this we've got a home page and so i'm going to open this up and go back to where our project is running it automatically jumps into that so again this is our home page this is our home route and we'll have a routes folder to this so this is the actual page we're looking at and if you look at the routes the routes file yeah so this is your kind of whole route and so part of why tom built their own router is because he wanted a flat routing structure you want nested routes so your your routing here is essentially every time you generate a route or generate a page it automatically sets up your route okay and this is kind of like one of the big things you get in contrast to something like next which also has its own router so a lot of these frameworks like the the routing layer is like a really big piece gotcha okay so so i'm i'm seeing in this some echoes of like the the angular style of of setting things up where what this does is we're using the cli because there are connections throughout the file so when you create a page you have to create a home page and then you also have to update the routes and potentially some other things as well so the the cli is kind of making sure that everyone does everything the same way and that's what you mean by convention over configuration we we know that things are predictable now because in order to work it has to be done according to this convention yeah and to answer the question in the in the chat well if we were generating 500 pages of your blog when we do the scaffold command the each blog post gets its own page based on an auto-generated id so so that's kind of the way that that works but honestly the the blog format is kind of like a good way to understand a redwood project but it's not really like the sweet spot for for redwood it's more about creating like data intensive web applications with like multiple clients and less so about like generating tons and tons of pages but um that's all that is something you can kind of do with it so yeah sure okay well yeah so now that i've got this home page um we're set up here that is cool and it's already got a link which is also nice um i do like that the examples kind of get done in place i think that's a good way to this yeah this makes me happy to see that sort of stuff um but yeah hey what's up peyton thank you for the host uh then then what what what should we do next uh what i would usually do here is i would just kind of like edit this just to kind of make it a little clean like give your own your own title and yeah and you can actually take out the link because what we're going to do is we're going to create a layout that's going to wrap our pages that's going to have our links for us in the nav bar okay yeah um and then the next thing we would do is we would basically do that previous command again but now with about instead of home and you don't have to specify a path at all because it's going to create a path to about and it's going to create an about page it's going to do both of those gotcha okay doing it and also will generate the same kind of extra files and all that okay so if you go project you'll just want to type it in yep you got it all right that's your that's intuitive i get it yeah yeah so this is a lot of stuff you get for something like next where like you get very simple like page based routing like you're just creating pages your pages are your routes like this this to me is kind of like a no-brainer but um now what we're gonna do is we're going to do the yarn redwood generate command but instead of generating a page we're going to generate a layout okay and then call the layout just blog lowerca all lowercase okay and i'm assuming that's going to show up in my layouts you got it blog layout all right and and here okay so this will be a bit a bit of typing here so what we want to do is we want to import so go up above your component and import and then it's going to be link within uppercase l and uh yes yep you got it and then comma and then routes lowercase yep and then that's gonna be from at redwood js slash router okay yep and then here i'm going to let's let's do one of these and we'll set this up with uh just some basic semantics right so we'll we'll make this our main element and then up above it we can do like a header and we'll start i guess we can just do like a nav and for each of these oh wait this isn't that's not what we want we want the link and so yeah remind me what the syntax is here so it'll be uh t-o equals and then brackets like this uh yeah brackets not quotes brackets not quotes okay oh not quite so it's yeah so bragging's not close inside the brackets is going to be rat routes dot home and then press interesting so now i've got like dynamic it's a function yeah demand route function is what we call them i like this because now what that means is that if i change the path i don't have to go find everywhere in my app that has that path interesting okay perfect i'm into that um and then i'm gonna set about and about and what does redwood say about styles like what's its opinion here it's very unopinionated about styles in the sense that you can use style components you can use tailwind there's like a tailwind generator to configure tail one really quickly because like people love tailwind but um you can just go into your index.css file and just style it naturally also that's usually what i do because i'm not like a big css framework kind of guy gotcha if we just set this up to be like go nuts okay so we'll just we'll make this kind of obviously uh we should probably go with a darker color than that let's just make it a dark gray um and then for our main we will display block and max width uh 50 or we'll go 90 width of uh 500 and probably don't want i don't yeah that'll be fine so that's good enough um but we're not using it yet so how do i actually use exactly this layout so what we want to do is you want to go to the page you want to use it in so we'll we'll put it into both of our pages so you can start with homework either about and then you're gonna import it so it's just a component and it's um import blog layout blog and layout are both capitalized yeah and then from so you're not gonna do any dashes or slashes or there's no there's no like relative routing of between between paths you're just gonna do src forward slash layouts forward slash blog layout you just give it the exact directory the thing you're importing is from okay don't do a dot js or anything at the end and then you're gonna wrap it like that and that should do it okay so we'll do the same thing here all right and aside from the fact that that is atrocious let's let's fix that real quick so we'll go up here and we'll do like a margin zero we'll give this a color of white and we'll give it some padding of like two ramen how about that oh but i need to make my links how about that okay that looks useful and then we also want to add a little bit of spacing around these so let's go display flex and we'll do a gap of one room beautiful nice this is something that's still a huge gap in my knowledge being able to just like write css on on the fly we learned like css like a week in our boot camp okay so this now we've got like a pretty basic setup right like this is i'm into it yeah all right let's kill it right i'm gonna do i'm gonna do one more thing just to give us some i have a shortcut to make that happen so now we've got the default system fonts um just laugh in the chat and i was like wait why is his files on the right i know i know i've i've upset everyone i'm sorry nate uh yeah nikki just nikki just linked to the tweet that shows the the setup but um there's a really good reason for this actually i'll show you why i like to toggle my files open and closed and it doesn't bounce the code around anymore so this is actually enough of a reason for me to do it that makes a lot of sense that makes a ton of sense i'm constantly opening and closing my thing on the left to try and get more space and yeah that makes a ton of sense yeah so it's just it's it's like just those little things like i didn't even realize that my eyes were tracking that left and right until i wasn't doing it anymore and i was like oh that's pleasant i like that um okay cool so what we've done so far is we've like generated our pages we created a layout we've routed them all together like this is really good stuff that you get from a front-end framework like gatsby or next in terms of like having a sensible way to organize your content now here's where the really stuff starts happening so now we're going to start getting into prisma okay so we're going to want to go into our api folder now instead of our web folder so this is now our back end and we're going to have a db folder and in that db folder we have uh schema.prisma so let's open that up and so tell me again what was your have you used prism before um i have used prisma i think it may have been the previous version but sometimes one yeah one and prisma 2 are different and this is confusing craft cool was the original as chris points out there graph cool was originally a back end as a service and then prism one was a graphql server and thing that also would talk to a database and prisma 2 the prism we are now using now is a agnostic tool towards graphql or api it is simply a orm query builder have they have they steered into an orm now they're calling it finally caved good i'm glad because that's definitely what it is i would always say it's like yeah it's mapping your objects to relations it's certainly not an orm though yeah uh if you're if you're not familiar with what an orm is uh it's just a tool that does this so um yeah so now i have oh and let's actually let's pull up prisma it's uh prisma.io right yeah so this is prisma if you want to check it out um and so redwood is is bundling prisma as like a tool so so redwood uh and i think this is worth just kind of calling out again i think we talked about it a little bit but redwood is not new technology redwood is an assembly of existing technology to help you make good choices quickly um i guess that's not entirely true because like the router is new but but largely it's an assem it's an assembly of existing technology react prisma postgres you know things like that yeah yeah it's about taking all of the kind of best options that we have available so they they looked at a lot of different clients so like they've they've looked at like urkel maybe instead of like apollo client and they've looked at like you know different form libraries instead of like react hook form so they kind of went through the process of like vetting all of the kind of react ecosystem and coming up with their own kind of conventions around it and this is actually what's interesting is there's other frameworks like blitz or bison that are creating full stack frameworks around similar tools but they may use like react query instead of apollo or they may use chakra instead of tailwind so there's a lot of different kind of assemblages of these different tools just because there's been such an explosion of all this stuff and there's like a lot of really great amazing technology but it can be really hard to leverage it especially for someone like me who's like fairly new and like having to learn graphql and aws lambdas and you know your or some orm tool and like how to learn all those and put them together yourself right daunting like you'll never get anywhere so they're basically trying to absolutely give you the power of all these modern technologies in a way that is more accessible for sure okay so uh so now i i went ahead and installed the prisma vs code extension so that this uh file would get syntax highlighting it's a little easier to spot now so up here we're defining a data source then we have a generator and then we have a model now i can kind of figure out what this is i'm assuming that the generator is the tool that we're going to use to build out like how we interact with the database and then the model i'm making an assumption is it looks like very similar to a graphql schema definition but i can see that it's not exactly the same like there's some some magic in here yep you pretty much got it so it's uh like you said it's a model so you're gonna be defining essentially your fields and then what the type of your field is and then you can do some other stuff like we have auto incrementing id there you can set constraints like unique and this is why you know we say it's an orm it's allowing you to just create like this javascript object and so that's why it says prismaclient js because you can create your clients in different languages and that's like the thing that's translating your your objects into your sql so we're gonna we're gonna edit this and then we're gonna run a command and we can actually look at the sequel it generates oh real quick though i wanna answer this question in this chat because this is something that is uh so i'm very interested in is redwood js for view if it's a thing if it will be a thing it is i don't think it is yet a thing i absolutely think it will be a thing i think if you look at the progression of these different uh libraries and frameworks we have meta frameworks and we have like meta meta frameworks now because you have something like next is like four years old whereas blitz is like a year old but it's building on top of next so i think there's going to be something like blitz in view that's going to build on top of next and it's basically you just take nuxt and slap an rm on it it's like bam like you're you're half the way there you know so i think that it's kind of a question of how motivated you are to assemble the pieces yourself and then once you've kind of done that people can start to agree on what's the best way to do that and then that gets formalized into a framework right it takes a long time like that has been in development like two years yeah yeah yeah um yeah and i mean it like i feel like there's there are expansions and contractions of the ecosystem right for for a long time what we were seeing is that there were a lot of new javascript libraries focused on trying to create new functionality right and and we saw this huge spread and now what i'm seeing is that the libraries that are coming out are not so much about creating new technologies but about organizing the things so we're almost seeing a contraction where we're moving down to a set of standards and i suspect that we've got a little ways left before the next expansion it kind of seems to be a like a pyramid and then an inverted pyramid where we just go expand and then we contract and then we expand and then we contract and and uh you know that pattern is you know we we want to see what we can do we get frustrated with the existing tools so we build a bunch of new ways and then we get frustrated because we can't decide what to use and so we come up with conventions and then we get frustrated with the conventions and so we start all over again um and and i like i kind of like this this to me feels like curation i think that curation is a is a really important part of building anything um and and so what redwood is doing is it's curating over creating and for tools i think that's the right way to go about it don't invent things if you don't have to right um but yeah so okay so uh to get off my soapbox and and get back to writing some code what should we do next here so i'm assuming we're going to mess with the model yes we're going to rename it to just post instead of user example post because that's what we're going to be creating we're going to be creating a post um you can leave the top line exactly the way it is and then change email to title okay and get rid of the unique constraint okay and then change name to body and then get rid of that question mark yeah and then add one line and it's gonna be created at one word with capital a for at yeah and then date time capital d and t and then at default and then now with parentheses at the end nice and i don't know if anybody was paying attention but it just auto-suggested all of that so if i were to do something like a slug and then i can i just hit control space and it pulled up my options so i can like see what's in here and then i can come out here and i can hit command space and it shows me my options here so that's very cool like the and this is one of those things that i think is just a benefit of uh i assume this is all written in typescript so yeah we get a ton of a ton of benefits through the tooling that way um yeah all right so it's amazing so now i've defined uh a post and we know this is gonna be like the id or the primary key um we know that it's gonna default to an auto incremented number perfect the date time defaults to now that makes sense title and body i assume the question mark makes it optional which is inverted from graphql where you need an exclamation point to make it required this looks like it's required by default is that correct that's fine i don't know the answer to that question i don't know what the question mark does but um i would assume i think that is correct yeah i i feel like i had a conversation with the prisma team when when they were doing this and and uh and that was a decision that they made was to to make these fields required by default and then if we wanted it to be optional like an empty body you could add a question mark to make it optional um if i'm wrong please correct me chat yeah so this is interesting because like prisma is a huge chunk of redwood but you don't actually have to use prisma like i've created projects with like fauna db and you lose like all the nice kind of orm mist that you get from from prisma but you don't like necessarily have to to use it it's not it's not tightly coupled i think it's strongly something like active right is with like railing i don't think anyone ever use rails without active record but that's not really the case like most people probably wouldn't use redwood without prisma but i'm a weirdo so i i do yeah okay and i see well and like chef brent is in the in the chat oh what's up brent good to see you uh and he's saying you know i remember rails which that is kind of what this is right the one of the things that people miss about javascript is the prescriptiveness and the like done-for-you-ness of rails i think that was what made rails such a popular framing or a development tool at the time because ruby is great ruby on rails was like you're fat it's you're so fast you're done so quickly um and so you know i've heard a lot of people independent of the redwood community say they wish that there was like a ruby on rails for javascript and it sounds like redwood is attempting to fill that gap it is and so is blitz as well i think it's really interesting to see the way they go about it because redwood is all in on graphql whereas you don't use graphql and blitz you use this setup in a way where it's called like a no api layer so you're doing rpc calls like directly into your back end which is like more of a kind of monolithic idea so yeah i would compare blitz a little bit more to a ruby on rails but redwood is going for the same conventional reconfiguration thing i find it just really interesting because it's also doing it in a way worse trying to be jam stacky and decoupled and in a way where it's not like as tightly integrated so it's trying to give you the rails experience without the same drawbacks that people find in rails in terms of being like this really tightly coupled monolith so this is why it's like there's this weird tension in terms like how railsy it is versus versus it isn't it's it's very interesting okay so uh i'm sorry i'm just i'm like gonna fall into all these rabbit holes the whole time but uh in the interest of actually getting something working we should probably keep moving um so i've got the post that's a lot of rabbit holes post defined here um and then you had mentioned we're going to use something else right now sqlite for now we're going to use sql light we're going to because like you'd want to develop locally with your sqlite database and then when you're ready to deploy you can deploy to postgres and if you write all your sql in a generic way sqlite and postgres should be compatible in terms of the sql you write okay the id here so what we're going to do now is we're gonna enter command so these are gonna be prisma commands all those you're not really able to tell it's it seems like a redwood command but we're gonna do yarn rw and then db okay and then save so this is going to since we changed our schema.prisma now it's going to create a migration with the post okay that we just created cool so it prints out the whole data model and then it says just created your migration that's coming out for prisma shows us here's the migration with another schema and a readme and the readme will show you all that the sql that's generated nice okay so let's take a look at that actually because that's that's very cool so this oh nice okay so it's just showing us what's being done and what our changes are yeah i like that a lot that and that's cool because this is the sort of stuff that you want um when you're when you're doing database changes but that a lot of times people don't do so having this kind of record of of what happened and when and and what the changes specifically were yeah it eliminates a lot of room for error yeah absolutely that's nice okay so now that we've got this um are we done is it a blog almost very very close we're extremely close we got two more commands okay so yarn redwood db up instead of save up so now that we generated the migration this is actually going to apply the migration to our database so that sequel that we saw those sql commands are now being run we now have a database with tables and all that kind of stuff and the very last thing we need to do will be yarn redwood generate scaffold so same as before like we generated pages and layouts where we do scaffold and then do post post yep so we have scaffold our post interface and this is going to create a whole bunch of stuff this is like the famous rails scaffold command where it kind of like this is the blog is oh it just did everything okay so i'm closing this going out here we've got and let's not look at any of this yet let's go let's go into our um back into our browser here and here yeah and then go to slash posts and this should be fairly intuitive hold up pretty cool right i'm gonna i'm gonna test it wow this is done with talon that is slick okay and then i'm reloading the page it's still there um if you you can score you can't really see because of how your css is set up but you can scroll in that table to the right so like inside the table oh yeah show edit delete show there's my post okay look at your route right now see how it's slash one yeah yeah that is slick that is really slick i uh i'm yeah okay can color me impressed um now a lot of decisions were made here like i couldn't publish this of course because the chat would immediately troll the hell out of us by uh you know entering new posts but um what so this is all just the generated react component so in here we've got all of these kind of editing posts you hackers you you dirty exactly that exactly that you hackers um okay so yeah all right so where where should i look i'm i'm kind of poking around but show me show me what i should actually be looking at yeah this is a great question so i i wrote an entire blog post explaining all of this code there's not really a good one place to kind of look at as the access point where do i find that blog post um so this is on uh debt so well that's kind of funny i need to actually so uh i have this very long blog series about redwood.js called um so just search a first look uh a first look at redwood.js [Music] hello thank you for the host yes that's the community forum and um this is kind of like in flux right now i'm in the process of like kind of redoing this so this thing is actually like not really ready for for prime time it was like a month ago but everything's kind of in flux right now but it was part four so if you look at part four oh you see like it's basically like i kind of just like explain each each one like all right this is this here's like kind of code here's here's what it's doing so this is why i say like it's like this isn't really touched on in the tutorial at all like it's kind of just there you can poke around with it if you want what what we want to do next is we want to actually generate a cell that's going to do our data fetching for for this okay and then this is kind of gonna help us understand yeah so we're gonna do generate cell and then it'll be blog posts capital b and capital p yeah okay exactly and then so this is gonna generate our cell and so go ahead and run that command and this will be in our components folder and our web folder okay and then yeah so what's happening here and let's see are you getting an error because i'm not sure there's you should be but um yeah because what basically what happens now is depending on how your tooling is is set up sometimes it'll suggest what graphql query you want to be writing so let's just look at the cell let me kind of explain what's going on here so what's happening here is this is a kind of redwood concept that is a declarative way to do your data fetching so if you look at what's happening here there's a query at the top and if you've ever written a graphql query before that should look totally like understandable you're querying for your blog posts and you're asking for the id of your blog posts and then what happens is you have these four different states that your data can be and it can either be loading it can be empty it can have an error or it can be successful in which case we are using json.stringify to render the blog post id to the front page right so what we want to do now is where it says blog posts the three places we want to just change that to posts one word all over case like that yep okay and then we're gonna save that and then we're gonna go back to our home page and we're to import this blog post cell okay um what's the you don't need to do that you don't need to do the brackets you're just going to import that whole component so blog posts sell is what it's called yeah source components blog post cell wait a minute how does that work because it there is no default export here so is redwood doing some magic to bundle all that up yeah okay it just it just works all this just works okay and then am i do i just like drop it straight in yep self-closing tag interesting that's that you see we're getting here okay yeah this is where it all all comes together that so and so that ma i'm not gonna lie that magic puts me a little bit on my back foot like how do i like i don't know how to debug that i don't know what to i don't know how to like so i just you just have to know it's going to run this query these are the potential states it's going to hit but it's going to build the component that shows the appropriate state so yeah so basically any time it's it is able to tell whether you're getting the error or whether you actually are getting a successful state whether you have like a 200 or 400 or anything like that so yeah this is this is why this framework took two years to build like this it's you know it's they call it it's you know the magic it's just people spending the time to like figure out how this stuff works but um if you go to the query at top so um leave everything like that on the home where was i here yeah go back to your blog post cell and then bring it all in so add title body created at and then let's just see what that what that changes i wonder why it's not pulling that in for me it feels like it it should i probably just need to configure something but regardless boom so now we're getting everything and what we can now do is we can style this or not not necessarily style but we can turn it actually into a component yeah exactly right there so where it's returning you can spit out like the article key equals post dot id and then post dot title post doc created that post dot body and just kind of do a ball yeah so we'll do one of these and then we'll get like a key equals post dot id um and we'll do uh a link which means i need to import that but it'll auto import it for me good good and then i'm going to oh here's a question how do i link to a post because it's not going to work without routes thing you yeah there's a way to do this i don't know how to do it off offhand like right right now but um there's there's definitely like a very simple way to do this it's like setting your and i'm realizing now that we haven't actually built a post page so how about i don't do that just yet so i'm going to instead we'll make an h2 with the post.title and then we'll do a div or it's just a single that's just plain text right okay i'm gonna set it as a paragraph um we'll do dangerously set inner html and we'll make it the post dot body and then finally down here we will say created at host dot created at okay did i break it i broke it possibly yeah so try getting rid of the dangerously set aaron html part and um just do just do like post post body regular post body i'll try that where's my error no error so let's see it might be the way we're mapping over the posts so can i just shoot you some text and you can like copy paste it uh yeah send it to me as a twitter dm though because we're between two computers yes uh and while you're doing that i just realized i forgot to shout out the sponsors today so let's do that really quickly uh today's show is being live captioned as always by uh wyco captioning we've got rachel and helping us out today you can see that over at lwj.dev live and the captions are being provided by our sponsors netlify fauna sanity and off zero thank you to all of them for making this show more accessible to more people so make sure you check that out again it is lwj.dev live and we forgot to return this no we didn't yes oh we forgot to return this oh my goodness yeah i was like i knew we were making an error somewhere in the mapping thank you chad hey look at it go first try right viewers are so talented sorry what was that um okay so now we've got uh we've yeah we're good we we've got that running um and if we go to posts and create a new one buckets did that just work save that go back home there we go so there's your blog that's nice we we've got a blog so um this is like this is slick we can see how quickly you know but setting this up with another service would have taken significantly longer than the the one hour um well less than one hour given that we've been screwing around and i took 10 minutes to get started so uh but you know what 45 minutes worth of work and we have a fully functioning blog with a database and you know this doesn't it's not going to win design awards but this is certainly functional right that's uh that's pretty impressive i can i can see the appeal of this yep so the next place that we could go um probably where we're at now with time we won't build out the contact form but if you follow the tutorial basically what happens is it walks you through creating a contact form that um is like name email and a message and you you set some validation and um if you if you open your thing all the way so you can kind of see that the sidebar oh sidebar got it yeah so check out the left we have done everything up to side quests i think so yeah so then you have routing params and that's where you can get into figuring out how to um do your your linking to your to your different pages that are created from your blog posts and then you have everyone's favorite thing to build we make lots of jokes about forms here and um so this will walk you through how to create a contact form we use react hook form as like the form layer underneath because they decide it was the most form shaped of all the forms that were available yeah i have no i have no idea why they picked react before but that's like you don't have to use it you can just write straight html forms if you if you want to but you get like a lot of nice error validation and stuff like that out of the box if you're using right react hook form that makes sense okay well cool so um in the i think we've got about 30 minutes left right so what yeah that's plenty of time to deploy the front and the back end let's do it i'm i'm ready uh so if i want to deploy i'm assuming i need to stop this server and now i have a bunch of code let's open it in vs code it's a little easier to see that way um so here i have all of this and i can't get my there we go um so this is this is everything here and i can just start kind of adding certain things so there are things that i know we need like if i want to add my web folder right and then hold on oh so there's there's just a command that you that you need to enter that's going to set up all your deployment come on don't don't really yeah all right okay all right redwood now what yarn redwood generate deploy netlify okay let's get crayon netlify.tommel okay so check that out uh let's go up here number five.tamil and so it gives you your command publishes to a dist like very very standard kind of like build that you're gonna do on netlify gotcha okay and so now you're going to want to actually commit this and get this all into a repo your whole project exactly the way it is right now and just all of it actually um there's one more thing we got but let's just do this now go to your schema.prisma okay and this is where we have flip sql light to postgres got it and then that should be all the configuration we need to do yeah bingo bango bingo bango bongo all right now just get that get that sucker up on a repo get your netlify connected to it and you'll deploy it and it'll have all your build commands there and um yeah that should be fairly really easy to do okay um what where you're asking their ben will this prevent people from going which route there there's a lot to talk about in terms of deployment so um if we're asking about like other ways to deploy then we can definitely get into that new going to the new post creation route oh no i don't think it will so i think i i think when we deploy this y'all control the heck out of us uh well we're gonna we're gonna set up an actual database that's gonna have an environmental variable that we're gonna link up to so if if we hire that then they can't troll us okay so i'm going to github repo create learn with jason i switched over to the actual gh cli as opposed to hub and i'm still learning it so i think this works let's find out yeah this is where the most public schedule for error comes in when i'm doing stuff like this live done okay so now i can get push upstream origin main good good and that's the wrong tab you're not helping here we go all right so this is the this is the code that's up and running here and now it didn't it configured for netlife deployment but it did not deploy to notify is that correct correct now we need to actually go into our netlify account and link the repo okay and so i can do that uh also from a command i have a netify account yeah so i'm going to nullify init and we want to create and configure a new site i'll put it on my team and we'll call this let's learn redwood js if i've never done this from the command line before i always just go to their their dashboard okay and now it's gonna get overridden by um by everything but i'm just gonna go ahead and type that one in to make sure it doesn't explode on us okay so now that we've got that open in the right window always the wrong window here over here this is the one um so now we've got our site building but we're missing that database url that uh so this is going to fail yes well it will so it'll jen it's not going to fail it's going to generate our page and it's going to give us an error because our cell knows how to do error handling okay all right i'll take that so your front end is still going to work it's just not going to render any posts but what we want to do now is uh do you have a heroku account i do yeah so we'll get create a heroku and just provision a postgres database on the free tier okay let's see how quickly i can get into heroku um let me pull this off screen actually i think i have it logged in over here yes i do so i'm just gonna pull over this tab and we're going to create a new app okay and what do i need anything else here so now you're going to go to resources this is all fine you don't need to touch any of that okay and then uh find more add-ons on the right is it the postgres here postgres yeah that's the one free so we can set this up on a free now the limitation with a free postgres is like 10 000 records so for a lot of folks that'll be enough um depending on what you're planning to use this for uh i know that because i just hit that limit on another account that's fine yeah this is going along with this whole kind of like serverless ideas that everything starts on the free tier and it's only once you start hitting a certain limitation of usage you actually start getting do you actually start getting charged and for anyone who's just like building these projects it's just trying to like learn the stuff or get things spun up it's like you're never gonna hit a limit and then for people who are even building like companies with this like it's just if they architect it correctly they can get a lot for like really really cheap as well now i need to pull some settings right so i'm going to do this off screen yeah you're going to want to grab the environmental variables i don't think you don't have to actually go into this part this is still going to be in your regular heroku dashboard not really your postgres dashboard and then it'll be under settings i think settings and then yeah so then you'll see that's where you want to take off screen where you're going to reveal your config variables and then you're going to grab that and plug it into your environmental variables in netlify got it so yeah yeah and this is the part that failed right it said yep oh oh yeah because we don't have got it all right so then i'm going to come back here go to my site settings and then we'll pull up the environment variables and then let's see is my thingy working it is so i'm going to drop that in here and we'll go database url right that was what we called that i believe so yes so i'm going to save that and now we can just start it again re-trigger the build all right so well that's basically done so i'll come out here instead and let's trigger a new deploy and then once that's done that should be it okay you did everything correctly used to also have to set like the flavor of linux that it was because like now if i had some like weird thing or it was like red hat linux or some other version of linux and that was fixed in the most recent version of prism so you have to worry about that anymore which is great because like worrying about flavors of linux is like the least jam stacked thing i could ever think of yeah and and just to to repeat this for anybody who who is wondering how you would do this with roku uh once i created this database if i click this button it just gives me it's there's an environment variable called database url and then a value i just copy pasted that value over to netlify that's so that's all we need from heroku is is that step we went to resources we searched for postgres here got heroku postgres went to settings clicked this refill reveal config fares and then we moved that over into our deploy settings on netlify so nice and nice and slick i'm into it um this so i think what happened we didn't wait for netlify to finish the first build so we didn't get the cash from that one for this one so we're waiting for it fresh this time so you know time for coffee i guess someone want to play some elevator music for us thank you nikki guys i make some jokes about the build logs in in my blog post where it's just like blogs logs logs like like blogs watch over you and through you yeah the um the environment variable master is something that sarah drastner put together because generally speaking i find that when something is useful on the internet sarah drazner had a hand in it that's that tends to be like a good rule of thumb yeah that's great so it's a it's a chrome extension it is yeah it's a chrome extension um and ximena posted a link to it so let me grab that link yeah cause that's something i run into doing live streams for sure so that's like going to be very handy yeah but so this is sarah this is the tool it's called netlifymaster you can search for it um i will include a link in the show notes as well uh so all right so we got through no errors this time there's our building command still i think it's still building it's working on our functions yep and that hopefully will help so nice so what we can kind of talk about as this is going on is like other ways to deploy this so uh you know some people know that some people don't tom preston warner was like a very early investor in netlify and has kind of been involved in this whole thing since the beginning and now he's on the board and like redwood and netlify like they're very tightly integrated like redwood was built with netlify as the original deploy target in mind but with that said it's not meant to only work with netlify like obviously lots of people talk about lock-in and like worries about this and sure this is very much about like enabling the ecosystem to like build whatever we want so you can deploy this on for cell just as easily as we have here so see how it says empty because it's not going to carry over it blew away our old database because it was because it was sql lite yeah so now we're going to go back to our posts route in our deployed app and just create some new posts okay so here's chat where you're going to be able to troll us mightily um see this is a redwood js powered blog okay now remember chat keep it pg-13 or else i'm gonna have to take away your fun yeah so yeah you're right i guess they can still troll us here there is an authentication part what up jacks and you can you implement like a login form and um yeah authentication there so this would be the kind of final layer this is the very last part of my my multi-part blog series is explaining the authentication layer and you can also do like magic link you do zero as it says there you can do there's like if you go to cookbooks on the left there's a more complicated our back role-based authentication cookbook so uh this is david t has done a lot of really fantastic work on this so if you want to build out real more sophisticated apps with authentication like there's a lot of stuff in there for you very cool yeah i mean this is this is some pretty powerful stuff right like there's there's a lot of potential here a lot of things that we can build that are very cool and very powerful and i love that this makes it so just quickly approachable right like that's um that's a lot of power i also like turtles wow it's good stuff uh i always appreciate your wholesomeness chat it's it's always it's just good i just like it i like you guys um but yeah okay so i'm into this this is this is fun so from here i think this is probably as good a place as any to stop because we can't go too much further without running out of time so where should someone go if they want to take further steps we've got a list so we've got a link to your first look at redwood.js uh we'll be on the lookout for your next version of that um we've got the tutorial we've got your twitter so i'm going to make sure that everyone goes and follows you i used to have it it was anthony camp with a lowercase a like camel case but i recently learned the term screaming snake case screaming snake case that is one of my favorites yeah i did i actually did some screaming snake case fan art hold on one second i would find my uh on here from syntax fm they mentioned it like a week or two ago this is my screaming snake case fan art that i did um but yeah so okay so we've got uh we've got your twitter where else should we go where where's a good oh sorry you did a whole two it's like where my right where my writing really is so it's it's linked on my twitter but it's also it's the same handle ajc web dev it's all this i got the same handle everywhere okay okay so here is a collection of writing um yeah and so you'll find like you know 20 or so articles about like graphql and redwood and all this kind of stuff but i've written like stuff about svelter and stuff about next i've written about like you know the cloudflare durable objects i mean all sorts of stuff very very cool well yeah so i mean this is this is wonderful like i feel like this is a good uh a good testament to the power of redwood.js that we finished 15 minutes early and we built a lot we we created a postgres database we hooked that up to a website we configured prisma to act as an orm over our postgres database to give us a typescript auto completing like graphql api to use we were able to stand up routing we were able to get our pages configured we were able to to create blogs to create an uh a ui admin for creating our blog post we were able to pull those blog posts and write a custom display logic for it and we were able to deploy all of that to nutlify and like that's a lot of work that's a huge amount of stuff that we were able to accomplish in a very short window and i think the real testament is that it is hopefully understandable at every point along that journey what you're doing and why you're doing it and how it fits into the larger picture that was what really like got me so fired up about this is that it made sense to me in a way that like learning all this other modern web development stuff like didn't like wasn't clicking i couldn't quite figure out how to fit the pieces together in a way that would like actually get the freaking thing to just deploy and work and so like having getting to be brought along on this journey of this thing being built in a way where you're not just copy pasting stuff like you actually understand what the code is doing and you know people are going to hit different limitations in terms of that understanding that based on how well they know things like graphql or github or netlify or the command line itself so it's it's not set up for someone going from totally from zero but as someone starting almost from zero yeah well and and i think like you know redwood is is not going to be everybody's speed because it falls on a spectrum of letting decisions get made for you so that you can be quickly productive or making all of your own decisions so that you have a deep rooted understanding of what's going on and we all fall somewhere on that spectrum you know and redwood is not by any means the most prescriptive option it's just further on that spectrum than other choices out there um but what i think is really interesting about this is is you know the it gets introduced on the spectrum depending on the project that you're going to do you know if i'm if i'm working with a team and that team is not a group that i've had a lot of time to like build a shared language of how we write code or how we think about data or anything like that something like redwood is a great way to immediately create shared language we know that you're going to create cells to interact with data we know that you're going to use the generate command to build new code we know that the router is going to work like this there are a lot of opinions that have already been established it's sort of like having a really strong eslint file it's um you know you're saying we've decided as a team that we're going to do things like this and then you don't need a code cop to go in and and police that because the tools are making those decisions for you that can create a lot of really good team unity um you know if you're an individual then it's just down to taste do i do i want to have to think about how this is constructed is that fun for me am i learning or am i trying to get something done and i just want to ship it really fast and depending on you know where you land on the spectrum for today's given project and i'll tell you i i land all across that spectrum depending on the day of the week and how busy i am [Laughter] and i can definitely see this being a really valuable tool when we just need to get something out the door when we we want something that we know is gonna work that we know has that error handling that we know is built on tools that are are gonna function well together um that seems like a really strong this seems like a great starting place so uh with that being said do you have any any parting words for the chat today um just like thanks for having me thanks for giving me a chance to like kind of you know talk about redwood and why i'm like so passionate about it and i really just enjoy like getting introduced people to it and it's really cool getting to introduce you to it because like you're you know very experienced developer you know how all this stuff works so i figured that you would pick up all this stuff like pretty pretty quickly you know it's like for someone like me who's kind of like learning it like i was took me like maybe like a month or two to make it all the way through this this whole this whole tutorial and that's why i wrote the article series as i was going you know so the article series is basically me documenting my journey through doing the tutorial and yeah it was um what i've been able to go back to now to really help me like continue to refine these things like i've i've been kind of like you know rerunning it like i said i'm kind of redoing it and making it compatible with like the current version yeah but um i just recommend people check out the forms and check out the discord like it's a really awesome community like i've had a ton of help from like the core team and um some of that actually isn't gonna be like officially announced until thursday but i can give you like the scoop on is i'm being like invited onto the core team as like a core member now oh cool congratulations yeah um and i just dropped a discord link if you want to join the the discord uh yeah geez this is so that's very cool and i i saw that you're um you're on the hunt for work so you know somebody hire this guy uh but yeah so with that being said make sure that you uh you know a little extra shout out for our captioning today uh provided by white code captioning thank you so much that's made possible by the sponsors network fauna sanity auth0 all of them kicking in some cash to cover the cost of captioning which makes the show more accessible to more people which i very much appreciate um also make sure you take a take a look at the schedule we've got uh nate us review i got view we're not doing an episode this thursday um this this thursday i uh i'm taking it a little easy during the holidays right so i'm not gonna do an episode this thursday but we're back next tuesday with ben hong ben hong just joined my team at netlify he's also a core contributor on vue he is brilliant and funny and we're going to learn a lot uh we're going to do an intro to view three i'm super super pumped api uh we're actually going to do a whole separate episode in january about the composition api so we're going to do two episodes talk about the composition api for you nyc yesterday oh nice nice nice yeah yeah but so we i i'm super pumped about that we've also got emma bastian coming back to the show we are going to uh make fun of her tasting tacos and i'm really looking forward to that i've got a few more that are going to get added to the schedule soon so keep your eyes peeled but definitely mark your calendars remember we have a google calendar that you can join that uh i think is here not there here i don't help i don't know schedule oh my god does anyone remember my i forget what the command is to share the calendar i will whatever we'll we'll find out the twitter command i don't know it's a twitch chat command that i've forgotten um but yes [Laughter] we uh yeah i think we've got a calendar here this is the calendar so let me copy that link address we are going to drop that in here thank you very much the j chaps for finding that for me and i think that's as good a place as any to call it done so anthony thank you again for taking the time to hang out with me today and teach us all about redwood this is a lot of fun chat thank you so much for hanging out it is always a pleasure i love that this is a wholesome chat that we can just leave an unsecured database open to and nobody does anything terrible um stay tuned we're gonna raid and we will see you next time

Channel: Jason Lengstorf

Views: 1,933

Rating: 4.8545456 out of 5

Keywords: Redwood, RedwoodJS, JavaScript, JS, Jamstack, API, Markdown, Learn With Jason, Anthony Campolo

Id: o9JVHmYvs9Q

Length: 77min 8sec (4628 seconds)

Published: Wed Dec 02 2020