Build and Deploy a Backend With Fastify & Platformatic

Rate this content

Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:

- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (

- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow ( 

In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.

104 min
07 Jun, 2023


Sign in or register to post your comment.

AI Generated Video Summary

Welcome to the platformatic workshop where you can create open API and graphical schema from your database without coding. The generator creates config files and types for the database representation. GraphiQL allows you to query the database and run subscriptions for real-time updates. The workshop covers creating relations, adding likes to entities, and implementing custom business logic. The back-end can be deployed to Platformatic Cloud, and there is support for API authentication and monitoring metrics. The workshop also introduces Dynamic Workspaces, SQLite benefits, and Platformatic Runtime for service composition.

1. Introduction to Platformatic Workshop

Short description:

Welcome to the platformatic workshop. We have a small crowd today, so feel free to ask questions. The slides and material are available at PlatformaticDB is a tool that allows you to create open API and graphical schema from your database without coding. Make sure you are running node.js greater than 18.18.0. To get started, clone the repo or follow the slides. The workshop is incremental, and we will build an application to store and like movies. Run the command 'create platformatic' to get started.

Hi everybody. Welcome to this nice workshop about platformatic. And here you go. We have just a small crowd. So I kindly ask, if possible, if you can turn on the camera, otherwise I'm just talking to the wall. And I really don't want to talk to the wall for three hours or two or whatever it is. So talking to the wall is not nice. Thank you Jaroslav, Thank you Yusem but he's booting up and thank you Gianmarco.

Hello. Hi folks. It seems that we have a small crowd today, so happy days. And you can do things step by step, so that there is no point or no problem whatsoever in doing this stuff. And maybe a few more people are going to join in a few moments, but we'll see. Okay, so feel free to ask me questions, interrupt me anytime, hopefully if we get it done earlier than that. We'll try, okay. And that's it!

Okay? So first thing first, you can find these URLs, these slides at this URL. You will see it in here, So you could take this thing and just copy it up. And I'm pasting there in the chat, too, so here you go. And you can check it out there. So everything, all the material is public, so you can just check it out.

So what is PlatformaticDB? Well, PlatformaticDB is the first tool that we shaped as part of platformatic. And it's a tool that enables you to create both open API and graphical schema from your database without having to write any code. And you can just use Node.js to customize it and so on and so forth. So, yeah, let's get into it. First thing's first, please do a safety check that you are running node.js greater than 18.18.0. So how do you do that? You do, you go, we can go back in our terminal and wait a second, yeah, close. And we can go back in our terminal and we can do node-diminusv and you should be able to get that value, something like that. Please let me know if you're stuck.

So what do we do to get started, you can go and clone this repo. Now if you're following the slide you can just click this nice button here and you can go back in your route and just pass this the topic and just run the command. Run the command. So these these things contain both the steps. It contains both the steps and the slides. So if we go and open this up you can find that we have these slides which are these ones that we just talked and those are also the value steps for setting up our application. Does it make sense? Any problem with using Visual Studio code? I do have many. I'm using Vim. I've never exited so sorry. Still the same instance. The workshop is incremental. So every step that you can find will see that you have 0-1, 0-2, 0-3, so on and so forth. Each one of those steps is actually straight forward and based upon the previous one. So you can jump through steps if you want to. Very important. If you don't need to do anything you can just do some stuff. What we're going to build will be a small application that will enable you to do some sort of sorts of APIs. Sorry an application that will enable you to store your movies and then like them. Very simple. First thing we copy these bits here and we run create platformatic. So how do we do that? Well we can run this code, we can cd and we can run create platformatic.

2. Platformatic Generator and Generated Files

Short description:

The generator creates a platformatic db.json config file with autocompletion. It also generates a plugin file and types for the database representation. These types provide autocompletion and are loaded via a global.tls file. Running the command 'Cd movie quotes apps mpm start' generates an open API documentation and graphical interface. We can interact with the API using various HTTP methods and query the database using GraphiQL. Environment variables are stored in the .env.sample file, which should be committed instead of the .env file.

Note that this says npx create platformatic latest at latest what you could do also is, do npm create space platformatic at latest. The two things are identical.

Okay and then it prompts some questions and here are some of the answers that we are going to do. We are picking DB, we are creating in this folder. We want to create a default migration, create a plugin maybe. Yes, and don't you know TypeScript port and we want to run npm install. Then we want to apply the default migrations and we also generate the types. Come on. And we skip the GitHub actions, we are not going to create a repo for this. Okay.

Were you able to run the generator? Yes, I was able. I just wanted to ask what are the migrations, what are these generated types if you're not using TypeScript? Oh, yes. I'll show that in a moment. Okay. Let me show you. So first of all, what files it generated is for us. So it generated us a platformatic db.json. This is our config file. Note that our config file is, sorry, it's, you see that it has full autocompletion. So you will see, you will be able to autocomplete the values with Visual Studio Code 2 using the same language server. It uses environment variables to fill things in, so it's automatically completed. What are the types? So you see here that it has a plugin file, which is essentially these, which is a Fastify plugin. We'll talk about that in a moment. The types can then be used for the representation of our database, so in fact it includes all the properties. So for example you can see that you have a movie here has an idea in the title, which is the content of the default migration. So it automatically creates for each table, it automatically creates an interface for each one of our table so that you can avoid some time. Does it make sense? Yeah, yes, thank you. And all of those are loaded via this global.tls file and which then is loaded here as part of the plugin. So you could then use those types in this JavaScript file and we'll talk about that in a moment. Essentially they're there to provide autocompletion. Do you like autocompletion? Who doesn't like autocompletion?

So let's start the thing. What we can do? Cd movie quotes apps mpm start. What has this generated us? It has generated us an open API documentation and graphical. We can open up those two links. Taking a look at the first one, you can see that it has get, post, put, and all the things that we would expect it to be. These are essentially just normal stuff, the normal things that you can imagine. We can run a SlashRequest and you see it's an empty array. We could potentially put post. Where is it? Post. Post in there a movie, like for example Harry Potter. And it has stored it with ID 1. And then if we go back to the top and run the query again, you will see that we got Harry Potter. Then we could actually do the same using GraphiQL. So for example, you could do a query like movies and title, and it works the same. Hey, we are at this URL right now. And you can follow the slides earlier than that. Note that we have here, we have the environment variables, OK? Where is platformatic fill in those environment variables from? We have two files here. One is.env, one is.env.sample. Do not commit your.env file but commit your.env.sample file. Why you need to commit that one? Because this is typically personal information.


Committing Secrets and GraphiQL Subscriptions

Short description:

You should never commit secrets in your Git repo. It's important to limit your application's access to environment variables. With GraphiQL, you can perform various actions like getting movies by ID, getting all movies, counting movies, and more. You can also run a subscription to receive real-time updates. By default, the subscription returns the last 10 records to prevent system crashes. To create a new table, revert the migration, create the 'movies' table, and update the 'DROP TABLE' command. Finally, run the migration.

And you don't want to commit secrets in your Git repo, right, or do you? Do you commit secrets on the Git repo? After we've done that, you can see that these are replaced in here so we can customize things. Wait. A note of color here is that you need these PLT and the score for most of the keys, while some exceptions are configurable. Plus, the reason why is, especially when you're building an application, you actually don't really want to have it receiving all your environment variable and providing a limitation like that will ensure that your config does not, your application does not, does not have access to stuff that you shouldn't have. So it's actually very important. Sorry about this. I need a coffee.

And then, what you can do with graphical is that you have a few things available, again. You can get the movie by ID, you can get all the movies, count the movies, and so on and so forth. Stuff that I should probably show is that what you could do is, for example, that you can run a subscription, and I want all the movie saved, and for them I want the title, the ID, and the, Ooh, sorry. Title. And now if you run this, you will see that this stays forever open. And here when we store Star Wars. Where did it? Oh here. It is going to crash. Where, how? Oh no. Yeah. Sorry. Oh, these are get, that's the point. Post and this is Star Wars. And if I execute correctly, now you can see that in, in GraphQL, the subscription has been updated with the latest value. Just so that to prove you that there is the real class of real-time application that is possible that we can do. Does it make sense? Cool. Okay. Question. Yeah. So it shows only the latest record, not all of them. Not all movies have been shown, right? So it must, Yes, this is a good question. So by default, it returns the last 10. Why it's limited because otherwise somebody can crash your system. So, you don't really want to return all of them. Not for you. Got it. What we can do now is we can reverse things and just do something different. So first thing first, we are going to revert the migration. Then, yeah, this is probably helpful. Okay. Then what we do is that we want to create this table here. So, we copy this. And we go in. And, we go in… movies? Sorry. Why? Yes, sorry, I'm lost. Oh, yeah, migrations. Okay. Here, we are doing this CREATE TABLE. Now, instead of that, we are going to create movies. Then, we do… We'll need to update also the… DROP TABLE words. Okay. Now, it's time to run it. Okay.

Jaeger UI and Subscriptions

Short description:

In the Jaeger UI, we can now see the quotes. Are there multiple subscriptions? The platform automatically creates a subscription for each entity. However, you may need to do some extension work to customize it. I created a subscription called 'quotes saved'. When running it, the code crashed due to a change. After reloading, the subscription code is saved with some text. You can run it and perform a post request.

As you can see now, in our Jaeger UI, we now have… Oh, didn't I? Sorry, I thought I did. Okay. Yeah, this is empty, okay. So, if I reload this, yeah, no operation defined. Then if I go in here, saving quotes and saving... Perfect. Okay. So now if I reload this up, you will see that we have the quotes. Cool.

Any questions so far? I don't know, I'm not seeing questions and not seeing nothing. It's actually very hard. Matthew, was the subscription automatically created? Like are there more than one? Or does it do the saved one for each entity? You. So this description creates a website connection to the server. And they you can't create as many. Yes, but normally the browser will just create one. That's what you want to do. So I guess I'm very precious in the browser. Right. So the platform creates one automatically for each entity called like you had movie saved as a subscription name that was automatically created just from introspecting the database. No, not at the moment, you will probably need to do some extension work to make things work that way. Yes. Does it make sense? Can you repeat the question? Actually, maybe I give you the wrong answer. Sorry. I didn't see you create the subscription. So I assume that it was done automatically. Like, yeah, no, I didn't. I created this subscription. So here we have this subscription. I can run it. Oh, yeah, it is crushed. Ouch, I did crash. Oh, yeah, you did crash because. Oh, yeah, it's not defined because we change it. OK, so this is quotes saved. So let's reload it. So here we have a subscription code saved, which is with some text. OK. This is a quote. I can run this. Right. Yep. Then I can do a post. And look, if you open it up. We can look at the inspector. Let's run it, OK, so you see that there is a WebSocket happening. OK. Now I can here I could do a post. And I can say. I'm skipping the. OK.

Creating Subscriptions and Relations

Short description:

We automatically create subscriptions for you, which can be disabled if desired. Let's create a relation with this contact and perform the necessary migrations. After applying the migrations, we can see the generated types and the updated global documentation. Now, let's focus on the graphical interface and observe the presence of both quotes and movies. Let's create a movie and save it as 'The Wizard of Oz'. Finally, let's examine the quote 'Life is all about facing your fears challenge.'

I save this stuff. I have received that as a payload. Yeah, so it's automatically creating these subscriptions. You don't do any code. No. It's automatically no. You're not you don't need to create any subscription. No, this is automatically. Those are automatically available for you. You can disable them if you want to. We can talk a little bit, how those are implemented internally. Okay. If you want to later. And yeah.

So now we are creating a relation. So what you can do is creating a relation with this contact so we could do and the acts platform attic. DB migrations. Create a fine. Okay, it is created two things, they do and undo files. So we can go in migrations. And in do we washed the stuff. And then here we post the other. I will be make sense. Okay. So we can do NPS platform at the dB migrations. Apply. Okay. You can see the to skate the two types and regenerated the global doc. Yes. So if you look at it. Okay, and here we go into the movie quotes up. And we have the types which had the movie and our, our queue. So let's look at our, our graphical our drugger first. You can see that we have quotes, but then now we have also movies. And know that we have both quotes like ID, movies and movies ID quotes. Does it make sense. Cool.

So So what we want is we want to create a movie. So here we go in here and yes, this is title. That store. Oh, it's not title. Maybe name. Here you go. Okay, we have saved the Wizard of Oz as a movie. Let me look at the quote. And life is all about you facing your fears challenge. Okay. And. What we can do is run this. What we can do is we could say the quote.

Graphical Example and Seed Database

Short description:

We can save a quote with an idea and title, along with a movie ID. We can also retrieve the name and title of a movie, along with its quotes. It's important to avoid requesting the same information multiple times, as it can lead to issues. Additionally, we can generate a GraphQL schema using 'npm run platformatic schema'. The seed database is useful for creating standard data in the system.

Okay, and we go in graphical for example. And we copy this stuff up. And we save a quote that's in the idea and title and it has a movie of one which is our secret of heart. I think. Let me check. No there is somebody. Okay. I Gabriel. Hello everyone. Yeah. With the device is 1.

Okay. Then. Okay. Okay. So now what you could do is something like that. So, a movie as a name. And the title. Sorry, I made a name, but it has some quotes and then you could do the end. Title. Actually, the movie sorry, it's relations and do we want the ID and the title. The name of the movie. And we run it and as you can see I am. Made a mistake, actually. Oh yes, of course, so you see, so we have movies name quotes ID movie ID movie. Okay, so it's going for a full circle on it and we could just put quote quote. So you can see that you can actually shoot yourself in the foot very easily because if you're asking for the same thing multiple times, it might be problematic for you. Right. OK, oh. Great. OK. So you can see here that we have all of it. You could also generate as a GraphQL scheme automatically very easy to run mpx, but traumatic to be schema. GraphQL to generate your SDL that you can use for whatever reason. Now. Let's take a look at the seed database, because the seed is actually very useful to create a set of standard data in your system that otherwise we'll be able to create. You will need to do run time checks and stuff to create so. Really better to just do it now. So what we do we copy the quote and the movie. And then we run the thing. Right. Cool. Let's do it. Copy it up. c.js, we save this stuff. OK.. oh tällö We need some code here. c. OK.. And then in this quotes array here.

Running Seed and Applying Migration

Short description:

We have this file. Now you can do platformatic.dbseed. Oh, missing seed file. What mistake did I do? Oh, it's not graph. We can copy this up or just delete these things. Sorry, we did it. We can apply our migration. Any questions? We have two movies and quotes. Let's run the seed again. You need to constraint movie dot names. Let's drop. Now I need to apply first. Why? You brought see the plane before. Thank you very much. You have created quite a few of those. Now we could start to refresh it.

We have this file. OK. Hey, hi, hi, Gabrielle. So, OK. Now what you can do is platformatic. dbseed. OK. Oh, missing seed file. And. Oh, what did I need? What mistake did I do? Oh, it's not graph. That's a problem. Right, and it's. See? and this is. This is. We can copy this up. Or we can just delete these things. Okay. Okay. So, if I go in full into. Okay, sorry, we did it. Okay. It's. Well, no, technically it is fine. And we can apply our migration. Finger crossed. Okay. And. Any questions are all there. And we have the two movie in quotes. And our plasformatic. We were just perfect. Okay. Now. Oh. Let's run the seat again. Oh, you need to constraint movie dot names. Uh yeah, let's drop. Now I need to apply first. Okay. Oh. Why? You brought see the plane before. Yeah, yeah, thank you. Thank you very much. Yeah. And it's. C dot JS. Okay. You have created quite a few of those. So now we could do. Start to refresh it.

Adding Like Button and Incrementing Likes

Short description:

We have successfully applied the staff and can now see all the complex queries being correctly rendered in JSON. We can create a quote and add a like button by generating SQL using co-pilot. By applying the migration, we can easily check the result type and see the added 'likes' column. We can also add a route to increment the likes of an entity by using our plugin. Additionally, we can add another route and use a library like fluentJSONSchema for writing JSON schema.

Right. Oh, and oh, because it's running. Where did I put it? Sorry. I put it somewhere. I'm pretty sure. And. You know. Not sure where it was.

Okay, okay, so we have done that. We applying the staff. So, MPX, sorry about this, platformatic DB staff. Now, once we've done that, where did I put it? It's there. Okay, it's running, okay? So now we are here, and we can look at it and we have all the stuff that we were talking about, okay? But also we could run this and you see that we have all our complex queries being correctly rendered in JSON, right? Can you give me a hands up? Did it work for you? Yay, cool! The others, are you following? Okay. Good, good, good, good, good stuff, okay.

What are we going to do now? After we have built the our very quick API with these these things, what we can do is we could essentially create a quote, add a functionality tool, add a like button, so can I like a quote, okay? So, how can we do that? Actually very simple, we can take this bit of SQL and then what we can do is npx platformatic db migrations create. This creates a couple of those for us so this is the migration tree and here we are here then we can save this, then we could ask for one thing that if you don't know how to do generate some SQL, you could ask compile. so drop the likes column from the equals table, and you could easily do it with co-pilot. You can even ask write me the query to do that like you could do here, you could do add likes column to quotes table, and here afterwards co-pilot would, oh yeah, here we go. okay, oh, Fabio is back. Anyway, you could generate stuff from using co-pilot if you want to. Now we go here and we apply. We have added that. We can check easily how that's working correctly by looking at the result type, for example, of our quotes route here which says likes, but you could also take a look at our inside grafico and for example take a look at the quote subject and see that we have a likes that is an integral. Cool right? Now, what can we do here? We can... We want to add a route that adds... allow us to increment our... the likes of an entity. So how do we do that? We have our plugin that we have written here. Note that we could have done that... that the generator generated it for us. So it's pretty cool. All of these nice comments are needed for the... autocompletion to work correctly. So, and what we want to add... yeah, okay let's try stuff. So first of all, you could do log info my-plugin loaded. And if we go back in here, you will see that we have just loaded my-plugin. nice, right? I can't hear you Tom, if you're speaking. Okay, so this is actually pretty nice. Now, what you can do... for example, we could add another route, let's say, let's call it a low. And this is just a normal fastify route, so this returns word. We can save this, know that it automatically reroutes stuff for us. So what we could do is 304 to a low, and we just got word, very small, here. Okay? Cool. We can zap this up because it's not what we want. What we want, we want to add a post. Now, if you're using TypeScript, you are probably going to want to use something like a typebox. I'm going to use a library that works well with JavaScript, but you could use whatever. Typically, I don't like writing JSON schema by end, so I end up writing it using this routine called fluentJSONSchema.

Incrementing Likes with SQL Query

Short description:

We can increment the like count of a quote by using a SQL query. This approach allows us to perform the operation in a single query, making it atomic and efficient. Other methods, such as using an ORM, would require multiple round trips to the database and increase the risk of conflicts. To try it out, we can use the 'request post' command and see the likes increment in the open API. However, the subscription will not be updated in this case because we are not notifying the system after running the custom SQL query.

So what we can do is cost schema and say that this is for the params of the things, which is an object, which is, sorry about that, which is a function of the functions, and the function, which is called id, and it's of the same type of getSchema, look, we can get the schema of a quote, which is automatically added for us, and this is

Note that here we could do, for example,, we could do quote, and let's copy these up so you can see what's in here, and if we go in this, it's missing the module. Npm iluent.json schema. Now, you can see that these are automatically reloaded and we have our nice grammar JSON schema of our quote automatically filled up. Cool.

In iCode here, let's add my routes. We want to add a post to quotes, and this is the ID which is the parameter, and then like, and this is the schema and so on. Now, what we want to do, we want to do a plus one. Do you know how to do a plus one in SQL? I have no clue, so if you don't have a note clue, you can ask a copilot. You could do something like write SQL query to increment like count of the quote with a given ID. Let's see what this generates me, and okay. Probably not correct, but very much something that will do. Here, instead of doing that, we are doing cost. It's no need. What we are going to do is a wait app.platformatic. You see that we have it auto-completed. We need to get the db and SQL from app.platformatic. Now we could do await db.query. Yes, and then here we go SQL. This is one of those nice target and bread string things. Here we go and copy this thing up. No need for this thing. So where id? It's id. What is it? It's very much like that. Yeah, we want returning likes. Here is the result, and then return result zero, which is a row. Cool. Again, most of this is writing SQL. Most of the time I ask a pilot to write my SQL or chat GPT is actually very straightforward when you do that type, like that. The important part of doing this in this way using SQL is that you can do it by doing only one query. Only one query sent to the database and that's atomic. Otherwise, if you do it with any ORM or any kind of that something like that, you would need to read your data and then save the data back in the database inside a transaction, which will be two round trips to the database and will make things super slow. Well, at least slower and more with more risk of conflicts. These instead allow you for doing things and serializing them. So the database can have a much easier time in interleaving the queries if they come to be. If you see a lot of likes all done at the same time, this is what the command that you want to do. Read the data and save the data. That is, two queries. Does it make sense? Yes, okay. So how do we try this thing up? Well, we copy this command, you see, request post. So here we can run this thing and look, we can increment it. And then we can even check it from our open API. And as you can see, these has been ID one at 10 likes. Cool. And the subscription will update too, right? Of course. Well, yes, sorry, yes and no. In this case, the subscription is not going to be updated and I'm going to show you why. So if you do quote saved and you load this up, you see this is done and this is not getting updated. And the reason for that, it's we are not notifying the system that because we have just run a custom SQL query and not run, we are not passing it throughout any JavaScript. So it's not possible for us to, for the system to do that.

Platformatic MQ and Entity Interaction

Short description:

Let me try to get that done. We have SQL events for entity get published topic and get subscription topic. Platformatic MQ is our PubSub system for subscriptions. We need to get the entity and the quote, along with the topic to publish. We are missing the context, which is required for authorization and other functionalities. The code needs further debugging as there are undefined variables and missing API references.

Let me try to get that done. I don't think it's documented. So platformatic. Where is it? And. Entities. Like there is a module to handle that stuff. Let me see. This is actually a good question. Which is probably worthwhile checking. So we have SQL events here and SQL events is get, oh, entity get published topic. Yes. And get subscription topic. So I'm just checking what is the best. So we have the entity. Just checking, where is the, oh, yeah. Yes, it is. Okay. So here is what we could do. So here. So you have this called app platformatic dot, oh, it's not gone for completely. Good stuff, I found a bug. Okay, so in here you go. This is platformatic. MQ is our system, is that little PubSub system that we use for the subscriptions. So in order to, this can use either in process or radius. So what you can do is app dot log dot info MQ. And let's see if this is correct, if I put correctly. Oh, and, where is it? All right. Oh yeah, sorry I made it a mistake, yeah, true. And this I need to do that, I need to do my curve, okay? And yes, you see these is the MQ, okay. So we have the MQ and what we just, we need to do is get the entity. So, and the entity it's entity and this is the, our entity right now is what I think? So what and equals entity? You see it's there. Now, we need to get the quote and we need to get the topic to publish the stuff. So and our payload it's going to be an ID, which is the ID of the stuff and cool stuff. We are missing a few bits. This is no need for any of this, we can just await this. Good, one too many. Good, and this is just our payload and we have the topic, we have the payload, we are a solving, we are missing the context. The context is needed for the authorization system to work and a bunch of other stuff, Get the context like that, Rack.CTX. Don't remember actually, this is, we report it as CTX, but I'm probably sure that it's not that. So let's look into it. This is going to crash. Yes. Oh, quote of, oh, this is entities. Here we go, and Action is not defined. Let's look into it. Yeah, in fact, it's empty. Here we have the, I don't remember the API for that. Yeah. Interaction.

Real-time Updates and GraphQL Implementation

Short description:

You can get notified in real time whenever something is updated. If you need to trigger it manually, it's going to work. Note that if you have authorization configured in the system, everything will be automatically applied. Works as you would expect it to. We can also implement it as GraphQL. A micro change is made to the response, returning an object with a number of likes.

Where is it? Text, and where is it? It's being created. By, I can't remember, and I don't seem to have documented it where I wanted it to be. Here we go. You can find it, and I think it's in here. and, oh, wait. No, it's not here. It's in the platformatic context. Come on. Very stupid of me. OK. And then we have the context. Now we can run this up. Action is not defined. Where is action? Oh, action. Save. OK. Now we can run this up. OK, this worked. So let's try again if our graphical is working. OK, so Port saved. And then I run my post, and now it's totally working. Very cool. Good to see, too. So yeah, I didn't. This was absolutely not planned for the workshop. And I need to I'm taking a post-it, because I found about on the types. Add platformatic to doc and types. OK. Cool. So essentially you can get notified in real time whenever something is updated and stuff. And if you need to trigger it manually, it's going to work. Something like that. Note that if you have authorization configured in the system, everything will be automatically applied at this point, so this will be automatically applied when this happens. Make sense, yes, hopefully so OK. Cool. Uhm, OK. Yeah, I should probably create a little bit of something to get it. To simplify this, but yeah, anyway. Works as you would expect it to cool. OK, so we have done that, OK? And we can also implement it as graph QL. OK, so. And yeah, we might want to implement it as graph QL. So. In here, what we do this to a micro change. And. Let's do a micro change here we do. The response. And two hundred and as some object we want an object and likes that is a number. OK. And here we are return.

Incrementing Likes of a Quote

Short description:

We increment the likes of a quote by using a sink function and the quote ID. After reloading, the system returns the updated like count. The Swagger documentation also reflects the added like with the correct schema.

OK. Now here we do a sink. Function. Do like. Increment like what. I.D. And we can take this this. We need two things here, we need the idea in context, because we've done things different compared to the tutorial good stuff. We take this. Take this. And we take this. Okay. And then here we do. A wait, like I thought in the CTX. Note that this system reloaded automatically, and now it's returning like seventeen. And also if we go to our to our Swagger, now you will see that our like was added here. And that it has a like schema, this is actually filled in correctly. Okay. Does it make sense? Yeah. Cool.

Adding Like Quote Mutation and UI Work

Short description:

We add the like quote mutation using Mercurius. An unexpected bug occurred during the workshop, but it was fixed. Autoreload functionality has a bug with some error conditions. Now it's time to do some UI work. We copy and paste the UI created by a front-end designer. We install the dependencies and start the UI. Everything is already working, but there is a network error due to CORS. We fix the CORS issue and now it's working.

Okay, so what we want to do, we want to add the like quote mutation, very simply. We can copy this up from the slides, okay. Now, we could add a mutation. These graphic guide comes from a library called Mercurius. So we have this and then we add our mutation increment quote likes. We save this. And now we can reload this. Let's see if it all works as expected. And we could run again our quote saved mutation. And here we can do a mutation like quote id 1. And we want the oh, and this is just a number. We like this. Oh, and what did I do wrong? Ah, there's a bug. Interesting. Cool. Nice. Okay, this was unexpected and not exactly what I wanted to have during the workshop. Cool stuff. And so if you ended up having this kind of thing, you could disable for a second the watch mode, which is unfortunately the problem of this thing. And sorry about it, and I get it fixed. Okay, I thought I'd covered them all. Now this is again running and if I run this up. Wait. No, this shouldn't. Autoreload. False. Oh, incrementQuotesLike is not defined. Okay, now I found the problem. It's like a port. Okay, like a port. I know where that came from. Dang. Okay. I need to think there is a way to fix this problem. Anyway, it is it, and now we can try it again, and it's working. Well, I need to start this up again, and it's working as before. Cool. Okay, I can re-enable, there is a bug in the Autreload functionality with some error conditions, so Autreload is actually very cool, but it's from time to time buggy. So let's start this again, and here we go. Yeah, we've done that. Now, how are you doing so far? Were you able to follow? Doing great. Yay, okay. Now it's time to do some UI work. The way we are going to do it, they're going to do the UI work the way I do the UI work. So there is a phenomenal front-end designer with my BU that creates it for me, and I just copy and paste it, okay? I don't know if you, do you like the, we add a little bit of, okay? So cp, actually cp-r, no, steps, okay? DAU7UI, Movie Quotes, Apps, MovieQuotesFrontEnd, here, oh, yeah. Now we can enter MovieQuotesFrontEnd, MPMI, it's building, which is always, npm install is always the stuff that takes the longest for some reason, I dunno. Okay, now we can do npm start on this, and we can open this thing, and as you can see, everything is already working, but if I click this, it's not working. Why do you think it's not working? Network failed to fetch, oh, what's the, the, and what everybody loves, Course. Damn, it's course, in fact. That was part of the problem, okay? So what we need, we just need to do here and add these to course, okay? And now I can, we can go back in here, and like this, oh, sorry, like this and now it's working.

Deploying Back-end to Platformatic Cloud

Short description:

You can now see that everything is working as expected. Next, we will deploy our back-end to Platformatic Cloud. Once deployed, you will receive a URL where the application can be accessed. You can try running queries and mutations to interact with the deployed application.

You see now it is working, cool. You can order them and so on, and you can see the queries. If you go and inspect here, you can see the GraphQL queries that are being done and so on. Sorry, where is it, yeah, sort, yeah, payload. You see here is the query, so here we go. Anyway, pretty cool. You can try and everything is more or less working as you would expect it to. Oh yeah, this I can close, okay. Going back to the slides, yeah. Have you done good so far? Yes, okay, so next step is actually very simple and we are going to deploy our back-end to Platformatic Cloud. So you can go to Platformatic Cloud, log in with GitHub. Now, we're going to destroy the Cloud with all the people doing it all the same time. Let's see if it stays up. And I can create it put movie quotes tutorial, create application, and this is let's call it the Wordspace test and don't flip the dynamic ones. The dynamic one is the one for PRs. So just don't undo that and I am creating one here.

Okay, now I will delete these, so don't share these two things because you're unable to be deployed. You could deploy it as me if you copy these two things up. I am downloading this file called testplt.txt, so click here. So you want to click this one. This is the button that you want to click. After you have done that, continue. What you can do after you are back here, you can move the file that you have just downloaded, microbes, and test that plt.1 and I'll call it keys. Okay. Then you can just do npx, plt, deploy, dash, dash, keys, keys. Spacking it up, deploying to a cloud. Depending on your bandwidth, this can be slow or not and fast, it depends on how much stuff you have. You might want to do on npm prunier. There's a lot of things that can be improved. PLT is an alias for platformatic. Yes, you can use PLT instead of platformatic. It seems a little bit long platformatic. So that is an alias on that. And once the application is deployed, you get a nice URL called . It takes more or less one minute, one minute and a half to get things started for the first time. Once it's running, it's way, way faster.. And okay, the application has started and it is. Oh yeah, here it is. And this is the exact same thing that we did before. So this is the quotes, we have our mutation. We have our light quote. Right now is the question. So do we have any quotes in here while we can try doing a query? And that's for any quotes. And we have our quotes because why? Because this is packed up our SQL lite D. B. Okay, so you can remove this if you don't want to be there, but it's there and they're going to just leverage these up because I'm going to cheat and then just going to show you that what we can actually still do our subscription and quote saved and we want the idea and the likes and the quotes itself. Oh, no. It's only the idea. What is the quote? So here. We can run this then here.

API Authentication and Custom Business Logic

Short description:

We could do mutation. Can I ask a question? Is it possible to execute a piece of code before this API? Let's say some profanity checker, OK? Yes, of course, it's possible. We need to use the concept called Hooks.

We could do mutation. Like what I D one and we run it and here. It's still coming up the same. Notify me putting. I'm putting the lights here. It's then right again. And all of these is going back and forth to the cloud and back and so on now if you're using our past instance or anything else then everything will still work exactly the same as I just showed but deployed on using that were able to deploy meanwhile.

Can I ask a question? Yeah, sorry, I joined late and still trying to grasp this. So as I understand this platform Flatformatic is a is a tool to provide APIs for the database, right? A Platformatic DB. Yes. That's what we are doing the version for now right now. Okay, and these APIs are both for Open API and GraphQL APIs are provided. Yeah, okay. And the UI that you showed is created in a separate repo separate port base as a separate server or sorry, the UI you mean the QuotsApp this thing? Yeah, okay, yes. Okay. So this front end is separate port base which is using the APIs provided by the platform. Yeah, okay got it, got it. Yeah, these are very typical setup you typically have your front end built if you're building a full blown SPA and a full SPA you have your front end run and built on run and deploy it on next for example. Sorry there run and deployed and server and built and serve from S3 and that's it essentially or something like that. However, if you have your staff using something like react server component or some stuff like that you typically have it running on the cloud, you typically have it running on the cloud and serving stuff dynamically essentially. Got it, got it. And this API, can we add some middleware, for example, for authentication? Before accessing the API, I want to do authentication. Yes. So if you go inside our docs, let me open up a new tab. If you go inside the docs, inside the reference, there is a full topic here about authorization. And you could look at this strategy sections. You could use the JWT token and or just HTTP headers, if you want to, and put the role. So you can put through this. Essentially, what you want, you want to put the role as a claim inside the JWT token. So this is actually very important. This is going to be mapped. For example, x-platformatic-role. Okay, and you can use a webhook or just HTTP headers, but this is actually not great. For obvious reasons. And then you can specify that, you can specify some rules. So here you can say, for example, that only, so this block will say that only a user can find the, can show its own data. So, essentially, if you have a userid column, then you want that userid column to be equals to divide this value in the token, in the WT token, when do you run any read operation, essentially. And so on and so forth. OK, this is great. So it's actually pretty powerful to begin with. So I'm very, this is actually very useful. I have one more question, but I'll check. Is that OK if I go ahead? No, go ahead. In the last case it's fine. We are not a lot of people so, yeah, of course. Is it possible to execute a piece of code before this API? For example, if I am trying to create, let's say a quote? OK, but I want my custom business logic to be executed before the quote is created. Let's say some profanity checker, OK? Some piece of code I have written that will do some business validations on an entity. OK, yes, of course, it's possible. We need to go use the concept called Hooks. It's in here.

Intercepting Requests and Monitoring Metrics

Short description:

You can intercept requests before they are executed and perform custom actions using the AddEntityHooks function. This function follows an interceptor pattern and allows you to call the parent function and perform additional actions. It works similarly to the dbAuthorization module, which powers the authentication and authorization mechanisms. You can intercept requests at two different levels: before the entity is saved or before the request is received. Typically, you would use the entity level, but you can also intercept all requests. Additionally, you can use Fastify hooks to run code before a request is processed. This functionality can be applied to routes that you don't generate yourself. It's a powerful feature that provides flexibility and customization options. You can also monitor the number of requests, latency, service queue, and other metrics in the app details. The logs are also available for viewing, and efforts are being made to improve their readability.

And you have in SQL Mapper, EntityZooks. And basically what you want to specify is called this function called AddEntityHooks. And you could just do that to run stuff before and after. It's a middleware pattern, so you need to call the unnested function to execute it. And sorry, it's an interceptor pattern, not a middleware pattern. And basically, you just call the parent function on it, and that's it. But it just works.

So this is the same way, what is it, where we have implemented. So if we go, just to show you something about this PR, and just to show you how this works. So you remember that we showed how the WebSocket stuff worked, how the GraphQL subscription worked. In fact, you can see that we are calling this addEntity hooks exactly that. So in here, whenever there is a save, okay? We are intercepting this save, and we get the original function and the data that wanted to be saved. And we are doing some stuff. We are calling the original, and then we are doing something else. Okay? Okay. And it's done in the same way as the dbAuthorization module. So in the dbAuthorization module, it's the way the authorization are set up are actually done with, it's a long module, but it has these addEntity hooks. So that mechanism is a mechanism also that powers the authentic authorization. So. Perfect. So I can implement my code which will intercept the request before that request is executed, I can do whatever I want. And so, yes. Yes, so you can do things at two different levels. One is before the entity is saved, and the other one is before the entity is, one before entity is saved, and the other one before, and the other way is be when the request is received. Okay? Those are two different ways of doing the same things. So it's not the same thing, it's different things. Okay? So, but typically you probably want to do it using the entities, but you could also run it for all the requests. Like, for example, if we run it in here. In my plugin, what I could put is, I can put a Fastify hook. So here we can run it, something for a request. So, adhoc on request. Okay? And request log info on request. And you can put whatever you want in here. And here we have this, and as you can see, we have run, we have printed the stuff. Awesome, awesome. So you could, know that something that is actually very cool, these would also work, for example, for other routes. So routes that you don't generate yourself. So, and here you will see that we got on request for each one of them. Okay. Does it make sense? Yeah, great. That's exactly what I was looking for. Okay. And is there anything else? I'm good, somebody said. Cool, okay. You're good? Great. But you're able to deploy? Yay, did it work? Okay, something Some interesting feature that you can see on on your end. Here's you get the number of requests, the latency, the service queue and number of requests, the latency number of clients and so on and so forth. Pretty cool. What you can also see if you open the details of your app, is that you can get the logs, for example. And yeah, we need to make them pretty printable.

Dynamic Workspaces and SQLite Benefits

Short description:

This part introduces the concept of Dynamic Workspaces and discusses the benefits of using SQLite. It also mentions the possibility of configuring CORS for showing graphical in OpenAPI. The speaker expresses enthusiasm about the latency and highlights the upcoming demonstrations.

But yeah, anyway, this is actually pretty cool. So as you can see here, we have all our logs for our stuff. It's actually pretty neat. And, now you see that he's complaining that we need to configure Course for showing graphical in OpenAPI. You could access those from here, but you need to essentially allow Course to do that. Something that is actually very interesting is the concept of Dynamic Workspaces. So if you create a GitHub repository, you could create the GitHub Actions so that you get live PR data automatically. Note that the latency for this stuff is actually pretty neat. I don't know if you like this latency, but I do. I personally do like this latency, but it's my take. Part of this is also the benefit of SQLite. So to be clear. There is a bit of stuff that could be done related to that. I want to show you some other stuff that could be very cool to do. Okay, if you're doing this kind of things, okay?

Platformatic Cloud Quota and Monorepo Setup

Short description:

The free quota for Platformatic Cloud allows you to create up to five apps. Upgrading to a paid plan provides more flexibility and eliminates automatic stop and restart. The cold start lag for free plans is aggressive, but paid plans offer faster performance. Platformatic does not charge per user seat, making it a cost-effective option for small teams. It pairs well with Vercel and can be used in a monorepo setup. APIs in a monorepo can communicate with each other using Platformatic Runtime. The Runtime Client Demo showcases this functionality.

Before we do that, is there any other question on this stuff? Tom, Georgelov? You good? All good. What do you think? What do I think in general? Yeah. It's fancy stuff. I don't know, but we'll try to use it in production one day. Cool.

Okay, so something that is actually even more fancy, if you call this fancy what I'm going to show you next, is going to be even more fancy, okay? Okay, I'm going to actually— Wait, question. How much free quota do I have for this platformatic Cloud? Sorry? How much free quota do I have on platformatic Cloud? So if you have—you have—you can create, I think, five apps by default, just a random limit. And actually my account has a pro plan already, the plan set up, but there is—if you want just one app, you have— so by default your basic workspaces, your basic applications and sorry, your basic workspaces have these random number— random name entry points, okay? If you want to configure the—you could configure a CNAME, okay? If you want to configure a CNAME though, you will need to upgrade to a paid plan and it would also mean that the application will not be stopped automatically. Like right now, whenever you're using Platformatic, any of the free quota stuff, it's all—it scales to zero very quickly. So most of the time, you don't even find out, this was stopped and restarted while I refreshed this thing, okay? So I'm not—you normally you don't even notice it, but there might be a small lag every now and then if there is— So not 15 minutes like Amazon Dambda. No. It's less. You say it's really aggressive, yes. It's a really aggressive cold start lag for the free plans, but on the other hand, if you just need one app it's $4.99. So it's cheap. Okay, okay. So yeah, you see that? You see, this went up to $450 because it was stopped and restarted. So just to give you a hint of how much it costs to stop and restart. My latency is way higher, it's way higher. It's 2,000 milliseconds. Yeah. I got it, why? Yeah, pretty much. Again, it's aggressive in stopping and starting, but if you adopt any of the paid plans, it's actually really, really fast, but it's also cheap. One of the things that it does compare to the other systems is we do not charge per user seat, so it does not get more expensive as more people deploy the stuff. Okay, great. If you have three people and you just need one environment, yes, then $4.99. So it's, as I said, very developer-friendly and small team price. So, yeah. Is it cool? Very cool. Looks like Vercel for the back end. Yeah, pretty much. Yes, that's the idea. Yeah, it actually pairs really well with Vercel. So if you go to our blog, we have a full tutorial on deploying a full stack app using Vercel, Platformatic, and a tool called Neon. So you could assemble it all together, and Auth0, too, like this is a tentacle system, but it's more or less what people would build these days. And if we're in a monorepo, as long as we wire up our GitHub actions to deploy each one as an individual application, so that they would all get their own instance, can they be able to talk to each other? No, so these are two different things, okay? The first one is... Sorry, where is it? I closed it. Okay, these are two different topics, okay? One is I have... Sorry, what you mean? You have a monorepo with a lot of things inside? Yeah, we have a lot of APIs like microservices. We also have our GraphQL BFS that we put in front of those, that we use as a gateway. So I guess we wouldn't really need the APIs to talk to one another because they either communicate with Kafka or something like that on the back end. Yeah, thank you, Okmar. And yes, so that's exactly what I have and a slightly different demo than this one, and that's what I'm just going to show. So let's say that... In order to cover for that use case, we're going to use another open source library that we have developed called Platformatic Runtime. And with Platformatic Runtime, we can call it Runtime Client Demo. Actually, I can just show you this. This repo, Wings make you fly, whatever, it has two services, which is essentially the equivalent of your monorepo. You have one is a... One is like BFF.

Platformatic Runtime and Service Composition

Short description:

The Krook and ManFalk is the main entry point, while rMining is the core service. The Krook ManFalk is a root endpoint that calls the core service. You can start the application using the 'platformatic runtime start' command. The application runs as a single endpoint, with services specified in the definitions. The services are automatically wired up, and you can develop them independently. When assembling them together, they can be deployed as a single unit. This monolithic approach eliminates the need for hard wiring and allows for easy deployment. The runtime also supports a slightly different setup with an automatic OpenAPI composer and other services like the languid nobleman and somber chariot.

One is like BFF. The crooked manfolk is like the main entry point. And rMining is the core service. Okay. And rMining has a root route which calls this thing, which returns just an example property. Okay. And the crooked manfolk is... As a root end point that calls it using a client.

Now, how do we start this? So we do platformatic runtime start. Oh. Wait. What did I install here? Yeah, old version. I did these demos with the main platformatic thing installed. Let's install it again. And is your, are you doing something like GraphQL Federation, Tom? No, we're not. We're not federating yet. Right now we're just using GraphQL as kind of like the gateway into all the APIs. Are you using REST for those APIs? Yes. Yep. Fastify APIs, and then Mercurius. Yeah. Okay. Cool. Okay. This is installing stuff, staking.

Okay, so here then we do NPX platformatic runtime start. Now you see that it started, we see the log of the Krook and ManFalk which is available in port And this is returning JS Nation. Wait, but this is the Krook ManFalk, but if we look at this, you see that the outmining service got a request, incoming request, and it requested a request that was completed, and then the Krook ManFalk return the stuff. Note that all of this is done as a single definitions, so this is just a single endpoint. So, you just specify the services that you want to load, and that's it. The folder and this is automatically wired up, and you need the folder and set the entry point, which is the service that's going to be exposed as your BFF, and all of this is just handled. And that would just be one app in Platformatic, too. Right? This is just one app. You can just run this and just a single big deploy. This is a monolith, essentially, and there is no hard wiring, no nothing. You can develop these independently. Each one of those can be spinned up with their own environment variables if you want to. No big deal. But then when you are assembling it together, you could deploy them as a single deployment unit. Yeah, that would be great, because if it's generating the dynamic URLs and all that, one dynamic URL is ideal rather than trying to keep track and then have to orchestrate all the Ah, look, don't tell me. I had so much problems about this stuff. Note that similar concepts can be implemented as part of taking two dos while I'm doing these demos. So, in the runtime, here, this is a slightly different setup. So, in this setup, we have three things. We have an automatic open API composer and two other things, the languid nobleman and the somber chariot. Note that the composer is nothing. It's just nothing. It just says that you want to compose the languid nobleman and the somber chariot. The languid nobleman exports a hello route and somber chariot exports a platformatic DB app similar to what we just showed before with our movies thing.

Platformatic Composer and Authorization

Short description:

Here, you can auto discover everything and create a front layer automatically. It's fast and compatible with Platformatic Cloud. Migrating existing APIs shouldn't be too difficult. We keep finding bugs, but the platform is stable. There is a lot of authorization work, but it takes time to set up. I will set up something simple for quick demos in the future.

Here, you probably have the same issues before, so we need to reinstall the thing. Sorry. And Yeah. C LT runtime start. And. Yeah, this is. There's a little bit of pulling. And now you can this is the composer as everything. Update. So what's the main difference in the run time that you showed before and then composing. Oh, this does the composition between the things automatically. So you don't need to create your BFF, this is your BFF created automatically. OK, so it auto discovers everything and creates that front layer for it also. Yeah. Pretty much. And graph QL two or just rest right now, rest. OK. Graph QL. It's coming. Awesome. That needs a little bit more work. So, yes, so this is actually pretty cool because it allows. It's it's actually very fast, so you can actually do your things very easily and check things out, like you can check this and. This is responsible no time essentially, as you can see, it's. Really, really fast from. This is the same as before. And all of these compatible with classical matic cloud, so you can deploy your individual nano services on top of the make thing. So migrating existing APIs and all shouldn't be too difficult. If it is open a bug. That's the geist that the geist. In theory, no but in practice, we will see. OK, and I'm a little bit joking. We ported some of our internal stuff to all the system was actually pretty straightforward but. It depends really, we are finding, we keep finding bugs so that the. Nature of the Beast nature of the Beast. So the wild platform, I will be, I would say is pretty stable. All of what you see inside. Performance cloud is built on top of plus dramatic IBM, platformatic service. And it's actually very, very stable. I would say. The new stuff was just announced. So, as usual, expect some dragons easy to get. To find them in this kind of stuff. I don't know. I think I've covered everything that I wanted to cover in the workshop. There is a lot of authorization things, but it takes quite a little bit of time to set up. In the future I will probably set something up very simple that I can demo it very, very quickly. But right now I need a little bit more work to do.

Can I ask one more question? Of course, Tom, as many as you want. You know, when we're talking about subscriptions earlier with Redis and something else that was supported already.

Adding Kafka Integration and MQ-Emitter

Short description:

If we want to add Kafka, it's already done and very simple to set up. We have our own MQ-Emitter for Kafka, which we are using with Mercurius. We are willing to open source it. Just open an issue and we can figure it out. I am a huge fan of Kafka and it will work seamlessly with this system. Let's chat again soon, folks.

Memory. If we want to add Kafka, is that gonna kind of be like what we did for Mercurius where we had to write our own like pub sub connector with Kafka and then we could tie that. Oh, did you have that done? Is it using the same? So, likely we... That will need to be investigated, how to do it. Right now it's probably a little bit embedded in some stuff, but if you open an issue, we can probably figure it out.

I don't think that I have an API available for doing. Bye-bye, Jaroslav! I have an API available for that at the minute. But, to be honest it's very simple to set it up. If you see here, basically, this is what we are doing, which is very stupid. And, if we wanted to do some Kafka stuff, I would probably need to give you a way to run this! To configure this and update this stuff. But, it's not hard work. It's just a matter of configuring it correctly and allowing it to be done. So, overall, yes, it's already done.

So, you already have an MQ-Emitter for Kafka, right? Built. Yup. Really? Wow! Yeah, we're using it with Mercurius right now. Wow! So, and it's not written here, so send me a PR so I can list it in the repository. Okay, yeah, we'll share what we got with you. So, it's MQ-Emitter Kafka, this one. No, we wrote our own. We had some issues with this one, so we wrote our own. Oh, so, it's private. Yeah, it's private right now, but we are definitely willing to open source it. Yeah, yeah, well, look, I am a huge fan of Kafka. I've built systems that pushed millions through that thing. So, what you've read, what you've wrote, it will just work, essentially, on this system. You just take that, I just need to find a way to plug it into the system and that will be it. Great, anyway we can contribute, I'm always looking to help. Yeah, if you open up an issue about that, I will be very happy to take a look and see, and I can bring your own MQ emitter type of thing, which is probably better. Yeah, that would be great. Yeah, cool, that's it. This was great, Matteo, thank you very much. Thank you, folks, and I don't know, is there, Tio, Gabriel, Hada, Paul, have you got any questions? No, I'm good, thank you. Great, no questions. Okay, perfect, folks. Amazing. How many of you were at the in-person conference? Yeah, yeah, I saw you. Hadathio, there, there with me. Oh, okay, all of you. Okay, great folks! Amazing. Yay, no worries, Paul. Okay, pick your mic. You know, you don't need this mic. This is pretty expensive shit, but you might want to get a different mic. Anyway, this was great and let's chat again soon, folks. I would say bye bye, and I will give you back, I don't know, half an hour of something, which is always a very good use of time. Bye bye. Thanks Matteo. Bye bye. Thank you.

Watch more workshops on topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
In the early years of Node.js, diagnostics and debugging were considerable pain points. Modern versions of Node have improved considerably in these areas. Features like async stack traces, heap snapshots, and CPU profiling no longer require third party modules or modifications to application source code. This talk explores the various diagnostic features that have recently been built into Node.
You can check the slides for Colin's talk here. 
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring.
While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.