Deploy an express application to Vercel.com with Typescript
Tags: typescript, express, node, vercel
Published: 2021-09-29 15:59:02

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.
```bash
git clone <repository_url>
```

### 2. Initial project
```bash
npm init -y
```
### 3. Installing vercel cli to global

```bash
sudo npm install -g vercel
```

### 4. Login to Vercel
```bash
vercel login
```
### 5. Installing develop package to project

```bash
npm install typescript @types/express vercel
```

### 6. Install ***express*** package to build a server.

```bash
npm install express
```

### 7. Edit file ***package.json***

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

### 8. Creating new folder ***/api*** in root source code.
```bash
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***

```bash
touch /api/index.ts
```
```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***.
```bash
touch /api/product/list/index.ts
```
```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.
```bash
npm run start
```
> Choosing your options in command.

### 10. Testing api

- /api/index.ts
```bash
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
```bash
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

```bash
npm run deploy
```
* Note: why the code of express is different? See this article [Using Express.js with Vercel](https://vercel.com/guides/using-express-with-vercel)
* Note: you can deploy your project to vercel without command ***npm run deploy***. See this article [Deploy Express.js app to Vercel](https://dev.to/hte305/deploy-express-js-app-to-vercel-38jb)

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

Enjoy your time 🪴

Thank you for reading.  See you in next article.

<a href="https://www.buymeacoffee.com/hte305" target="_blank">
![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddtyyk0zuud3h7o0sjpq.png)
</a>