Deploy an express application to Vercel.com with Typescript

After a long time, I got have to find out the way to deploy an express application to Vercel.com with typescript language.

Following the steps below:

1. Creating new a repository in Github and clone it locally.

git clone <repository_url>

2. Initial project

npm init -y

3. Installing vercel cli to global

sudo npm install -g vercel

4. Login to Vercel

vercel login

5. Installing develop package to project

npm install typescript @types/express vercel

6. Install express package to build a server.

npm install express

7. Edit file package.json

  ...
  "scripts": {
    "start": "vercel dev",
    "deploy" : "vercel deploy --prod"
  },
  ...

8. Creating new folder /api in root source code.

mkdir api

• /api is endpoint folder where to run your API in server Vercel. Make sure all files API are in there.
• Example: I need api to say hello in URL : /api

touch /api/index.ts

import { Request, Response } from "express";

export default async (req: Request, res: Response) => {
  res.json({ message: "Hello guys. Welcome to Vercel" });
};

• Example: I need API to list out all products in URL :/api/product.

touch /api/product/list/index.ts

import { Request, Response } from "express";

export default async (req: Request, res: Response) => {
  const { page, limit } = req.query;
  res.json({ message: "Product api has working", data: [page, limit] });
};

9. Running vercel develop in local.

npm run start

Choosing your options in command.

10. Testing api

• /api/index.ts

curl -v http://localhost:3000/api
...
< HTTP/1.1 200 OK
< cache-control: public, max-age=0, must-revalidate
< server: Vercel
< x-vercel-id: dev1::dev1::82tm8-1632930383166-b3c4fa833b80
< x-vercel-cache: MISS
< content-type: application/json; charset=utf-8
< content-length: 43
< etag: W/"2b-LDdVVhhCtB0dbrHbCnaU+b5JYWc"
< date: Wed, 29 Sep 2021 15:46:23 GMT
< connection: close
<
* Closing connection 0
{"message":"Hello guys. Welcome to Vercel"}

• /api/product/list/index.ts

curl -v http://localhost:3000/api/product/list\?page\=1\&\&limit\=10
...
< HTTP/1.1 200 OK
< cache-control: public, max-age=0, must-revalidate
< server: Vercel
< x-vercel-id: dev1::dev1::82tm8-1632930567830-9c12b64cada1
< x-vercel-cache: MISS
< content-type: application/json; charset=utf-8
< content-length: 55
< etag: W/"37-0GNlWDxglCghRUJj/oI+UYTMPqY"
< date: Wed, 29 Sep 2021 15:49:27 GMT
< connection: close
<
* Closing connection 0
{"message":"Product api has working","data":["1","10"]}

11. Deploy your application to Vercel.com

npm run deploy

• Note: why the code of express is different? See this article Using Express.js with Vercel
• Note: you can deploy your project to vercel without command npm run deploy. See this article Deploy Express.js app to Vercel

And we done. Hope this article will help something for you.

Enjoy your time 🪴

Thank you for reading. See you in next article.

Comments

[Gaurav Kumar]

This configuration made me stuck to build step.