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

#typescript #express #node #vercel

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.

Read next

tanay profile image

Nuxt Authorization: How to Implement Team Role-Based Access Control in Nuxt 3

Tanay Karnik -

sarthak_niranjan_3bd6cb5f profile image

TS Playground: Top Online Compilers for TypeScript Beginners

Sarthak Niranjan -

joodi profile image

Next.js & Hono.js Starter Project 🚀

Joodi -

muzaffar640 profile image

TypeScript and ReactMarkdown: A Tale of Types, Tears, and Triumph

Muzaffar Hossain -