Ha Tuan Em

Posted on Jul 4, 2021 • Updated on Sep 29, 2021

Deploy Express.js app to Vercel

#javascript #vercel #express #node

After research how to deploy Express.js app to Vercel. Finally, I found and got have an application has deployed to Vercel. It's take a lot of time from me but I am happy and hope this article will help something to you.

I. First of all, creating new Github repository and init new project nodejs.

II. Creating new project in `Vercel`

III. Installing package `express` to nodejs app.

IV. Creating and endpoint file `index.js` in root source.

V. Creating APIs in `./api` folder or you can rename anything which you like.

Here is an example for manage product from ./api/product.

VI. Testing before commit source to Github.

After testing is 👌. Commit them to git to see something awesome.

VII. Ready to serve in Vercel.

VIII. Something went wrong in Vercel.

Because Vercel just supports API from Framework JS as NEXT.JS, Nuxt.JS,... So if we develop a standalone application we need to configure or tell the server of Vercel how is it work by vercel.json file.

IX. Add new `vercel.json` file to root source.

Commit it to GitHub and make sure version is 2 - this is required from Vercel.

X. Done, enjoy your moment.

Thanks for reading.
And I hope something good to you.
Here is repository which use in this post.

XI. Or you can follow this tutorial in youtube.

Top comments (23)

Catur Wicaksono • Oct 11 '21

this is awesome.. but when i try to build using express generator, it doesn't work, is there any help :(

Ha Tuan Em • Feb 27 '22

Vercel is not supporting the Express Generator at the moment. Becasue it's attach to the pattern of serverless. Instead, you can use express traditional. Thanks.

Jonathan Gamble • Dec 24 '21

Could you show us how to do this with Angular Universal or NestJS?

Ha Tuan Em • Feb 27 '22

I will try it.

mohaymen_rafi • Feb 7 '22

Thanks!

latze • Jan 27 '22

So i created an api with express
can i use vercel to deploy it?

Ha Tuan Em • Feb 27 '22

Yes, you can.

Felipe • Dec 1 '21

Thanks!

thechallengerr • Mar 22

But how can I deploy a express - handlebars to vercel ? Here is my folder structure and vercel.json :

"builds": [
        {
            "src": "src/*.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "./src/routes/index.js"
        }
    ]

Sami Kalammallah • Sep 10 '21

How about a full stack app where I use express on folder /server and react on /client ?

Ha Tuan Em • Sep 21 '21

Waiting for my new post 😀

Barhoumimohamedali • Aug 9 '21

thanks , this is really useful!

sid-talesara • May 19

Thanks man. I was stuck in last step and this helped me a lot.

Khaleel Gibran • Jul 5 '21

This is really great, but isn't that the whole point of serverless functions?

Ha Tuan Em • Jul 5 '21

Actually, Express is a traditional server. It's not supported by serverless. But you still want to covert Express to serverless app. You can find out in this article. But I recommend you should using Next.js to making an awesome application with full serverless function.
Thanks =)

Feco • Sep 19 '21

Thanks @hte305 !

Ha Tuan Em • Sep 21 '21

Hope, it helps something to you.

Kamal Hossain • Sep 1 '21

Is it completely free?

Ha Tuan Em • Sep 21 '21 • Edited

As you wish 😉

kpripper • Jun 6

Your app doesn't work express-vercel-theta.vercel.app
Cannot GET /

MechInTech • Oct 17 '22

this is awsome ,hey can i use mongodb data base for this as well

Maria Campbell • Nov 29 '22

I'm working on a next.js app which uses mongod and host my backend on MongoDB Atlas. Yes, you can use MongoDB. And better yet would be to use Mongoose because of its schemas.

Agustin Cruz • Dec 2 '22

Hi ! I am having an issue, I can see my express app (which has front too) in localhost successfully, but when i deploy it in vercel, I cannot see the app, what should i do?}
ThankS!

View full discussion (23 comments)

DEV Community

Deploy Express.js app to Vercel

I. First of all, creating new Github repository and init new project nodejs.

II. Creating new project in `Vercel`

III. Installing package `express` to nodejs app.

IV. Creating and endpoint file `index.js` in root source.

V. Creating APIs in `./api` folder or you can rename anything which you like.

VI. Testing before commit source to Github.

VII. Ready to serve in Vercel.

VIII. Something went wrong in Vercel.

IX. Add new `vercel.json` file to root source.

X. Done, enjoy your moment.

XI. Or you can follow this tutorial in youtube.

Top comments (23)

Read next

Componente de Paginação para React com Chakra UI no CrazyStack Next.js

Understanding JavaScript Strict Mode

Stop using express.js

How to detect unnecessary renderings of DOM elements in your web app to improve performance

I. First of all, creating new Github repository and init new project nodejs.

II. Creating new project in Vercel

III. Installing package express to nodejs app.

IV. Creating and endpoint file index.js in root source.

V. Creating APIs in ./api folder or you can rename anything which you like.

VI. Testing before commit source to Github.

VII. Ready to serve in Vercel.

VIII. Something went wrong in Vercel.

IX. Add new vercel.json file to root source.

X. Done, enjoy your moment.

XI. Or you can follow this tutorial in youtube.

Read next

Componente de Paginação para React com Chakra UI no CrazyStack Next.js

Understanding JavaScript Strict Mode

Stop using express.js

How to detect unnecessary renderings of DOM elements in your web app to improve performance

II. Creating new project in `Vercel`

III. Installing package `express` to nodejs app.

IV. Creating and endpoint file `index.js` in root source.

V. Creating APIs in `./api` folder or you can rename anything which you like.

IX. Add new `vercel.json` file to root source.