Uncertain how to configure Angular + Express deployment

Help
, ,
5

Hi, @kered13! Welcome :waving_hand:

If you’re deploying an Angular + Express app on Vercel, you’ll need to adjust your setup a bit. Vercel doesn’t work the same way as traditional hosting platforms.

  1. Move your Express routes to Vercel Functions
    Instead of running a full Express server, you’ll need to turn your routes into Vercel Serverless Functions inside an api/ folder. Each endpoint becomes its own file, Vercel automatically handles them as serverless functions.

  2. Set up the Angular frontend
    Make sure your Angular build outputs static files that Vercel can serve directly.

Recommended Project Structure

./
├─ client/                 # Angular app
├─ server/                 # Old Express server (you’ll migrate these routes)
├─ api/                    # Vercel functions
│  ├─ your-routes.ts       # Converted Express routes
├─ vercel.json
├─ package.json

Configuration Steps

  • Build Command: npm run build-client && npm run build-server
  • Output Directory: dist/client (your Angular build output)
  • Root Directory: Keep it as root (./)

Example vercel.json:

{
  "buildCommand": "cd client && ng build",
  "outputDirectory": "dist/client",
  "functions": {
    "api/**/*.ts": {
      "runtime": "@vercel/node@3"
    }
  }
}

I recommend checking out this post from @anshumanb, might be helpful: Express 101: Everything about deploying your Express app on Vercel

Let us know how you get on!

1 Like