typescriptexpressdeploymentvercel

Compiling Typescript in vercel?


I am hosting a simple monolithic web-app on vercel. I have migrated the code to typescript so the project now uses: Typescript, Mustache, ExpressJS, MySQL. The issue is I can't get vercel to compile the typescript. After many experiments, reading as many docs as I could and tweaking and adding several configurations, these are my .JSON files now.

vercel.json

{
  "version": 2,
  "buildCommand": "npm install --include=dev && npm run build",
  "outputDirectory": "dist",
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/dist/server.js"
    },
    {
      "src": "/public/(.*)",
      "dest": "/public/$1"
    }
  ]
}

packackage.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"],
}

Specifically I am getting an error 404 code not found on vercel build log doesn't show what build command was run. Everything compiles and runs locally.

I have tried all kinds of build commands , even tried echoing the command to see if it would print in the vercel build logs. I have no build command overrides in the project settings they are all greyed out as vercel is expecting vercel.json. I am also trying to install dev dependancies incase the issue is that vercel isn't installing the typescript compiler. It is all kind of confusing because there are no build errors , only code not found errors. In my mind that leaves 2 options. Vercel is not running the build command in vercel.json or in package.json. Or vercel is building things but can't find dist/server.js. Another thing to note is that pre-typescript the express app was hosted on vercel with no issues, properly routing to the home page. Thank you all vercel experts hobbyist, Happy Holidays !


Solution

  • Here is the vercel.json that fixed my issues. Mainly pointing vercel builds to server.ts, not server.js.

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