Project worked fine before migrating it to typescript, now 404

Expected / pre-typescript
Pre-typescript express app hosted on vercel would route all traffic to my server.js properly rendering the home page at ‘/’ route. The site could then be navigated through all other endpoints and POST and GET data and views.

Current
Now, I am getting error 404. I have been trying so many different configs from reading the documentation. I have since installed vercel CLI so I can test more things instead of having to redeploy every time. The dist files are already compiled locally and cli vercel dev starts the app and shows it listening on port 3000 but when I open the app vercel dev crashes with a vercel 502 error and shows an error in the console that ports 3000 is already in use which makes me think that vercel cli uses port 3000 and when I send a request my app tries to run on 3000 to and crashes ? but I don’t know.
locally without vercel. npm run build , npm start, runs the project fine locally.

Current JSON

vercel.json
{
    "builds": [
      {
        "src": "dist/server.js",
        "use": "@vercel/node"
      }
    ],
    "routes": [
      {
        "src": "/(.*)",
        "dest": "dist/server.js"
      }
    ]
  }
package.json
{
  "name": "my-website",
  "version": "1.0.0",
  "description": "Landing page of my website. Meant to serve as a portal to my projects",
  "type": "module",
  "main": "./dist/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./dist/server.js",
    "tsc": "tsc",
    "copy-views": "cpy \"src/**/*.mustache\" dist --parents",
    "build": "npm run tsc && npm run copy-views",
    "type-check": "tsc -p tsconfig.json --noEmit"
  },
  "keywords": [],
  "author": "Keegan Churchill",
  "license": "MIT",
  "dependencies": {
    "@types/expr-eval": "^1.0.2",
    "body-parser": "^1.20.3",
    "dotenv": "^16.4.7",
    "expr-eval": "^2.0.2",
    "express": "^4.21.2",
    "mustache-express": "^1.3.2",
    "mysql2": "^3.11.5",
    "nodemailer": "^6.9.16"
  },
  "devDependencies": {
    "@types/express": "^5.0.0",
    "@types/node": "^22.10.2",
    "cpy-cli": "^5.0.0",
    "ts-node": "^10.9.2",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.7.2"
  }
}
tsconfig.json
{
  "compilerOptions": {
         "target": "ES2020",
         "module": "ESNext",
         "rootDir": "./src",
         "moduleResolution": "node",
         "allowJs": false,
        "outDir": "./dist",
         "esModuleInterop": true, 
        "forceConsistentCasingInFileNames": true,
        "strict": false,
        "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["dist", "node_modules"],
}

HERE IS THE CONFIG WHILE APP WAS WORKING ON VERCEL

working state (pre-typescript) vercel.json
{
    "version": 2,
    "builds": [
      {
        "src": "app/server.js",
        "use": "@vercel/node"
      }
    ],
    "routes": [
      {
        "src": "/(.*)",
        "dest": "app/server.js"
      },
      {
        "src": "/public/(.*)",
        "dest": "/public/$1"
      }
    ]
  }

git hub repo link

Typescript, Mustache, Express, MySQL

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

If you’re having trouble deploying an Express app, this guide can help.

You can also ask v0 for suggestions tailored to your own project setup.

I have tried all these steps and I think some of them need to implemented with my project but none of them fixes my specific issue. I am trting to isolate the problem of “App deployed and working on vercel, chnaged to typescript, app not working on vercel” . Even though it is an express app I didnt use any api rewrites and it worked fine, not saying I don’t need to add rewrites but when added it didn’t solve or progress this issue so there is something else to solve.

Hi,

We no longer needs to define these in configuration.

It sounds like you are trying to run Server on Vercel platform which isn’t supported being a serverless platform. I will reading this article to learn more about Using Express.js with Vercel

Thank you for the reply and Happy New Year! Yes, I did read that documentation and I think I am now following the proper expressJS use case. What was interesting to me is that I was not following the expressJS vercel protocol before and it was working. Then I migrated to Typescript and I couldn’t get vercel to compile and run it. Oddly enough this config fixed it and had it running on vercel with no app exporting. However CLI vercel dev command would not run it without

export app default

This vercel.json fixed my issues with no export.

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

This worked , but to satisfy the CLI I only had to add the export as mentioned earlier. Is there something going over my head, I am still learning , I didn’t have to do any “API/” routing maybe because this is just a monolithic app for now and expressJS is serving up the frontend as well as completing backend operations.

Thanks again for your time and any clarifications.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.