Uncertain how to configure Angular + Express deployment

Help
, ,
1

I have an app that consists of an Express.js backend and an Angular frontend in a single repo. The project structure (leaving out unnecessary details) looks like this:

./
├─ client/
│  ├─ angular.json
│  ├─ index.html
│  ├─ main.ts
│  ├─ tsconfig.ts
│  ├─ ...
├─ server/
│  ├─ app.ts
│  ├─ ...
├─ shared/
│  ├─ ...
├─ package.json

To run this locally, I do the following:

npm build-server = tsc --project server/tsconfig.json

This command compiles the server typescript code and outputs the resulting javascript to dist/server and dist/shared.

npm build-client = cd client && ng build

This command runs Angular’s compiler and bundler and outputs bundled javascript files to dist/client. The server is configured in code to serve static files from this location.

npm run-server = node dist/server/app.js

This starts the server from the compiled server files. The working directory is the root directory.

I’m trying to figure out now how to translate this to a Vercel config that can build both the client and server files and then run the server. I see that there are deployment settings for Build Command, Output Directory, and Root Directory that I can override, but I’m not sure how I should configure them.

  1. How can I configure this to build both my client and server files?
  2. What should the Output Directory be? Does it need to contain both the server and client files, or only the server files?
  3. What should the Root Directory be? Is this the working directory of the server? Or the directory from which files are served? Should it be the root of my project folder?
  4. How do I tell Vercel how to run my server? It sounds like it automatically looks for an app.{ts,js} file, but how do I point it to the correct location? And should I be pointing it to server/app.ts or dist/server/app.js?
2

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.

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