Deploy Netlify Functions with TypeScript
Tags: codenewbie, serverless, typescript, tutorial
Published: 2020-08-10 10:58:59

---
title: Deploy Netlify Functions with TypeScript
published: true
description: A step-by-step guide to deploy your very own Netlify Function with TypeScript.
tags: codenewbie, serverless, typescript, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bhzez7x6z4oxspvb5jfp.png
---

Netlify has recently reached 1 MILLION DEVELOPERS. That’s *a lot* of happy consumers. To celebrate that, here‘s a step-by-step guide to deploy your very own Netlify Function with TypeScript.

📹 If you prefer, you can have this post as a screencast video.

{% youtube 3-Ie6p5ySKQ %}

Please don’t forget to 👍 and 🔔 on your way out if it helped you. It would help me a ton!!! 💕

Also, check the whole source code on [github/monster-as-a-service](https://github.com/atilafassina/monster-as-service)

## Configuring `netlify.toml`

Our first needed step is to configure our Netlify deploy. If you prefer, you can set this up on the dashboard as well, but I find the configuring file more straightforward. To each their own, though.

```toml
[build]
  command = "yarn build"
  functions = "lambda"

# this is actually a Rewrite
# totally optional, but makes up for
# a much better UX
[[redirects]]
  from = "/"
  to = "/.netlify/functions/index"
  status = 200
```

## Teaching TypeScript to Babel

Now we need to setup our `.babelrc` so Babel can use the TypeScript compiler (`tsc`)

```json
{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      }
    ]
  ]
}
```

## Create your script tasks

Almost done, run over to your `package.json` and add the two tasks you’re going to need:

```
"build": "netlify-lambda build src",
"ts-check": "tsc --noEmit --lib ES2015 ./src/*.ts"
```

The only mandatory one is `build`, but I imagine you will want to be able to check all your types at some point. For any production level TypeScript code I’d consider a good practice to check your types on CI pipeline, at the very least.

🚨 That's because Babel will not check your types, simply run the compiler.

## Bare bones function with TypeScript

The only thing you need to have a working Netlify Function is to export a `handler` method from your `.js` or `.ts` file. Netlify Functions run AWS-Lambdas under the hood. So, to have your `handler` typed, you can simply add `types/aws-lambda` and you’re good to go.

Here’s a useful example:

```ts
import { APIGatewayEvent, Context } from 'aws-lambda'

export async function handler (
  event: APIGatewayEvent,
  context: Context
) {

  const { msg } = event.queryStringParameters

  return {
    statusCode: 200,
     headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ msg })
  }
}
```

In that case, if you hit `https://your-lambda.netlify.app?msg=BlackLivesMatter` if will return the following `json`:

```json
{ 
  "msg": "BlackLivesMatter"
}
```

I recommend you to install `netlify-dev` globally so you can simulate production environment in your machine. If you have the package, you can run `netlify dev` and it will boot up a server for you and expose your lambda on `https://localhost:8888` by default.

If linked to your Netlify Account, the CLI will also allow you to deploy your project without pushing it to anywhere.

## Deploy

Netlify offers you a few ways of deploying your code. The most common is by setting Continuous Deployment by integrating it with your Github, Gitlab, or Bitbucket account.

Another way to do it though, is using `Netlify-Dev` CLI and hitting `netlify deploy`.

## 💌

In case you have found this post useful, please consider [sharing it with your network](https://twitter.com/intent/tweet?text=I enjoyed this article on @ThePracticalDev: https://dev.to/atila/netlify-typescript by @AtilaFassina), that would help me a lot to continue sharing posts like this and others. 😁