[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Help](/c/help/9)

# Uncertain how to configure Angular + Express deployment

91 views · 1 like · 4 posts


Kered13 (@kered13) · 2025-10-28

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`?


system (@system) · 2025-10-28

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

https://vercel.com/guides/using-express-with-vercel

You can also ask [v0](https://v0.dev/) for suggestions tailored to your own project setup.


Pauline P. Narvas (@pawlean) · 2025-10-29 · ♥ 1

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`:
```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: community.vercel.com/t/express-101-everything-about-deploying-your-express-app-on-vercel/4870

Let us know how you get on!


system (@system) · 2026-01-20

Hi @kered13! 🙂

We haven't heard back from you. If you're still stuck, feel free to share any updates, logs, or additional context that might help us assist you better!