[Fixed] How to deploy ExpressJS Node-application to Vercel. Getting 404: NOT_FOUND error – Express

The Problem:

When deploying an ExpressJS Node application to Vercel, the user encounters a 404: NOT_FOUND error. The user has tried various solutions, including modifying the vercel.json file, but none have resolved the issue. They suspect incompatibility between ExpressJS and Vercel and seek a solution or advice on alternative deployment options.

The Solutions:

Solution 1: Follow the provided steps

1. Create an ExpressJS project using the express-generator command.
2. Add an index.js file to serve as the serverless function entry point in the project’s root directory.
3. Add a vercel.json configuration file to the project root directory.
4. Deploy the project to Vercel using the default "Other" configuration.

Solution 2: Serving Static Content

To serve static content, like HTML, CSS, and JavaScript, in your Vercel-deployed ExpressJS application, follow these steps:

• Create a /public folder in the root directory of your project.
• Move your static files (e.g., HTML, CSS, JavaScript) into the /public folder.
• Ensure that TypeScript is compiled and the output is placed in the expected location, typically a /dist directory.
• Update your vercel.json file (at the root of your project) to include the following rewrite rule:

{
  "rewrites": [
    { "source": "(.*)/$", "destination": "/index.html" }
  ]
}

This rewrite rule routes all requests to the /index.html file in your /public folder, allowing you to serve static content through your ExpressJS application on Vercel.

Video Explanation:

The following video, titled "Fixed ERROR 404 on Vercel Deployment - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

Master the art of fixing 404 errors in your Vercel application with our unmissable new video! If you've ever been frustrated by ...