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.
Top comments (1)
This configuration made me stuck to build step.