DEV Community

How to deploy a Node/Express App to Vercel

Andrew Baisden on September 17, 2020

This is just a quick simple example of course more complex applications will work as well. Prerequisites Step 1 Create an account with...

Read full post

Saad Abbasi • May 28 '21

not working , getting this error Due tobuildsexisting in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings

Md Shahjalal • Apr 11

Brother have you solved this issue?

⚡Priyang⚡ • Apr 14 '22

You have to remove build script from your package.json file

Chrome#4181 • Oct 26 '21

yeah, Any solution?

Schalk Neethling • Feb 28 '22

Thank you for the post! I think the final paragraph is missing one last line. While the vercel CLI will output this, some folks might miss it. Running vercel will give you a preview deploy URL to test.

If you are happy with the result, run vercel --prod to deploy to the production URL.

José María CL • Jul 13 '23

In my case, I needed to use the same base URL to load both the page request and the assets that are included in each page.

Requests:

GET: mywebsite.com/customer/favorites
  \- GET: mywebsite.com/assets/images/logo.svg
  \- GET: mywebsite.com/assets/css/bootstrap.min.css
  \- GET: mywebsite.com/modules/shared/web-components/item-list.js

Files structure:

public
 \- assets
    \- images
    \- css
 \- modules
    \- admin
    \- customer
    \- shared
server.js
package.json

So, I wrote a vercel.json file that takes all the request URLs without file extensions and pass them to the server.js file, while the request URLs that have a file extension (like .css, .js, .img) are taken as static calls to the public directory

{
  "name": "express-static-website",
  "version": 2,
  "public": true,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    },
    {
      "src": "public/**",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/((?!.*\\.\\w+$).*)",
      "dest": "/server.js"
    },
    {
      "src": "/(.+\\.[a-z]+)$",
      "dest": "/public/$1"
    }
  ]
}

Sunny Gandhwani • Jan 5

I tried to apply the same settings with other src regex and struggled a lot but nothing worked till I tried your solution.

Thank You, so much bro 🙏

José María CL • Mar 1

I'm happy it helped you :)

Krish Nerkar • Mar 30 '21

how to set the port in vercel for it to know which port to serve the app on

Andrew Baisden • Apr 2 '21

Hi I am not sure what you mean I think Vercel assigns a default port that can't be changed. However you can use whatever port you want locally.

Krish Nerkar • Apr 2 '21

What port does it assign by default, like what should I set here app.listen(8000, ()=> {
console.log("app started")
})

Andrew Baisden • Apr 2 '21 • Edited

I think it uses port 3000. But regardless if you use the below it should be fine. The code process.env.PORT means that whatever is in the environment variable PORT, on Vercel's end gets assigned as the port number. Otherwise it uses 3000 or whatever port number you put there.

const port = process.env.PORT || 3000;

Krish Nerkar • Apr 2 '21

I tried it, but dosent work, just gives me a 404 page on vercel

Andrew Baisden • Apr 2 '21

Hmm is your operating system Linux? Linux is not well supported by Vercel when using this method.

Krish Nerkar • Apr 2 '21

Nope, I'm using plain windows, but I just can't get the app running on vercel for some reason, it's working perfectly well on localhost and even zeet.co (as you have an option to set a port to listen on) but can't figure out vercel

Do you have some github repo or anything which u can link which successfully deploys an express app to vercel

Andrew Baisden • Apr 2 '21

Here Vercel Node App

Krish Nerkar • Apr 8 '21

I checked it out and tried to recreate it but with my app, but still no success :(

here's the repo, if you can point out what mistake i am making : github.com/Krish-Nerkar/genzmafia....

Rutik • Jul 13 '21

This Works Fine for Me with path.resolve(). Thanks !!

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

Sagar Vilasrao Shelke • Mar 28 '23

Thank you for this. Working perfectly for me.

Comment deleted

krehwell • Mar 7 '21 • Edited

hey there. after you save the last script vercel.json run command vercel --prod instead of just vercel command as the author says. it works for me

Andrew Baisden • Oct 14 '20

Hey I just tried it and it's still working. What is your operating system and which browser did you try it in? Are you sure that you followed all of the steps what errors did you get?

LeanDev • Oct 15 '20

Hello, im on linux mint 20, node 12.18.3, chrome 85.0.4183.121. I don't get any erros per se but the deployment page displays my source code as if it was on a directory listing instead of running it

Andrew Baisden • Oct 15 '20

Ok I think that its likely a Linux issue because I have another Vercel guide that uses Python and a few people had problems getting it to work on Linux as well How to deploy a Python/Flask App to Vercel The system architecture is different so I think it changes the paths. You could check out the docs here vercel.com/docs or find a solution on google. If I had Linux I would be able to debug it.

LeanDev • Oct 15 '20

Alright i'll look it up, thanks for the help!

Chloé Cuny • Dec 14 '20 • Edited

Bonjour à tous,
Je suis sous Linux, et j'ai crée un projet node/express que j'aimerais déployer sur Vercel. J'ai suivi toutes vos recommandations mais rien à faire, ça m'affiche uniquement l'architecture de mon projet mais pas le résultat final ...
Quelqu'un aurait une idée?

Andrew Baisden • Dec 17 '20

Hé là, je crois que c'est parce que Vercel ne prend pas entièrement en charge Linux lors de l'utilisation de cette méthode. L'utilisation des fonctions sans serveur est une solution possible, mais je ne l'ai pas encore essayée. vercel.com/docs/serverless-functio...

Syed_Sibteali_Baqar • Sep 7 '22 • Edited

Thanks for the tutorial. Everythings working fine for me first time but when i connect my repository with this deployment and then push new changes, new deployment has white screen and nothing works. Thanks for helping

Andrew Baisden • Sep 10 '22

Hey, this has become deprecated Vercel recommends that everybody uses Serverless Functions now. Follow the documentation and you should be able to get it working. I don't have a tutorial on it yet.

Supported Languages for Serverless Functions

Erick Ventura • Oct 31 '20

Thanks you help me a lot

Shashwat Verma • Oct 31 '20

I also faced one more problem as I was using templating engines. read the docs, it doesn't perfectly support EJS.

Andrew Baisden • Nov 16 '20

Using serverless functions could be a solution vercel.com/docs/serverless-functio...

However you can get it working with normal html files.

1 - Create a folder in the root directory called views and put an index.html file inside of it.

2 - Add the code below to your index.js file

const path = require('path');

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/views/index.html'));
});

Now you can use html pages for your routes.

Sudarshan K J • Nov 10 '20 • Edited

Thank you so much for this! It works effortlessly. To include the vercel.json file was not known to me earlier

DevByJESUS • May 13 '21

I am on linux , but everything worked fine for me , thanks man

Jordan Turner • Sep 12 '21

Okay so now how to integrate a vercel database?

Andrew Baisden • Sep 10 '22

Hey, this has become deprecated Vercel recommends that everybody uses Serverless Functions now. Follow the documentation and you should be able to get it working. I don't have a tutorial on it yet.

Supported Languages for Serverless Functions

Shashwat Verma • Oct 31 '20

thanks, a lot. I'm not just having a problem with static assets.
I've kept my assets/images in the public folder but that doesn't work.
please provide me a solution.

Andrew Baisden • Nov 16 '20 • Edited

Do the following to get images working.

1 - Create a folder called public and put it in the root directory

2 - Add these lines to your index.js file

const path = require('path');

app.use('/static', express.static(path.join(__dirname + '/public')));

3 - Put some images in the public folder I will use cyberpunk.png as an example

4 - See localhost and Vercel link examples below. Change the port, username and images to suit your needs.

localhost:3000/static/cyberpunk.png

vercel-node-app.yourusername.verce...

Kal An Zans • Apr 20 '21

Fantastic! Thank YOU! :^)