In this tutorial, you will learn how to deploy or host your backend project using Vercel serverless function via GitHub.

Before we dive deep into building and configuration, let’s understand the concept of serverless function in Vercel.

This block of code runs in a serverless computing environment provided by Vercel. It allows developers to write and deploy code without worrying about managing or provisioning servers.

With serverless functions, you can dynamically execute specific tasks or respond to requests, scaling automatically based on the incoming traffic.

This approach lets developers focus solely on writing the code logic while the serverless platform handles the infrastructure and scaling aspects.

Now that you understand what serverless function is let's begin.

PREREQUISITE
i. Create or have a GitHub account for free
ii. Create or have a Vercel account for free
iii. Have a Nodejs project

Let's assume you don’t have a Nodejs project already.

1. So, let's create a simple Nodejs project so you can see the workflow.
   Open your terminal or git bash and put the command below

mkdir vercel-app
cd vercel-app

Our project has been created with name vercel-app

2. Now, let's initialize Node.js in the project. At the root of the project. You can just run the command below in the terminal.

npm init -y

You now have Node.js in your project.

3. Next, we need to install the required dependencies, but for this project, it will be just Expressjs, so run the below command in the root of your folder

npm install express

4. Create a new file index.js. This is going to be the entry point of our application. Then copy and paste the code inside.

// index.js
const express = require('express')
const app = express()
const PORT = 4000


app.get('/home', (req, res) => {
  res.status(200).json('Welcome, your app is working well');
})


app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

// Export the Express API
module.exports = app

NOTE: Remember to create .gitignore file, So you can Ignore the node_modules before pushing it to Github

5. Next, we need to create avercel.json file in the root of our directory. This file is responsible for configuring Vercel in our application. Could you add the code below to the file?

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

The above configuration specifies the version of the Vercel configuration file format being used. In this case, it is version 2.
The build array specifies the build settings for this project which takes the index.js as the entry point of this application.
This configuration file tells Vercel how to build and serve the Node.js application.

5. If you can do this, you are set and ready to go live. So, next, you need to push your project to the remote repository on Git Hub. Vercel will listen to the main branch after every push made to the repository to update your deployment.

6. So, if your project is now in the remote repository on Github, next, you need to go to your Vercel dashboard to add a new project from Github, which is the repository of the project you want to deploy.

7. Next, you will need to import the Github repository

8. After importing your project, you can now configure your project. In most cases nothing needs to be done here except for you’re importing the environment variables. So click Deploy.

9. That concludes the process! Your application is now live and running successfully.

You can enjoy the benefits of having your backend Node.js app deployed on Vercel.

Summary

It is important to know that you might encounter errors when deploying your application to production(Vercel), especially if it’s a large project. Therefore it’s good to do proper research on your dependencies/packages, knowing which dependencies/packagies are not supported in production. Additionally, you should always look at the build logs to know where the problem might come from. By taking these precautions, you can proactively address any problems and ensure a smoother deployment process.

Happy Coding!