DEV Community

Cover image for Deploy an express application to Vercel.com with Typescript
Ha Tuan Em
Ha Tuan Em

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

2. Initial project

npm init -y
Enter fullscreen mode Exit fullscreen mode

3. Installing vercel cli to global

sudo npm install -g vercel
Enter fullscreen mode Exit fullscreen mode

4. Login to Vercel

vercel login
Enter fullscreen mode Exit fullscreen mode

5. Installing develop package to project

npm install typescript @types/express vercel
Enter fullscreen mode Exit fullscreen mode

6. Install express package to build a server.

npm install express
Enter fullscreen mode Exit fullscreen mode

7. Edit file package.json

  ...
  "scripts": {
    "start": "vercel dev",
    "deploy" : "vercel deploy --prod"
  },
  ...
Enter fullscreen mode Exit fullscreen mode

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

mkdir api
Enter fullscreen mode Exit fullscreen mode
  • /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
Enter fullscreen mode Exit fullscreen mode
import { Request, Response } from "express";

export default async (req: Request, res: Response) => {
  res.json({ message: "Hello guys. Welcome to Vercel" });
};
Enter fullscreen mode Exit fullscreen mode
  • Example: I need API to list out all products in URL :/api/product.
touch /api/product/list/index.ts
Enter fullscreen mode Exit fullscreen mode
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] });
};
Enter fullscreen mode Exit fullscreen mode

9. Running vercel develop in local.

npm run start
Enter fullscreen mode Exit fullscreen mode

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"}
Enter fullscreen mode Exit fullscreen mode
  • /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"]}
Enter fullscreen mode Exit fullscreen mode

11. Deploy your application to Vercel.com

npm run deploy
Enter fullscreen mode Exit fullscreen mode

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

Enjoy your time 🪴

Thank you for reading. See you in next article.


Buy me a coffee

Top comments (1)

Collapse
 
gauravk_tweet profile image
Gaurav Kumar • Edited

This configuration made me stuck to build step.