DEV Community

Cover image for How to deploy a Node/Express App to Vercel
Andrew Baisden
Andrew Baisden

Posted on • Updated on

How to deploy a Node/Express App to Vercel

This is just a quick simple example of course more complex applications will work as well.

Prerequisites

Step 1

Create an account with Vercel if you don't already have one.

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

Step 2

Use npm to install Vercel globally on your computer https://www.npmjs.com/package/vercel

npm i -g vercel
Enter fullscreen mode Exit fullscreen mode

Setup the project

Create a project

mkdir vercel-node-app
cd vercel-node-app
touch index.js
npm init -y
npm i express
Enter fullscreen mode Exit fullscreen mode

Open the project in your code editor and then create a Node server in the index.js file

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Home Page Route'));

app.get('/about', (req, res) => res.send('About Page Route'));

app.get('/portfolio', (req, res) => res.send('Portfolio Page Route'));

app.get('/contact', (req, res) => res.send('Contact Page Route'));

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

app.listen(port, () => console.log(`Server running on ${port}, http://localhost:${port}`));
Enter fullscreen mode Exit fullscreen mode

Create a run script in the package.json file

    "scripts": {
        "start": "node index.js"
    },
Enter fullscreen mode Exit fullscreen mode

Run the command below to see your Node app working locally in the browser

npm run start
Enter fullscreen mode Exit fullscreen mode

Deploying to Vercel

Make sure that you are in the root folder for your project and then run the command vercel in your terminal.

Use the project setup settings below as a guide to setup your own project with Vercel.

? Set up and deploy “~/Desktop/username/vercel-node-app”? [Y/n] y
? Which scope do you want to deploy to? username
? Link to existing project? [y/N] n
? What’s your project’s name? vercel-node-app
? In which directory is your code located? ./
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] n
Enter fullscreen mode Exit fullscreen mode

Once that is complete it is going to give you some links. The app is NOT going to work yet it is only going to show you the code inside of your index.js file. You need to create a vercel.json file and put it in the root folder so that Vercel knows that it is a Node application. And it is very important that your index.js file remains in the root folder along with your other server side code for the project otherwise your app won't work.

Create a vercel.json file and put it in the root of your project folder and then add the code below

{
    "version": 2,
    "builds": [
        {
            "src": "./index.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Now run the command vercel again to deploy your app. Open the Production link and your app should be working online with full working routes.

Top comments (37)

Collapse
 
saadabbasi profile image
Saad Abbasi

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

Collapse
 
chromeowo profile image
Chrome#4181

yeah, Any solution?

Collapse
 
priyang_bawa profile image
⚡Priyang⚡

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

Collapse
 
schalkneethling profile image
Schalk Neethling

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.

Collapse
 
akkuldeep profile image
Rutik

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

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

Collapse
 
seeprogramming profile image
Sagar Vilasrao Shelke

Thank you for this. Working perfectly for me.

Collapse
 
nerkar_krish profile image
Krish Nerkar

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

Collapse
 
andrewbaisden profile image
Andrew Baisden

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.

Collapse
 
nerkar_krish profile image
Krish Nerkar

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

Thread Thread
 
andrewbaisden profile image
Andrew Baisden • 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;
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
nerkar_krish profile image
Krish Nerkar

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

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

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

Thread Thread
 
nerkar_krish profile image
Krish Nerkar

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

Thread Thread
 
andrewbaisden profile image
Andrew Baisden
Thread Thread
 
nerkar_krish profile image
Krish Nerkar

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....

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
chema profile image
José María CL

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
Enter fullscreen mode Exit fullscreen mode

Files structure:

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

Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tasosy2k profile image
LeanDev

Doesn't work, i have the bare minimum express app with the exact vercel config as you

Collapse
 
krehwell profile image
krehwell • 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

Collapse
 
andrewbaisden profile image
Andrew Baisden

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?

Collapse
 
tasosy2k profile image
LeanDev

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

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

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.

Thread Thread
 
tasosy2k profile image
LeanDev

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

Collapse
 
sibteali786 profile image
Syed_Sibteali_Baqar • 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

Collapse
 
andrewbaisden profile image
Andrew Baisden

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

Collapse
 
chloe0307 profile image
Chloé Cuny • 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?

Collapse
 
andrewbaisden profile image
Andrew Baisden

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...

Collapse
 
erickvh_ profile image
Erick Ventura

Thanks you help me a lot

Collapse
 
zippytyro profile image
Shashwat Verma

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

Collapse
 
andrewbaisden profile image
Andrew Baisden

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'));
});
Enter fullscreen mode Exit fullscreen mode

Now you can use html pages for your routes.

Collapse
 
krankj profile image
Sudarshan K J • Edited

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

Collapse
 
edgaremmanuel profile image
DevByJESUS

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

Collapse
 
jord profile image
Jordan Turner

Okay so now how to integrate a vercel database?

Collapse
 
andrewbaisden profile image
Andrew Baisden

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

Collapse
 
zippytyro profile image
Shashwat Verma

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.

Collapse
 
andrewbaisden profile image
Andrew Baisden • 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')));
Enter fullscreen mode Exit fullscreen mode

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...