How to deploy ExpressJS Node-application to Vercel. Getting 404: NOT_FOUND error

Question

I can find many, many, many, many posts that appear to have the same problem as me, but none of them has an answer that works (nor is accepted). And the questions are either inaccurate or lacking information. So here goes (again):

I'm working on an ExpressJS, TypeScript and Node-application, started from this template: TypeScript-Express-Starter. I'm trying to deploy it to Vercel, but I keep getting a 404-error:

Link in image: "Click here to learn more about this error".

I assume these are the right Vercel-settings:

• Build command: npm run build
• Output Directory: dist
• Install command: npm install

I have it running locally via Nodemon and that works. See the nodemon.json for more info.

Overarching question: How do I get this Node-application (that runs locally) to run on Vercel?

---

Solution attempt 1: Get some Node-application to run on Vercel

I found this medium-article: How to Deploy Node Express API to Vercel Serverless Functions, that deploys a skinny Node-application to Vercel. I tried following those steps, by adding those files to my existing project.

And that worked!!

With those files, it worked! I could now see this:

on my temporary Vercel-URL: https://projectname-c3ddpx8f7-mysecretgithubhandle.vercel.app/

Things to note:

• The vercel.json-file points the routes from the root (and not dist) to the index.js-file in the root. And my Vercel-build-settings (listed higher up) was still the same. Weird!
• The index.js-file is located in the root as well and not in a compiled directory.

I was thinking, if I simply needed to move my compiled project out of dist and into the root? But that seemed so silly that I didn't even try that. Since that also means committing compiled files.

Solution attempt 2: Modify vercel.json-file

Since Solution Attempt 1 got something showing, then I tried modifying vercel.json to this:

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

But then I'm back at the 404.

Solution attempt 3: Is this ExpressJS and Vercel incompatible?

In solution attempt 1, in the index.js-file, the
app.listen(PORT, () => {...-line and the
app.get('/', (req, res) => {...-line is in the same file.

Is this something that makes this Node-ExpressJS-application miraculously climb through the hole of the needle this serverless architecture and therefore work for a tiny example like this?
But bigger setups with ExpressJS doesn't work with it? Hmmm...

Other thoughts

• SSH: I considered trying to SSH onto the server and play with it there. But since it's a serverless architecture, this isn't possible.
• Reason to 404: How do I figure out where this 404-error comes from? Can I catch that in my ExpressJS as a step to debug it? Maybe with something like: app.on('error', (error) => console.error('Server error', error));
• Unable to choose Node in frameworks: It confuses me, that I can't choose Node from the list of frameworks, when creating a new project. Another hint towards that Vercel and Node might not go well hand in hand. But if this is the case, why does the simple example from Solution Attempt 1 then work?! Hmm!!
• Variations of vercel.json: I've tried virtually all combinations of changes in my vercel.json-file, but without luck.
• Discouraging routes and builds: When reading Vercel's documentation about routes and builds, then both sections starts with discouraging using it. Another hint towards incompatibility.

Update - My advice

If you, like me, tried to do this and wonder: 'Can I do this'? Then my advice would be: Don't!!. I've tried this for a good long time, it feels like there is lacking info and an community around Vercel and NodeJS (ExpressJS at least). It's an uphill battle. I ended up just going another way in the end (deploying the app to my own little VPS).

Answer 1

It's possible.
My online demo: https://vercel-express-online-demo.vercel.app.
Github: https://github.com/zhouzhonghao/vercel-express-online-demo.

1. create a express project.

# create ejs express project
npm install -g express-generator
# name is your ejs express project name such as vercel-express-online-demo
express -e [name]

note the default jade express will crash in vercel so we need ejs express.

2. add an index.js file as a serverless function entry under project root folder.

// index.js
require("./bin/www");

3. add a vercel.json config file.

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

4. deploy project in vercel use default "Other" config.