Project Structure

How the Angular frontend and Express API share one repo.


The Angular app (src/app) and the Express API (src/api) live side by side in one Angular SSR project.

File tree
src/
├── app/
│   ├── core/                 # Auth client/service, guards, brand, theme
│   ├── pages/                # Landing, auth, admin (dashboard + tasks), errors
│   ├── shared/
│   │   ├── components/       # App chrome (sidebar, brand)
│   │   ├── layouts/          # Auth + admin shells
│   │   └── ui/                # spartan/ui Helm (CLI-managed)
│   ├── app.ts
│   └── app.routes.ts
├── api/
│   ├── features/tasks/       # Express routes + controller
│   ├── lib/                   # Prisma, Better Auth, session, rate limits
│   └── api.ts
├── generated/prisma/          # Prisma client (gitignored; run db:generate)
├── main.ts
├── main.server.ts
├── server.ts                  # Express + Angular SSR entry
└── styles.css
prisma/
├── schema.prisma
├── models/                    # auth.prisma, task.prisma
└── migrations/                 # committed SQL; applied with db:deploy

Adding features

  • UI features go under src/app/pages.
  • API features go under src/api/features.
  • Don't hand-edit Helm sources in src/app/shared/ui — use the spartan CLI to add or update components there.

Server entry

src/server.ts is where Express and Angular SSR meet: Express owns the HTTP server and routes /api/* to the Express API, while everything else falls through to @angular/ssr for server-rendered Angular pages. There's no separate proxy or second process to run.

Prisma layout

The schema is split by domain under prisma/models (auth.prisma, task.prisma) and composed into prisma/schema.prisma. Migrations are committed to prisma/migrations and applied with pnpm db:deploy — see Database & Prisma for the full workflow.

  • Import Aliases — the @core/*, @pages/*, and other TypeScript path aliases used throughout src/app
  • What's Included — what actually lives in src/app/pages out of the box