Ryan Chenkie: [0:00] I've added the orbit functions directory as a new workspace here within my VSCode. You might like to work with it in this fashion, or you can just have it in separate VSCode windows. Before we start deploying to Netlify, let's give ourselves a simple function, which can just be a Hello World example.

[0:15] Come into the functions directory, and create a new file called Ping.js. Netlify is going to look through all of the JS files in the functions directory. It's going to try to create a serverless function from each of them.

[0:28] At its most basic, a serverless function with Netlify looks like this. We say, "exports.handler equals a function."

[0:35] The function that we'll have is going to have this signature. It'll have event, context, and callback. Event and context will have some information about the request coming in.

[0:46] Callback is going to be what we execute to send back a response to the caller. A very simple function would look like this. We would say, "return callback." We'll pass "no" as the first argument.

[0:58] Then the second argument will be the response configuration. We'll want this to have an HTTP status code of 200.

[1:05] Then the body of the response can just be a string. In fact, the body from a serverless function will always be a string. Even if we want to pass back an array of objects or just an object, we'll need to stringify it.

[1:16] We'll pass a simple string here saying, "Hello" from a serverless function. Let's save our function.

[1:23] Then, from the terminal, let's commit this to our Git. Then we'll be able to deploy it.

[1:28] In a new terminal window, I will just open up my orbit functions directory here. I'll do some Git work from the command line. I'll do Git status to see where we're at.

[1:37] Then I'll do Git add everything. I'll commit with a message. The message will say, "Add first serverless function."

[1:46] Then I'll push. Git, push, origin, master. Let's now go over to Netlify so that we can deploy this. Over at the Netlify dashboard, we can do a new site from Git.

[1:58] You can choose the Git provider that you use. I've got GitHub.

[2:04] If you have a private repository setup, then you'll need to come through and enable it. You can come down and search for your repository and click "Save."

[2:19] The next step is to set up some configuration. Normally we've got this build command that we might run. If we have something like a Gatsby website, we can tell Netlify how it should build assets for that site.

[2:30] Since we've got just functions in this case, we can just pass a hash saying that the build command should be ignored. Let's accept that. We'll say, "Deploy site."

[2:40] While the site deploys, let's go into settings. Let's come down to functions. In the functions settings, it asks for a functions directory. Let's set that.

[2:51] Our functions directory is called "functions." We can save that.

[2:56] The next thing we'll want to do since we'll need to make use of it will be our keys for the backend. These keys that we want will be our JWT secret and our Atlas URL.

[3:07] We can configure those in here. This is one of the spots where we can configure environment variables.

[3:12] Coming down to build and deploy, if we go to environments, we can choose to edit variables. The variable name for our first one here can be JWT secrets. That's going to be secret 123.

[3:24] Once again, please make sure to use something stronger than this in production. Then we can say, "new variable." We can have Atlas URL. That's going to be equal to our Atlas URL.

[3:34] I'll go grab that from the environment variables file. Coming into .env, I can grab my Atlas URL. We can save that.

[3:43] Something that I think is a downside here for the environment variable section is that they're displayed on the screen. Normally with services where you can set environment variables these will be obscured if you're viewing them through a dashboard like this.

[3:57] Only when you want to view them, would you be able to view them. Now we can check on the status of our build. Let's go up to deploys.

[4:05] We can see that we've got a published deploy. The URL for our deployment is here. It's at this .netlify.app domain. If we open this up in a new tab, we'll see what we get. What we first get is "Page Not Found."

[4:21] That's because there's nothing that we've deployed with this code that says that anything should exist at this route. However, we can get to our functions, and we can execute them.

[4:29] The way that we do that is we put a slash. We do .netlify, and then we go into functions. That Hello World function was ping.

[4:38] Let's put in ping. We still have a "Page Not Found."

[4:42] Likely what we have to do is re-deploy. That's because we set up our functions directory in our settings after the initial deploy.

[4:50] We can come down here, and we can trigger a deploy. We can say, "Deploy site." Once our build completes, we can see some information about the functions that we've got.

[5:02] Here it says packaging functions from the functions directory. We've got Ping.js.

[5:07] Let's try that function again. We'll refresh this. Now we've got our message -- "Hello from a serverless function." Once again, all of our functions are going to run in this fashion.

[5:17] We'll go to .netlify/functions and then the function name. We just leave off the .js part. One last housekeeping note here is we should actually ignore the .env file from source control.

[5:29] We didn't do that initially, but that's especially important if you're going to have a public repository. You don't want to put your keys, like your Atlas URL and your JWT secret, into source control where others can see it.

[5:41] We've got our first function set up. Let's now start moving everything that we've got in our express API from those endpoints.

[5:48] Let's move all of that over to serverless functions. One note is that we're actually going to leave in place the two endpoints for authenticate and for signup.

[5:57] We could make serverless functions out of these, but in this scenario let's imagine that we want to have our authentication server existing on its own. Then we want to have our data resources be made available from serverless functions.

[6:10] This would approximate the case where you're using something like Auth0. Then you make use of the JSON Web tokens that you get from it when you want to request data.

[6:18] We'll keep our existing express server running locally so that we can have users log in and sign up. We'll move all of the functions for getting data.

[6:27] Everything that is at all of our endpoints for returning data, we'll move all of that over to serverless functions.

Advanced React Security Patterns - Pro Package

Already enrolled?
Sign in to continue learning.