How to deploy your Serverless Typescript function in a global CDN in seconds for free

By using Vercel (formerly ZEIT or now)

Install Vercel CLI

npm i -g vercel

Create an account here: https://vercel.com/signup

Init your project

mkdir my-api
cd my-api
npm init private
npm install @vercel/node

Install typescript and add tsconfig.json

npm install --save-dev typescript

Then add tsconfig.json:

curl -o tsconfig.json https://gist.githubusercontent.com/vdelacou/1954a25d720f702b4af011ba2773001b/raw/tsconfig.json

Time to code our function!

Vercel will consider all the files in the api folder as a function to deploy.

Create a folder api and create an user.ts file

mkdir api
cd api
touch user.ts
cd ..

and the copy in the user.ts the code below

import { VercelRequest, VercelResponse } from '@vercel/node';
export default (req: VercelRequest, res: VercelResponse): void => {
  res.json({ name: 'Johne', email: 'john@example.com' });
};

Deploy our function

Login to Vercel, you will need your email that you can find here: https://vercel.com/account

vercel login

Follow instructions to login then just launch the command

vercel

Then your API is now deployed in multiple locations and can be called with the $URL shown in your console.

curl --request GET $URL/api/user

Test and Develop our function locally

Just launch

vercel dev

And then you can test locally and live-reload during development

curl --request GET http://localhost:3000/api/user

Add Linter

curl -o .gitignore https://gist.githubusercontent.com/vdelacou/1954a25d720f702b4af011ba2773001b/raw/.gitignore
curl -o .prettierrc https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.prettierrc
mkdir .vscode
curl -o .vscode/extensions.json https://gist.githubusercontent.com/vdelacou/c5f3fd74c5e836706c0adaeb0d383bd0/raw/extensions.json
curl -o .vscode/settings.json https://gist.githubusercontent.com/vdelacou/c5f3fd74c5e836706c0adaeb0d383bd0/raw/settings.json
curl -o .editorconfig https://gist.githubusercontent.com/vdelacou/58484f1c11af70aaa457f4e5c289e893/raw/.editorconfig
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
npm install eslint-config-airbnb-typescript --save-dev
npx install-peerdeps --dev eslint-plugin-prettier
npm install eslint-config-prettier --save-dev
curl -o .eslintrc.json https://gist.githubusercontent.com/vdelacou/1954a25d720f702b4af011ba2773001b/raw/.eslintrc.json