Create a serverless form submission handler with TypeScript

Jason Lengstorf
InstructorJason Lengstorf
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

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

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.

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today