Monday, Monday, Monday, open wide dev fans, get ready to stuff your face with JavaScript, CSS, Node module, barbecue tip, kit, workflow, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest, web development treats, coming in hot, here is Wes, Maracuda, Boss, and Scott El Toro Loco, Tolinski. Welcome to Syntax on this Monday, hasty treat, we're going to be talking about Keystone.js, and let me tell you something, I know very little about Keystone.js, but Wes has been using it for a little bit, and I'm going to be asking him some questions, and hopefully I'm going to learn along with you about Keystone.js. My name is Scott Tolinski, I'm a developer from Denver, Colorado, with me as always is the Wes Boss. What's up, everybody?
What's up, what's up? How's it going? It's going good, this is the last episode of 2019, which it's currently December 10 when we're recording this, so not quite, but starting to look forward to Christmas holidays, and getting stoked for that. Yeah, I'm psyched, I'm psyched for everything here, getting the end of the year juice going, and this is one of those topics that I think is going to make me really excited, so Keystone.js, this episode is sponsored by one of our long-time sponsors, very fitting to end the year out, with FreshBooks, and FreshBooks is going to be the service that you use to keep track of all of your invoices, payments, and all that stuff after you just built the site of your client's dreams with Keystone.js.
So do you want to talk a little bit more about FreshBooks, Wes? Yes, FreshBooks is cloud accounting software, I'm going to be using it today, actually, every now and then I have what is called a money day, where I go through my FreshBooks and go through all unpaid invoices and see have they been paid, because sometimes when I get a check in the mail, I don't mark it as paid or whatever, sometimes they haven't been paid, you've got to chase those people, or you can use the FreshBooks to auto-send those things. And then I also am going to be wrapping up my 2019 expenses pretty soon, make sure I get all of those, log in as well, and just make sure that that is all in good shape for going forward, and it's always a very quick thing for me to do that, because the FreshBooks UI is very intuitive, any problems that I have, one year, I inputted a bunch of expenses as, or sorry, HST, I imported it as lowercase HST, and some of them I inputted as uppercase HST, and for some reason they were separate, and I was like, email FreshBooks, I was like, hey, this is showing me two different types of tax, and like an hour later, they had run a script that updated, I'm sure that's fixed by now, but their support is fantastic for that kind of thing. So check it out, freshbooks.com forward slash syntax for a 30-day unrestricted free trial, and use Syntax in the How Did You Hear About It section that will keep them sponsoring well into 2020.
Thanks so much for FreshBooks for sponsoring. All right, Keystone, I may just give a little bit of backstory on this, so I am currently re-recording my advanced React course, and my current advanced React course uses Prisma, which is a GraphQL server, where you give it your schema, and it will kick out this huge GraphQL API, and it's really good. However, Prisma is working on Prisma 2 right now, and it's not going to be ready by the time I want to record. So it's not that I don't like Prisma, it's just that it just doesn't line up right now, and I'm a big fan of Prisma and everything they have, so I'm just going through some of the different options out there.
I've tried out Hasura, a lot of people are telling me to check out Nest.js, however, one of the things that I've just had my eyes on recently is this thing called Keystone.js, which is sort of maybe even a Rails for JavaScript, might I say? It's a GraphQL based, I'll talk about what it is, but basically, Keystone.js, I've been talking about it for a while, it's finally here, it's pretty stable, and I'm not going to say I'm re-recording my advanced React course with it yet, because I'm still evaluating it. Didn't you just say that? I mean, you just said that already.
Well, I'm re-recording it, but I haven't chosen Keystone as, it's likely going to be Keystone, but I haven't totally chosen that just yet, because I haven't gone through absolutely everything yet. I've worked probably four days in a row now converting the app over to Keystone, and it's going very smoothly, surprisingly very easy to move things over from Prisma. All of the resolvers get moved over very smoothly, it's just basically changing words and stuff like that. So, do you have something to say?
Yeah, no, I think that's where we want to go, it's the very first high level. I know you said it's sort of like a, it's sort of like a, almost like a Rails for Node and JavaScript. I guess I want to know a little bit about, like, what exactly is Keystone? Is it a build tool?
Is it a framework? Like, where does it fit? Like, what is it actually doing? Yeah, so I would say it's in the Headless CMS camp, except that you host it yourself, and it comes with a lot of stuff.
So, it's basically two things. It's a GraphQL server, so the way that it works is that you boot up a Keystone instance, and you create these things that are called lists. Maybe you can think of them, your schema as, like, data types. So, I'm creating users, I'm creating items, I'm creating carts, I'm creating charges, all these different types, and they're all related to each other.
And what happens with Keystone is that you create all these different types, you create all the different fields in those types. I'll talk about that more in just a bit. And then what that does is it spits out a whole GraphQL API for all of your CRUD operations, create, read, update, delete, based on all that. So, that's one part of it, and that's what Prisma does as well.
Prisma, you give your schema, it kicks out an entire GraphQL API. The other part of Keystone is it gives you a GUI, so you can log in, it has accounts and auth baked into it, so you don't have to write that yourself. Or it's not baked in, but they ship one with it, you can build your own if you like as well. And then they give you this admin GUI, where you can log in, very much like a WordPress.
You can log in, you can see all of your data types, you can add, update, delete, reorder, do relationships, all of those things like that. And that admin GUI is built in React. But that's not to say that Keystone is a React thing, because the third part of building a website, you have your backend, you have your admin GUI, and then you also have your actual application, your frontend, right? And the frontend is up to you.
You can use it with absolutely anything. They have stuff out of the box for using Nuxt with Vue. You can use a static React app, or you can use Next.js. I'm personally not using any of those right now.
I'm just, I have my Next app totally separate. There's no reason behind that other than that's how I built my last one, and I'm just running that app, and I'm just trying to convert it over at the time. So, it's a GraphQL server, and an admin GUI with accounts and auth baked in. Cool.
So, okay. So, you give it your schema, and it creates the operations, right? Your mutations, your create update ability. Can you get in there, and let's say you wanted to customize that stuff.
Is that stuff just automatically written for you, and you don't even think about it? Or do you still have to go in and write the mutations and all that yourself? Yeah. So, out of the box, just like Prisma, it gives you crowd operations for every type.
So, you can create types. You can update types. You can read them, and you can delete them. However, there are situations where you want custom logic.
When you create something, you want custom logic. Or when you update or delete something, you want some custom logic. So, for example, when somebody checks out, I need to create an order. And that needs to first ping the Stripe API with their credit card number or the Stripe token and then charge their actual token, right?
Like, there's a lot more logic. And when you get into custom logic, there's two ways to go about it. You can either write your own resolver, and that's pretty cool. So, you can, in addition to all of the API they give you, you can create your own API surface that is custom resolvers for queries and mutations.
Cool. Yeah. And then, in that case, you can charge the Stripe API. And then they also have this other thing called hooks, which have nothing to do with React hooks.
You can think of them as, you know how WordPress has these different filters where you can jump in at any point of the lifecycle? Yeah. It's like a lifecycle hook. Yeah.
Yeah. So, you can, when the data is received, before it's validated, after it's validated, during before creation and after creation. So, you can jump in at any one of these different points and massage the data, validate the data, change the data, do whatever it is you need to do, and then pass it along to the next step. So, I am using both of those right now.
And at some point, you need to do custom validation. You can jump in with a hook. And then, at other points, if you want to, what is the one that I'm doing right now? Add to cart.
So, I created a custom mutation that's called add to cart that you ping it with an API, and that, under the hood, that will then create a cart item and assign the user that is currently logged in and then keep going. I could probably do it with hooks. I'm going to have it reviewed by the folks at Thinkmill, some lovely Australians, by the way. They are a company out from Australia that does a lot of this keystone stuff, and they built this thing.
And I've just been asking them dozens of questions. And then, in the middle of the night, Australians wake up and answer my questions. That's so funny. So, yeah, there's two different ways to go about it, which I like, because out of the box, it just works.
And then, if you need to do, like, an extra 10% of customization, you can either write your own endpoint resolvers, or you use one of these hooks to jump in and do what you want. That's pretty sweet, because I've always done it myself. So, every GraphQL API I've ever written, I haven't used Prisma myself. And so, when I do it, I create the query, I create the mutation, I have to go and write the query, I have to go and write the mutation.
Anytime I add a new data type, I write the schema, I write the schema. It's like, you have to do the same things over and over and over again. I feel like this is one step closer to, dare I say, like, the Drupal past that I actually enjoyed, like, the parts of Drupal that I actually enjoyed. So, it's pretty cool looking.
Yeah, I think the reason why I really like it is because it can be a bit of a bummer with all of the overhead of doing it from scratch or using a lower-level solution. There's certainly benefits to using a lower-level solution like Azure or Prisma, because they just give you the APIs, and it's up to you to build everything else on top of that. A lot of people need that, but certainly a lot of apps are just doing the same thing. We've got a whole bunch of data, it's related to each other, and I want to perform CRUD operations on it, and I want to lock it down via authentication and different things like that.
And this just seems much easier and much more quicker to get up and running, and I think that's going to be good for my course, because it gives you that immediate, like, oh, I'm actually building something. Oh, I can see how I can apply this to something else. Whereas, sometimes when there's too much setup and too much boilerplate, you see this with Reux as well. People just go, ugh, this is, ugh, why is there so much setup?
And every time I want to create a new data type, you're like, ugh, whereas like this, you just create a new data type, and then it gives you all the API and everything for you immediately. Yeah, and that's so funny, because I look at these docs, and I think, oh, okay, look, I'll look at all this code you've got to write to work with this thing, right? Here's a specialized code you've got to write for Keystone.js. But then the more I think about it, the amount of code that it's saving you is so substantial to do the same boring stuff you've got to do every time.
And I'm not a huge fan of boilerplate code, as you know, I resisted Redux for a long time because of it. So yeah, no, this is pretty sweet. One more thing I have is, I think the benefit that you're saying there is because when you define your types, you give it what's called a field type. You can give it a field type of a color, or text, or a password, or a relationship, or a select, or a slug, or there's like literally 20 different field types, and then you can go make your own if you want.
And those field types determine a few things. They determine what does the GUI look like on the admin, and then they also determine how does it get saved to the database, and how does it get pulled out of the database, and then they also determine the collaborative one. It just resizes it behind the scenes for you. Indexes and that sort of stuff.
Yeah, yeah, it does both of those things for you, which I really like, because you're the developer, you have to create the backend, you've got to create some sort of a min UI for people to manage this data, and then you also have to create your actual application, which is the front end, and sometimes those, the admin and the app, sometimes those overlap in terms of that, and it allows you to do that. Certainly, when people sell things on the SixFits app in my course, they don't have to log into this admin. You kind of want to do it in the app itself, and you can do that no sweat. If I would have had something like this, this would have been something that I could have written a little tutorials on.
This is the kind of thing that I really, really enjoy. I'm interested in seeing where this goes. Okay, so you would use this at any time that you want to have a full-on application and not have to write the connections, not have to write all those card operations. That was the stuff that I personally really loved for my own, specifically, was that you create a collection, and then you have access to those things.
It's almost CMS-like in a way, but it's not necessarily a CMS. So let's talk about the hosting of this. This is something that's kind of interesting to me. Have you done any work with hosting?
Because that's always one thing that seems to be a bit of a bugger in a lot of platforms is, okay, you've got this application. It's all working. Your front end, your back end, whatever. It all works local host.
How do you host this thing and make it easy? Is there any one-click host for this thing? Because I know you can't push this kind of stuff up to Netlify. Does this work with NowJS?
Is it NowJ? Not Now. It's just Now. Yeah, Now.
So the admin UI and the back end is all bundled into one application, which is great, so you don't have to host two separate apps, and that is a Node app. It's based on Express, and then the database is either a... It's kind of cool. They've sort of abstracted it away from the database.
So I'm obviously using MongoDB, because that's the database I always use, but you can also use it with Nex, K-N-E-X, which is a ORM for SQL databases, if you want to use it with Postgres or MySQL or whatever. And that's great, because all the time people are like, great, but I don't want to use Mongo. I want to use whatever. And you can just...
That was the thing with Meteor, yeah. Yeah. You can just switch out your database layer underneath. They have support for SQL and MongoDB right out of the box, and then I'm sure the community will start building adapters for other types of things.
So there's that. You've got to host your MongoDB somewhere, and I recommend... I used to use MLab. That got bought by MongoDB.
So they have this thing called Atlas. That's probably what I'll use. You can also run it locally. I like Atlas.
Yeah. I know we talked about Atlas before, but Level Up's been on Atlas for a little while. I moved it off Compose just because of the feature set. Yeah.
And between Atlas and the MongoDB Compass application, I really like working with... I like it. I like the chart. I like the graphs.
I like the index alerts. And I was getting this index alert, and I had goofed up one of my indexes, and it really made a huge difference. So I like that they're constantly improving and seem to make it always an improved platform. That's good.
So you can host this thing anywhere you can host a Node app. And one of the things you can do is you can also host your actual application through it. So there's adapters for Next and Nux, like I said. So ideally, you would just ship one app to a server, and it will run the API, the admin, and your actual application all in one go.
And because it's one big Node app, you can host it anywhere you can host. So I would probably reach for DigitalOcean. Unfortunately, I asked them, like, hey, you can't host this thing on Zyte now, can you? Because the thing about Zyte now is that it has to be built in serverless functions, and they don't really host Node apps anymore on Zyte now, which is unfortunate.
That's why you can't host my current advanced React one on Zyte now right now. And I doubt you'll be able to host this thing on Zyte now as well, because it's a Node application, right? That might change. I know that they're looking forward to it.
I'll probably get in touch with them and see if we can somehow get this thing, because I love using now to host things. But they don't like you running an app. They like you building your app with something like Next.js. You certainly could host the front end on now, but the actual backend that connects to MongoDB, I don't think you'll be able to do it.
Heroku, for sure. Linode, for sure. Any of these other things where you just host a regular. Plus, I'm really loving the whole DigitalOcean plus PM2, and I want to make some videos to show people how to host a Node app on DigitalOcean with PM2.
What exactly is PM2? PM2 is this, it's like forever, where you can start multiple apps on your thing, and it will run them and collect all the logs for you, and it's got a really great interface. The only thing it doesn't do is, it doesn't do like port proxying, so you still have to run like an Nginx config to proxy like forward slash admin or forward slash something too. I'm using that on my own server right now.
This looks cool. I've been a big fan of it. PM2. Yeah.
We should do a little show on it. Ooh, add it to the list. I like this PM2. That's pretty sweet.
All right, let's talk a little bit about the shortcomings of this, because I think we get enough of the benefits here. It seems like it's going to save you some time. It's going to save you some code and redundant things. It's going to save you some boilerplate.
It makes all that stuff a little bit easier. What are some of the things that you've experienced so far that maybe aren't your favorite aspects of Keystone? Yeah, a couple things. There's no type script, not support, but they don't.
don't have a good TypeScript story for maybe I should back up so with a good GraphQL server like Prisma if you're writing in TypeScript or even if you have a VS Code plugin for regular JavaScript as you're typing your queries it will autocomplete them and suggest fields for you much like when you're typing in the graphical or GraphQL playground um there's no good there's nothing like that yet um in this which is a bit of a bummer for it because people like to have that that's the whole point of or not the whole point but it's a big part of GraphQL is that it's typed and that you can get these really nice autocompletions and that it will tell you as you type if you type the field wrong right so that's a bit of a bummer yeah that's like one of the really great things about TypeScript is those autocompletions totally so um we'll see if something around that pops up they're certainly talking about it on if you look on GitHub um the authentication I haven't dove into the auth all that much just yet they allow you to lock down the auth per list which is like a type like an item or per field which is like a item dot name or item dot quantity so if you want to lock that down based on people's permissions um you can do that I know that they've told me they are going to simplify it a little bit because certainly with auth you don't want to feel like oh this is probably what I want like you don't want to accidentally give somebody permission the wrong way so I haven't dove too much into it but it does seem a little bit complicated at the moment I bet that will get better in the future other things I didn't talk about was plugins so they have a bunch of plugins that will help you they have one called Apollo Helper so one of the problems I have in my current course is that if you add an item or delete an item the pagination is all off by one so like page two needs to be revalidated and the only solution Apollo has told me is you have to nuke the cache which is you can delete everything from the cache which sucks because then you have to go and refetch it from the network so one of the plugins that Keystone gives you is the ability to nuke just a certain type meaning that like you add an item you can you can nuke all of the items from the cache and then it'll refetch them so you and then you're not accidentally deleting the cart or the user or any of the other information that's still good I think that Apollo client three is a three three version they're doing uh they just announced they're gonna be giving you a ton more control over the cache oh good client three so I wonder if that's gonna make things a little bit easier there too I haven't looked into it too much but there was the uh GraphQL summit there was a little bit about that oh good okay that's good um there's a something I haven't looked into which is uh they have an email plugin so if you want to write your emails in JSX you'll compile them you can use something like MJML or whatnot so that's pretty cool they also have plugins for like google and facebook login so if you don't want to use username and password to login you want to sign in with twitter or github you can absolutely do that as well yeah man I want to use this now yeah it's I'm very much like using it and I'm like this is nice like up and running and it's not like so so keystone-y and what I'm by that is that yeah I just basically copied my prisma types and pasted them into this and then I just changed the syntax and then I took all of my mutations in Apollo and I just had to rename them from something like capital it used to be lowercase items now it's capital I items like very very minimal and I was like oh good like this is still GraphQL at the end of the day none of the stuff is specialized where it's not going to and you're going to be able to take your skills that you learn in Keystone and apply them to something else if that's not what you end up using yeah I hope you don't mind I might do a course on this too yeah it's really neat it's really neat yeah big fan of it cool well this is the Keystone JS you'll want to check it out trust me I think this is pretty cool and definitely something worth your time uh this is available at keystonejs.com if you want to learn more version 5 is fairly new right when did this come out? Keystone 5 came out in the summer um before is actually I initially started like five years six years ago on Keystone oh so you've had an eye on this yeah um and I don't know I don't know why I migrated but I really liked it at the time and it was just because I love Express I love Node I love React like these are this is all of my things and I just feel so productive in this thing and certainly there's a little shortcomings but it also feels like really stable as well the folks that built it are building client apps on it I don't feel like it's going to change out from under me like the Prisma stuff is amazing but Prisma went from GraphQL to Prisma and then they changed the schema and now Prisma 2 is coming out and like they're certainly doing that because GraphQL is quick moving yeah and that's the industry they're trying they're trying to like figure out the best way to do GraphQL but as a tutorial creator who they care about but it's not their end game to please me and you it just changes quick yeah and I really liked how easy GraphQL was yeah I was sort of wishing that that was the direction but you know yeah I think that with GraphQL it wasn't getting the like enterprise or like real applications I think a lot of people built toys on it and then when it came to like even like the serverless function you had to copy paste it into their UI like there was no like path for writing your serverless functions locally and deploying so it's unfortunate but that's that's the industry which is if you take on something super early like GraphQL was like two years ago if you take on GraphQL two years ago it's certainly gonna change we're still all figuring this stuff out yeah totally cool well I learned quite a bit about Keystone this is getting tasty oh it's only 28 minutes these things go to 30 all right we're allowed yeah this isn't that tasty we're allowed we're good but Keystone JS could be the Keystone to your next project might be mine who knows I'm gonna try it out sounds fun all right yeah cool all right well I don't have anything else I'm excited to dive into this thank you guys no problem talk to you later we will catch you in 2020 we're gonna be in the future I can't wait for that 2020 uh with 2020 vision we're gonna be crushing it next year like I don't know a nutcracker or something but let's uh let's uh sign off the air yeah all right peace peace head on over to syntax.fm for your full archive of all of our shows and don't forget to subscribe in your podcast player or drop a review if you like this show you