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 !
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"
}
]
}