Name: Create a serverless form submission handler with TypeScript
Uploaded: 2021-10-14T11:29:39-05:00
Description: In this lesson, you will learn how to create a Netlify serverless function, powered by TypeScript, to handle form submissions.

Set up a Vite project with React and TypeScript

Set up Vite local dev with the Netlify CLI

Add TypeScript powered serverless functions to a Netlify project

Create a form with React hooks

Create a serverless form submission handler with TypeScript

Submit form data to a Netlify serverless function

Deploy a Vite project with the Netlify CLI

Deploy a Serverless API React Application with TypeScript

In this lesson, you will learn how to create a Netlify serverless function, powered by TypeScript, to handle form submissions.

https://app.egghead.io/api/v1/lessons/react-create-a-serverless-form-submission-handler-with-typescript/subtitles

Jason Lengstorf: [0:00] To create a serverless function that uses TypeScript to handle form submissions, go into this Netlify Functions folder and create a new file. We're going to call this one submit.ts. Inside of it, we're going to import a handler from Netlify Functions.

[0:16] Then we're going to export a const called handler, and that's going to have a return type of handler. It will be an async function that receives the event from the form submission. Whenever you call a serverless function, you get the event. You also get an optional parameter called context. We don't need that this time, so we're only going to be using the event.

[0:39] Next, let's get the name and the favorite color, which are what our form submits, out of the body. We're going to JSON.parse() the event. Because we're using TypeScript, you can see that all the object properties in event have been listed out. Here, we're going to use body. Then just so we can see what's going on, let's add a console log.

[1:03] We'll log name and favorite color. Then we're going to just return a light processing here. We're going to do a status code of 200 and a body we will JSON.stringify(). We'll send back first just the data name and favorite color, but then we also want to create a message out of this.

[1:25] Let's send back my name is name and my favorite color is favorite color. Once we've saved that, we can call this thing done. We now have a serverless function. We can test that, so we need to keep this running here. We can see that it loaded that function submit.

[1:48] Let's open up a new terminal. I'm using iTerm2 so I can hit command tab to open a second tab here. Then I want to test this. I need to post to it so that I can send in a body. Whenever you send in a body that requires a post or post, we can't just use a regular old Git.

[2:04] I'm going to use Curl to do this, and hit Curl-X post. That will let us send a post and then I need to send some data. The data that I want to send is stringify JSON. I'm going to send in a name and the name that I'm going to send in is Jason.

[2:20] We'll send in a favorite color as well. The color that we'll send in is purple. Then once I've done that, I just need to get to the route of our function now. Because it's running locally, that's going to be http://localhost:8888. Then it's .NetlifyFunctionsSubmit.

[2:39] When I hit enter, we get back our data. We can see I submitted Jason, color purple. Here's our sentence. My name is Jason, and my favorite color is purple. We're now successfully submitting to a TypeScript-powered serverless function.

Create a serverless form submission handler with TypeScript

Share this video with your friends

Course

Deploy a Serverless API React Application with TypeScript