In this intro to the series I set up a new React project with create-react-app, configure AWS Amplify. Then I create a serverless function and access it via GraphQL with AWS AppSync.
Links from video:
Transcriptions:
Kurt Kemple 0:01
Hello, everyone, and thank you for joining me on the first episode of everything service functions with AWS amplify. Today we're going to take a look at setting up a basic server list function that says hello world, and putting it behind graph kill API with epic. And we won't do all this without leaving VS code. To do this, I'll just CD into my projects directory, and run and PEX create react. And we'll just call this Hello, world. Okay, so this is going to create the project install the dependencies I'm going to fast forward, I'll see you when it's done. Okay, so the project has completed, I've opened up the project in VS code, and I'm going to bring the terminal back up. Now that we have our project, our basic react app, the first thing that we're going to do is we're going to knit this as an amplify project.
Kurt Kemple 1:24
For the name will choose hello world. For the environment, I'll choose Dev. I will choose Visual Studio code editor, JavaScript for the project react. And it knows that this is a create reactor project. So it's just going to go ahead and give me those smart defaults. And lastly, is I have to use a profile. So if this is your first time using amplify, you may have been greeted with a request to configure amplify CLI.
Kurt Kemple 2:00
I'm going to put up an image of Nader Dabit's YouTube video that you can go and check out and here's the link as well. And this will walk you through configuration. It's also in the very beginning of the docs if you go to the Amplified docs here. But yeah, so now I'm going to fast forward while this runs, and I'll see you when it's done. Okay, so now that that's completed, let's go ahead and add an API.
For the type will choose graph QL, for the API name will stick with hello world will choose the API key, we're not going to require authentication to use the app, we do not have an annotated schema, so we're going to go ahead and create one. So we'll choose Yes. And here I'm going to do single object. And yes, we want to edit it now. So it opens up the schema. And what I'm going to do is I'm going to get rid of this to do model. And if you're unfamiliar, these directives, or graph QL, transforms, basically are what allow you to customize and create app sync graphical API's, but doing it through this schema, and then that gets deployed and it knows what you're trying to build. So we're actually going to get rid of this because we just want to do our hello world right now through a surplus function.
So we're actually going to say type of query. And hello world is going to be our query right? Now it's not going to take any arguments, it's going to return a string, that is a must. And then here, we're going to say function, because it's going to be backed by a function. We haven't created that yet. But we will next. So for name, we're going to say hello world, it's a lot of hello world stuff, right? But here's the thing. So because we're creating this with amplify, amplify supports multiple environments, meaning, if I created, we created Dev, but if I wanted something called like production or staging, we wouldn't want to necessarily use the same service function. So we can use this kind of variable here as to say, do one for Dev and one for production and one for each environment that we happen to create. So that's it. So this is our schema, we just use this one directive, you know, there's nothing else really crazy going on here. Yeah, and so we save that, and then we're going to press Continue.
Kurt Kemple 4:45
Okay, so what we missed here, essentially, is that the schema was created. So some of the next steps would be to push it or we're actually going to take a look at mocking, but first, we have to add our function.
Kurt Kemple 5:03
So we run amplify add function.
Kurt Kemple 5:12
So for the name, we said, it's going to be hello world, in our schema, so let's make sure we call it hello world. And here, we'll call that hello world. And this is going to just be a simple Hello World function. So we have some other options, right. So if we had storage setup, we could also do a credit function and access Dynamo DB table that we've created within this amplify project. Or if we just like, we're going to know we're going to build out maybe a couple different routes, or something like that, we could actually basically recreate a REST API full on REST API, but it would be service and backed by API gateway, and use Express. So like, you just be able to write you know, API doc get path and then handle those requests, like you were in an express up. For right now, we don't need all that.
So we're just going to stick with the Hello World function. Technically, no, we don't want to access other resources, graph QL will access it. But we don't need to like access graph QL from within the function or the user or anything like that. So we can hit know for now. And later in the series, we'll we'll take a look deeper into some of these options, because you can do some pretty powerful stuff. Yeah, let's let's edit it now, just so that we can kind of see what it looks like.
So you see here, we get lambda function. And it's just going to output hello world. Perfect. That's essentially exactly what we want. When it's console logging out here, is key. So like, if you look here, we have this event, JSON, and it has keys. So if this lambda function was to receive events like and not be being used through graph QL, you could receive leave it like that. And so that just means like that data to be there, we don't need this. So we're going to get rid of it. And that's it. This is our service function, so we can hit Continue. Alright, so that's all done. So now that we have it set up, let's run amplify mock, so we can test it out. So while this is spinning up, I'm going to go ahead and fast forward so that we can move on.
Kurt Kemple 7:27
So a graph QL code generation gets done for us, if we want to like this will generate all the query subscriptions, and mutations in our case, we just have a single query. So not much will be generated. But you can get it you know, just vanilla JS, you can get with TypeScript definitions. And with flow, so if you prefer types you can do that will stick with JavaScript for simplicity. So for the files, yeah, sure, it's just going to put it in a folder called craft QL, inside of directory where the rest of our code is. And you know, we want to generate all the mutation subscriptions. So here, you could specify and break down what you want to generate for, but we can just say yes, and then so this is the depth like, so if you've worked with graph QL, maybe a lot before you know that it can get expensive to access multiple layers, like say you have blog posts that have comments, you know, and then from like, comments, you have their authors, and you can get their blog posts and get those comments and like, so on and so forth. So you could just get like very expensive. So this just limits the amount of depth. So in this case, you can only go down two levels.
Okay, so our graphQL endpoints has been successfully set up and we are mocked. So theoretically, at this point, we can start querying, but we need to do this with the API key because we said to do that, so first, we're going to set up our client. And then we'll go ahead and update the React app to call the directory and or the the function and we'll take a look at that the result. So first, we're going to add the dependencies, which is AWS amplify, this holds the main amplify like object in all of the classes for the different categories.
So like for API, analytics, predictions, things like that. And then we're also going to add AWS amplify react. And this actually, we don't, we don't need this one yet, because we're not doing any off like that has like a bunch of pre built components. So if we were adding off, I like to use the pre built like authenticator, which gives you the whole sign in flow. completely done. You don't have to do anything, but we're just doing API key, so we won't need it. So we're just going to add amplify. And while that is installing, we're going to open up source. And there's two things I want to point out. One is this AWS exports file. And so this is actually where the base configuration is stored. And yeah, so what we need to do is configure amplify, and so the way that we do that, is we import amplify, from AWS amplify, and then we import the configs, it will call it Apple fi, config.
And that's going to come from that AWS exports file. And then we're going to configure will give it to amplify config. And that's all that it takes to actually configure it. And now, we actually want to use it right, we want to call this function. So today do that we're actually going to go into app JS. And we're going to do a few things. We're going to state and use effects.
Kurt Kemple 11:14
And we're also going to import API and graph QL operation from AWS amplify. So what we'll do here is we'll create state to store our message will just make it No, by default. And then we'll use an effect to go ahead and fetch that message.
Kurt Kemple 11:57
So now this would set our message. So let's come down here. And we'll say if a message, show message, otherwise, the default that was already there. So now we have this all set up. So we're going to go ahead. And actually, I need to open up the browser. And I'm going to do it within VS code. But I don't have that extension installed yet. So we're going to pause right here, I'm going to get that installed. And then we'll open up this project and run it.
And if everything is working, we'll have a serverless function. Okay, I've gotten browser preview installed. And I'm ready to open the project. But I've realized that we've used our query hello world, but we haven't actually defined it. So I want to take that opportunity to look over here into the folder and we see that we have source graph QL queries, and we open that up, we get hello world. So that was automatically generated for us, we didn't have to do it. So let's go ahead and import that.
Kurt Kemple 14:14
Okay, so now we're ready to run the project. Okay, so we've got our build. So let's do open preview and we get hello world. So our function was called. And we are now able to access this function through a graphical API. So once again, what we did was we use the API SDK essentially off of API, in random craft kill operation that was automatically generated for us, we set up a server list function. So since we we're mocking this, we can actually make changes in real time. So let's go ahead and change that. Let's say hello universe. Right. So we change that reload the page, hello universe. So now we can work with this locally change, get get the function working like we want just like as if we had pushed it had it hundred percent ready to go, and then deploy it to AWS. So it's just a much improved workflow. And so let's take a look.
Kurt Kemple 15:34
So to do that, we just control See, the next thing that we would want to do is run amplify, push, this would put the resources in AWS. And then if we restarted the app, we would actually be talking to production service. Instead, I'm not going to push it out yet, because even though we're doing this video, we're not done building out this this function or this graph kill API. So in the next video will take a look at adding dependencies to this lambda function, like using other MPM packages, and how we can handle parameters. And maybe we'll add something fun and fetch some actual data. Alright, thank you for joining me. I hope you enjoyed this, and I'll see you next week. Bye now.
Top comments (0)