Vercel showing Internal Server Error after deploying express app successfully

Question

I just deployed my express app on vercel , the app deployed without any error but now when I go to the link provided by the vercel I see Internal Server Error on the browser.

I am using EJS template engine with my express app as well. This is the folder structure of my project.

this is the package.json of my project

{
  "name": "templates",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node api/index.js",
    "start:dev": "PORT=3000 node server.js",
    "dev": "nodemon api/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "express-ejs-layouts": "^2.5.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}

Im using npm run dev for running project locally and it is running fine.

This is the index.js file code

const express = require("express");
const expressLayouts = require("express-ejs-layouts");
const { formValidationSchema } = require("../schemas/formvalidation");

const app = express();
const PORT = 8080;

app.use(express.static(__dirname + "../public"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.set("views", "./views");
app.use(expressLayouts);
app.set("layout", "../views/layouts/layout");
app.set("view engine", "ejs");

app.get("/", async function (req, res) {
  res.render("index", {
    title: "Welcome to my portfolio!",
    // Other data
  });
});

and this is my vercel.json file code

{
  "version": 2,
  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}

I tried the official next js provided way of using express app on vercel but it still failed https://vercel.com/guides/using-express-with-vercel

Answer 1

1. You need to export the app from index.js file. try placing the below code at the end of index.js file.

   module.exports = app;

2. Update your vercel.json as below.

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

Answer 2

So my project got successfully deployed to the vercel. The issue was a mistake that i made where i didn't properly linked the path to my views folder in index.js , however if someOne is having any issues with that make sure to look into the logs on vercel , it will show you what the issue is . also Mine worked fine with this vercel.json code

{ "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }] }