Deploying a backend project with NodeJS and Express on Vercel is pretty straightforward. You just need to keep a few things in mind! I'll walk you through it step by step in this article, and I'll also provide the sample code so you can copy it and try it out in your project.
Iām also sharing the step-by-step process in a video. Donāt forget to subscribe to my channel ā¤ļø.
.
Preparing the project for deployment on Vercel
We'll start by creating a simple project to deploy. In your code editor, create a folder named app. Inside this folder, run the following command in the console:
npm init -y
This will create a package.json file with basic and necessary project information.
Now, inside our app folder, create another file that weāll call index.js. Itās crucial that it's named index.js and not something like app.js or server.js because Vercel will look for a file named index.js when deploying the code.
So the structure should look something like this:
Alright, letās start writing some code in our index.js. Here's a basic example you can use as a reference.
const express = require("express");
const app = express();
const port = process.env.PORT || 3000;
app.get("/", (req, res) => {
const htmlResponse = `
<html>
<head>
<title>NodeJs and Express on Vercel</title>
</head>
<body>
<h1>I am a backend project on Vercel</h1>
</body>
</html>
`;
res.send(htmlResponse);
});
app.listen(port, () => {
console.log(`port running at http://localhost:${port}`);
});
At this point, you likely have your own project or are thinking of deploying something else, but let me give you a quick explanation of the code aboveāit might be useful.
The first thing it's doing is requiring Express and then invoking it in the app constant.
const express = require("express");
const app = express();
Since we're using Express, we need to install it for it to work š
Run this command in the console, always inside the app folder:
npm i express
The second thing (and very important) is the port configuration in the port constant.
const port = process.env.PORT || 3000;
Here, weāre telling it that our project will run on a specific domain, or in our case, on a URL that Vercel will generate for us. We indicate this with (process.env.PORT). Then we tell it that if no domain/URL is configured, it will run on our local server at port 3000 with this: ( || 3000). But no worries! Vercel will configure a URL for us!
Now for the third step, but the important part is already done in step 2. The rest is more about adjusting it to whatever happens in your project. In my case, Iāve just set up some basic HTML code to display in the browser when the server runs.
app.get("/", (req, res) => {
const htmlResponse = `
<html>
<head>
<title>NodeJs and Express on Vercel</title>
</head>
<body>
<h1>I am a backend project on Vercel</h1>
</body>
</html>
`;
res.send(htmlResponse);
});
Finally, we ask the app constant (where Express is running) to listen to the port we configured earlier and give us some feedback in the console.
app.listen(port, () => {
console.log(`port running at http://localhost:${port}`);
});
Now we're ready to test the project on our local server (it will run on port 3000) to check if everything is working. Run this command in the console:
node index.js
Did it work? Well, if everything went well, meaning there were no errors and your project ran successfully on your local server at port 3000, then we're ready to upload it to Vercel.
Preparing project configurations for deployment on Vercel
At this stage, the first thing we need to do is create a JSON file called vercel.json (again, always inside the app folder). Inside this file, we'll add the basic configurations Vercel needs, like this:
{
"builds": [
{
"src": "./index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
I donāt want to go too deep into this, but these are the necessary configurations for the "builds" and "routes" that we need to make the deployment work.
A brief explanation:
Builds: These define how the application is built. In this case, we use our index.js file within the @vercel/node runtime environment.
Routes: These define how the applicationās routes are handled. All URLs represented by /(.*) will redirect to the siteās root (/).
At this point, your project structure should look something like this (or so I hope).
Deploying the project on Vercel
Now for the final part: itās finally time to upload this to Vercel. First, you need to create an account if you donāt already have one. Creating an account on Vercel is completely free, and they wonāt ask for a credit card or anything like that. You can create an account here: https://vercel.com.
There are two ways to deploy: one is by linking a repository, and the other is by using the Vercel CLI and doing everything through the console. I prefer using the console because itās very simple, and thereās no need to upload everything to GitHub. Hereās how to do it.
If youāve never installed Vercel before, now is the time!
Run the following command in your console to install Vercel globally:
npm install -g vercel
Now we can use the CLI and upload the project via the console.
Simply run the vercel command.
vercel
Once you run that command, a few simple questions will appear in your console that you need to answer.
Here they are with explanations:
Set up and deploy:
Here, type āyā for yes.
Which scope do you want to deploy to?
Here, it asks which scope you want to deploy to. I see pab-mchn because thatās my account name, and Iām logged in. If youāre not logged in yet, it will prompt you to log in. Itās a simple process managed through a browser confirmation.
Link to existing project?
Here, it asks if you want to link this to an existing project on Vercel. Type ānā for no, unless you want to link it to a project youāve already created.
Whatās your projectās name?
Here, it just asks for the name you want to give your project. Create one or use the name of your project if you answered āyesā to the previous question.
In which directory is your code located?
Here, it asks where your project is located and suggests ./ as the answer. This is correctāour index.js file is in the projectās root inside the app folder, so the location is right. Simply press "Enter."
And thatās it! Vercel will generate the links to deploy the project, and youāll be able to view it at the URLs displayed in the console. Open them in your browser.
If you want to push it to production, you can run this command (itās suggested in the console too):
vercel --prod
Thatās it!
I hope you get your awesome project up on Vercel, and have a good time doing it.
Best regards,
Pablo.
Top comments (0)