Angular frontend + TypeScript API

The backend-ts API at the root with an Angular and Tailwind app under web/.

atarashi new my-app --preset fullstack-angular

What you get

• core/node-ts
• validation/zod
• db/postgres
• orm/drizzle
• http/express
• mw/cors
• mw/helmet
• mw/error-handler
• obs/pino
• auth/jwt
• web/angular-tailwind
• infra/docker
• lint/eslint-prettier
• test/vitest
• ci/github
• meta/readme
• meta/license
• meta/editorconfig

Files

49 files, 40.9 KB before node_modules.

my-app/
├── .github/
│   └── workflows/
│       └── ci.yml
├── src/
│   ├── config/
│   │   └── env.ts
│   ├── db/
│   │   ├── client.ts
│   │   ├── index.ts
│   │   └── schema.ts
│   ├── lib/
│   │   ├── async-handler.ts
│   │   ├── http-error.ts
│   │   ├── http.ts
│   │   ├── jwt.ts
│   │   ├── logger.ts
│   │   └── password.ts
│   ├── middlewares/
│   │   ├── auth.ts
│   │   └── error-handler.ts
│   ├── routes/
│   │   └── index.ts
│   ├── app.ts
│   └── index.ts
├── tests/
│   └── health.test.ts
├── web/
│   ├── public/
│   │   └── favicon.ico
│   ├── src/
│   │   ├── app/
│   │   │   ├── app.config.ts
│   │   │   ├── app.css
│   │   │   ├── app.html
│   │   │   ├── app.routes.ts
│   │   │   ├── app.spec.ts
│   │   │   └── app.ts
│   │   ├── index.html
│   │   ├── main.ts
│   │   └── styles.css
│   ├── .postcssrc.json
│   ├── angular.json
│   ├── package.json
│   ├── tsconfig.app.json
│   ├── tsconfig.json
│   └── tsconfig.spec.json
├── .dockerignore
├── .editorconfig
├── .env.example
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── Dockerfile
├── LICENSE
├── README.md
├── atarashi.json
├── drizzle.config.ts
├── eslint.config.mjs
├── package.json
├── pnpm-workspace.yaml
├── tsconfig.json
└── vitest.config.ts

Dependencies

• bcryptjs@^3.0.2
• cookie-parser@^1.4.7
• cors@^2.8.5
• dotenv@^17.4.2
• drizzle-orm@^0.44.6
• express@^4.21.2
• helmet@^8.1.0
• jsonwebtoken@^9.0.2
• pg@^8.16.3
• pino@^9.13.1
• pino-http@^10.5.0
• zod@^3.25.76

Development only:

• @eslint/js@^9.37.0
• @types/bcryptjs@^3.0.0
• @types/cookie-parser@^1.4.9
• @types/cors@^2.8.19
• @types/express@^4.17.23
• @types/jsonwebtoken@^9.0.10
• @types/node@^22.19.0
• @types/pg@^8.15.5
• @types/supertest@^6.0.3
• @vitest/coverage-v8@^3.2.4
• drizzle-kit@^0.31.5
• eslint@^9.37.0
• eslint-config-prettier@^10.1.8
• pino-pretty@^13.1.2
• prettier@^3.6.2
• supertest@^7.1.4
• tsx@^4.20.6
• typescript@^5.9.3
• typescript-eslint@^8.45.0
• vitest@^3.2.4

After generating

1. Start the dev server: pnpm run dev
2. Copy .env.example to .env and fill in the blanks
3. Start PostgreSQL: pnpm run db:up
4. Set DATABASE_URL in .env
5. Create the tables: pnpm run db:push
6. Browse the data: pnpm run db:studio
7. Check the API: curl http://localhost:3000/health
8. Start the Angular dev server: pnpm run dev:web
9. Generate a signing key: openssl rand -hex 32
10. Put it in .env as JWT_SECRET
11. Build the image: docker build -t my-app .
12. Lint the project: pnpm run lint
13. Run the tests: pnpm run test
14. Tests read the same environment as the app, so export your .env before running them
15. Push a branch and open a pull request to see CI run
16. Fill in the blank values in .env.example and copy it to .env

Change it

A preset is a starting point, not a cage. Add to it, drop from it, or eject:

atarashi new my-app --preset fullstack-angular --add obs/pino
atarashi new my-app --preset fullstack-angular --remove lint/biome --add lint/eslint-prettier
atarashi add auth/jwt   # later, inside the generated project