Example 34: Angular Email Builder + NestJS Secure Auth Example by amadurell-bee · Pull Request #28 · BeefreeSDK/beefree-sdk-examples

amadurell-bee · 2026-03-14T23:29:43Z

This pull request introduces a full-featured NestJS backend for secure authentication with the Angular Email Builder wrapper for Beefree SDK, intended to work with an Angular 20 frontend. It includes all necessary configuration, source code, DTO validation, and a comprehensive test suite to ensure 100% coverage. The backend is modular, secure, and ready for integration with the frontend example.

The most important changes are:

Backend Implementation:

Implements a modular NestJS 11 backend with AppModule, AuthModule, and TemplatesModule, including a health check controller (app.module.ts, auth.module.ts). [1] [2]
Provides a secure AuthService that authenticates users via the Beefree SDK, ensuring credentials are kept server-side and never exposed to the frontend (auth.service.ts).
Adds DTO validation for authentication requests using class-validator (authenticate.dto.ts).

Testing and Coverage:

Adds comprehensive Jest-based unit and integration tests for all modules, DTOs, and the bootstrap process, enforcing 100% coverage (jest.config.cjs, auth.service.spec.ts, auth.controller.spec.ts, authenticate.dto.spec.ts, main.spec.ts, app.module.spec.ts). [1] [2] [3] [4] [5] [6]

Configuration and Environment:

Introduces backend configuration files and environment variable management, including .env.example and nest-cli.json, and ensures assets (such as sample templates) are included in builds (.env.example, nest-cli.json). [1] [2]
Sets up package.json with scripts for development, building, type-checking, and testing, and specifies all required dependencies and devDependencies (backend/package.json).

Project Setup and Documentation:

Provides a detailed README.md explaining features, architecture, setup, API endpoints, security, and testing instructions for both backend and frontend, making the project easy to use and extend.
Adds .gitignore and Yarn configuration to streamline development and prevent unwanted files from being committed (.gitignore, .yarnrc.yml). [1] [2]

Copilot

Pull request overview

Introduces Example 34: a new full-stack Angular + NestJS sample showcasing secure Beefree SDK authentication (backend-only credentials) and an Angular UI with a split layout and API monitor.

Changes:

Adds a new angular-nestjs-auth-example/ workspace containing an Angular 20 + Vite frontend and a NestJS 11 backend, plus supporting config/assets.
Implements backend endpoints for token retrieval, template loading, and health checks, with DTO validation and Jest tests.
Updates root docs/scripts to surface the new example in the repository’s example list and start commands.

Reviewed changes

Copilot reviewed 63 out of 70 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
README.md	Adds Example 34 to the examples table and includes a new section describing it.
package.json	Adds a root `start:angular-nestjs` convenience script to run the new example.
angular-nestjs-auth-example/README.md	New example-specific documentation (setup, endpoints, troubleshooting, testing).
angular-nestjs-auth-example/package.json	New workspace root defining dev/build/type-check/test orchestration across frontend/backend.
angular-nestjs-auth-example/.gitignore	Ignores workspace artifacts (node_modules, dist, .env, coverage, etc.).
angular-nestjs-auth-example/.yarnrc.yml	Configures Yarn linker for the workspace.
angular-nestjs-auth-example/frontend/index.html	Frontend HTML entry point (title, favicon, main entry).
angular-nestjs-auth-example/frontend/package.json	Frontend dependencies and scripts for Angular + Vite.
angular-nestjs-auth-example/frontend/vite.config.ts	Vite dev server config (port 8034) and proxying to backend routes.
angular-nestjs-auth-example/frontend/vitest.config.ts	Vitest configuration including coverage thresholds and setup.
angular-nestjs-auth-example/frontend/tsconfig.json	Frontend TypeScript configuration for Angular + Vite.
angular-nestjs-auth-example/frontend/tsconfig.app.json	App-specific TS config (excludes specs).
angular-nestjs-auth-example/frontend/src/styles.css	Global styling and CSS variables.
angular-nestjs-auth-example/frontend/src/main.ts	Angular bootstrap entry point.
angular-nestjs-auth-example/frontend/src/main.spec.ts	Unit test for Angular bootstrap behavior.
angular-nestjs-auth-example/frontend/src/test-setup.ts	Angular testing environment + module mocking for tests.
angular-nestjs-auth-example/frontend/src/app/app.config.ts	App-wide providers (HTTP + interceptor, zone config).
angular-nestjs-auth-example/frontend/src/app/app.config.spec.ts	Unit test for app config providers.
angular-nestjs-auth-example/frontend/src/app/app.component.ts	Main app component orchestrating authentication and layout.
angular-nestjs-auth-example/frontend/src/app/app.component.spec.ts	Unit tests for auth flow and session reset logic.
angular-nestjs-auth-example/frontend/src/app/types/index.ts	Shared frontend types (auth state, API monitor types).
angular-nestjs-auth-example/frontend/src/app/services/auth.service.ts	Frontend auth API client (`POST /auth/token`).
angular-nestjs-auth-example/frontend/src/app/services/auth.service.spec.ts	Unit test for AuthService behavior.
angular-nestjs-auth-example/frontend/src/app/services/api-monitor.service.ts	API monitor service + HTTP interceptor implementation.
angular-nestjs-auth-example/frontend/src/app/services/api-monitor.service.spec.ts	Unit tests for API monitor service and interceptor paths.
angular-nestjs-auth-example/frontend/src/app/components/app-header/app-header.component.ts	Header presentation component with branding assets.
angular-nestjs-auth-example/frontend/src/app/components/auth-section/auth-section.component.ts	Auth UI (UID input/authenticate/end session).
angular-nestjs-auth-example/frontend/src/app/components/auth-section/auth-section.component.spec.ts	Unit tests for auth section events and state resets.
angular-nestjs-auth-example/frontend/src/app/components/split-layout/split-layout.component.ts	Split panel layout with mouse + keyboard resizing.
angular-nestjs-auth-example/frontend/src/app/components/split-layout/split-layout.component.spec.ts	Unit tests for resizing interactions and bounds.
angular-nestjs-auth-example/frontend/src/app/components/left-panel/left-panel.component.ts	Conditional left panel rendering (unauth info vs builder).
angular-nestjs-auth-example/frontend/src/app/components/unauth-info/unauth-info.component.ts	Unauthenticated “how it works” panel content.
angular-nestjs-auth-example/frontend/src/app/components/builder-area/builder-area.component.ts	Beefree builder integration and template loading controls.
angular-nestjs-auth-example/frontend/src/app/components/builder-area/builder-area.component.spec.ts	Unit tests for template fetching/loading and helper callbacks.
angular-nestjs-auth-example/frontend/src/app/components/api-monitor-panel/api-monitor-panel.component.ts	UI for inspecting captured API calls and details.
angular-nestjs-auth-example/frontend/src/app/components/api-monitor-panel/api-monitor-panel.component.spec.ts	Unit tests for API monitor panel helpers and selection.
angular-nestjs-auth-example/frontend/src/app/components/presentation-components.spec.ts	Instantiation tests for presentation components.
angular-nestjs-auth-example/frontend/public/images/logo.svg	Adds Beefree logo asset for header.
angular-nestjs-auth-example/frontend/public/images/lockup_angular_wht.svg	Adds Angular lockup asset for header.
angular-nestjs-auth-example/frontend/public/images/nestjs-logo.svg	Adds NestJS logo asset for header.
angular-nestjs-auth-example/frontend/public/images/beefree-favicon.png	Adds favicon asset.
angular-nestjs-auth-example/frontend/public/images/angular-email-builder-favicon.png	Adds favicon asset for the example.
angular-nestjs-auth-example/backend/.env.example	Backend environment variable template (credentials, PORT, NODE_ENV).
angular-nestjs-auth-example/backend/package.json	Backend dependencies and scripts (Nest build/start, Jest tests).
angular-nestjs-auth-example/backend/nest-cli.json	Nest CLI config (sourceRoot + JSON assets copy into dist).
angular-nestjs-auth-example/backend/jest.config.cjs	Jest config with 100% global coverage thresholds.
angular-nestjs-auth-example/backend/tsconfig.json	Backend TS config (CommonJS, decorators, strict settings).
angular-nestjs-auth-example/backend/tsconfig.build.json	Build TS config exclusions (tests/dist).
angular-nestjs-auth-example/backend/src/main.ts	Nest bootstrap (CORS, validation pipe, listen, logging).
angular-nestjs-auth-example/backend/src/main.spec.ts	Tests bootstrap behavior via NestFactory mocking.
angular-nestjs-auth-example/backend/src/app.module.ts	App module wiring + health endpoint controller.
angular-nestjs-auth-example/backend/src/app.module.spec.ts	Integration test for `/health`.
angular-nestjs-auth-example/backend/src/modules.spec.ts	Sanity tests ensuring module classes are loadable.
angular-nestjs-auth-example/backend/src/auth/auth.module.ts	Auth module declaration.
angular-nestjs-auth-example/backend/src/auth/auth.controller.ts	Auth controller exposing `POST /auth/token`.
angular-nestjs-auth-example/backend/src/auth/auth.controller.spec.ts	Unit test for auth controller delegation.
angular-nestjs-auth-example/backend/src/auth/auth.service.ts	Auth service calling Beefree auth endpoint via server-side fetch.
angular-nestjs-auth-example/backend/src/auth/auth.service.spec.ts	Unit tests for auth service success/error branches.
angular-nestjs-auth-example/backend/src/auth/dto/authenticate.dto.ts	DTO for authentication payload validation.
angular-nestjs-auth-example/backend/src/auth/dto/authenticate.dto.spec.ts	DTO validation tests.
angular-nestjs-auth-example/backend/src/templates/templates.module.ts	Templates module declaration.
angular-nestjs-auth-example/backend/src/templates/templates.controller.ts	Controller exposing template routes.
angular-nestjs-auth-example/backend/src/templates/templates.controller.spec.ts	Controller unit tests.
angular-nestjs-auth-example/backend/src/templates/templates.service.ts	Loads sample/blank templates from JSON files on startup.
angular-nestjs-auth-example/backend/src/templates/templates.service.spec.ts	Service test verifying templates load.
angular-nestjs-auth-example/backend/src/templates/data/sample.json	Sample email template JSON for the builder.
angular-nestjs-auth-example/backend/src/templates/data/blank.json	Blank email template JSON for the builder.
.github/copilot-instructions.md	Updates monorepo guidance to include the new example and framework variations.

Copilot · 2026-04-07T09:23:53Z

 | Example | Description | Features | Start Command |
 |---------|-------------|----------|---------------|
 | [🤖 AI Agent](https://github.com/BeefreeSDK/beefree-sdk-mcp-example-demo) | Natural language email design with AI | **BETA** - Click to visit its dedicated repo | - |
+| [🅰️ Angular + 🐈 NestJS Auth](#-angular--nestjs-auth-example) | Angular 20 + NestJS 11 secure authentication | `@beefree.io/angular-email-builder`, split layout, API monitor, full frontend/backend 100% test coverage | `cd angular-nestjs-auth-example && yarn start` |


The root README’s start command for this example differs from the established pattern used by the other rows (running from repo root via a yarn start:* script). Since start:angular-nestjs exists in the root package.json, consider using yarn start:angular-nestjs here to keep the table consistent and avoid requiring a manual cd.

Suggested change

| [🅰️ Angular + 🐈 NestJS Auth](#-angular--nestjs-auth-example) | Angular 20 + NestJS 11 secure authentication | `@beefree.io/angular-email-builder`, split layout, API monitor, full frontend/backend 100% test coverage | `cd angular-nestjs-auth-example && yarn start` |

| [🅰️ Angular + 🐈 NestJS Auth](#-angular--nestjs-auth-example) | Angular 20 + NestJS 11 secure authentication | `@beefree.io/angular-email-builder`, split layout, API monitor, full frontend/backend 100% test coverage | `yarn start:angular-nestjs` |

Copilot · 2026-04-07T09:23:53Z

+  "scripts": {
+    "dev": "concurrently -n nest,vite -c red,cyan \"cd backend && npx nest start --watch\" \"cd frontend && npx vite\"",
+    "start": "concurrently -n nest,vite -c red,cyan \"cd backend && npx nest start --watch\" \"cd frontend && npx vite\"",
+    "build": "cd backend && npx nest build && cd ../frontend && npx vite build",
+    "type-check": "cd frontend && npx tsc -p tsconfig.app.json --noEmit && cd ../backend && npx tsc --project tsconfig.build.json --noEmit",
+    "test": "yarn workspace frontend test && yarn workspace backend test",
+    "test:coverage": "yarn workspace frontend test:coverage && yarn workspace backend test:coverage"


yarn test and yarn test:coverage call yarn workspace frontend test / test:coverage, but the frontend workspace currently doesn’t define these scripts. Add test and test:coverage scripts to frontend/package.json (or adjust these root scripts) so the documented commands actually run.

Copilot · 2026-04-07T09:23:54Z

+## Testing
+
+Run all tests:
+
+```bash
+yarn test
+```
+
+Run full coverage checks (frontend + backend, both enforced at 100%):
+
+```bash
+yarn test:coverage
+```
+
+Run coverage per workspace:
+
+```bash
+yarn workspace frontend test:coverage
+yarn workspace backend test:coverage
+```


This README instructs running yarn test / yarn test:coverage (and workspace-specific variants), but the frontend workspace currently lacks test / test:coverage scripts and vitest dependencies, so these commands will fail. Update either the README or the frontend workspace to ensure the testing instructions are executable.

Copilot · 2026-04-07T09:23:54Z

+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "tsc -p tsconfig.app.json --noEmit"
+  },


The frontend workspace defines no test / test:coverage scripts, but the repo (and this example’s root package) expects them (yarn workspace frontend test...). Add these scripts (e.g., invoking Vitest with the existing vitest.config.ts) so tests/coverage can run.

Copilot · 2026-04-07T09:23:54Z

+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.3.0",
+    "@angular/build": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0",
+    "vite": "^7.0.0"
+  },


Vitest is referenced by vitest.config.ts and src/test-setup.ts, but vitest (and any needed coverage package, depending on your setup) isn’t listed in devDependencies. Add Vitest so the frontend unit tests can execute in CI/locally.

Copilot · 2026-04-07T09:23:54Z

+    if (!response.ok) {
+      const errorText = await response.text();
+      this.logger.error(`Auth failed: ${response.status} ${errorText}`);
+      throw new BadRequestException(
+        `Authentication failed: ${response.status}`,
+      );


When the Beefree auth endpoint returns a non-2xx (e.g., 401/403), this code throws BadRequestException, which forces the API response status to 400 and loses the upstream status. Consider throwing an HttpException (or a more specific Nest exception) that preserves response.status, so clients can react correctly to 401 vs 500.

Copilot · 2026-04-07T09:23:55Z

+
+  app.enableCors({ origin: 'http://localhost:8034' });


CORS is hard-coded to http://localhost:8034, which makes the backend fail preflight/requests if the frontend origin changes (different port, host, or deployment). Consider sourcing the allowed origin from config/env (with a safe default) to keep the example portable.

Suggested change

app.enableCors({ origin: 'http://localhost:8034' });

const corsOrigin = process.env.CORS_ORIGIN ?? 'http://localhost:8034';

app.enableCors({ origin: corsOrigin });

Copilot · 2026-04-07T09:23:55Z

- TypeScript + Express.js
+**Backend (default pattern):**
+- TypeScript + Express.js | Encore | Fastify v5 | NestJS 11
 - ES Modules


This section still states the backend uses “ES Modules”, but the new NestJS example backend is configured for CommonJS (angular-nestjs-auth-example/backend/tsconfig.json sets module: commonjs). Consider clarifying that ES Modules is the default pattern, with CommonJS/ESM depending on framework/example, to avoid conflicting guidance.

Suggested change

- ES Modules

- ES Modules is the default pattern for most examples, but the module system may be CommonJS or ESM depending on the framework/example configuration

Copilot · 2026-04-07T09:23:55Z

+- No source-code changes are required when the package is published.
+- The only expected switch is dependency sourcing in [frontend/package.json](frontend/package.json):
+    - Current local development source: `file:./lib/angular-email-builder`
+    - Published source: standard npm semver (for example `^1.1.1` or newer)


The “npm Package Readiness” section says the frontend currently uses a local file:./lib/angular-email-builder dependency, but frontend/package.json already points to the published semver (^1.1.2). Update this section (or the dependency) so the documentation matches the actual setup.

Suggested change

- No source-code changes are required when the package is published.

- The only expected switch is dependency sourcing in [frontend/package.json](frontend/package.json):

- Current local development source: `file:./lib/angular-email-builder`

- Published source: standard npm semver (for example `^1.1.1` or newer)

- No source-code changes are required to consume the published package.

- [frontend/package.json](frontend/package.json) already uses the standard npm semver dependency for `@beefree.io/angular-email-builder` (currently `^1.1.2`).

- No local `file:./lib/angular-email-builder` dependency switch is required.

amadurell-bee marked this pull request as draft March 14, 2026 23:29

amadurell-bee commented Mar 14, 2026

View reviewed changes

Comment thread angular-nestjs-auth-example/frontend/package.json Outdated

amadurell-bee force-pushed the feat/example-34-angular-nestjs-secure-auth branch from 6b7c47c to a4c020a Compare March 16, 2026 12:22

amadurell-bee marked this pull request as ready for review March 16, 2026 12:42

amadurell-bee requested review from davidesamp, loriscabrini, msantagata, rmarchet and simone-ferrario March 16, 2026 12:43

amadurell-bee force-pushed the feat/multilanguage-example branch 3 times, most recently from 0a9bf3b to b2565d9 Compare March 23, 2026 21:01

amadurell-bee force-pushed the feat/example-34-angular-nestjs-secure-auth branch from a4c020a to 83a61ef Compare March 23, 2026 21:32

amadurell-bee changed the base branch from feat/multilanguage-example to main March 23, 2026 21:36

amadurell-bee changed the base branch from main to feat/multilanguage-example March 23, 2026 21:36

amadurell-bee force-pushed the feat/example-34-angular-nestjs-secure-auth branch from 83a61ef to 2d7d213 Compare March 23, 2026 21:48

feat: angular-nestjs-auth-example

ab2bd15

amadurell-bee force-pushed the feat/example-34-angular-nestjs-secure-auth branch from 2d7d213 to ab2bd15 Compare March 23, 2026 21:50

Base automatically changed from feat/multilanguage-example to main April 7, 2026 09:11

Merge branch 'main' into feat/example-34-angular-nestjs-secure-auth

be11c8d

davidesamp requested a review from Copilot April 7, 2026 09:17

Copilot started reviewing on behalf of davidesamp April 7, 2026 09:18 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Example 34: Angular Email Builder + NestJS Secure Auth Example#28

Example 34: Angular Email Builder + NestJS Secure Auth Example#28
amadurell-bee wants to merge 2 commits into
mainfrom
feat/example-34-angular-nestjs-secure-auth

amadurell-bee commented Mar 14, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	\| [🅰️ Angular + 🐈 NestJS Auth](#-angular--nestjs-auth-example) \| Angular 20 + NestJS 11 secure authentication \| `@beefree.io/angular-email-builder`, split layout, API monitor, full frontend/backend 100% test coverage \| `cd angular-nestjs-auth-example && yarn start` \|
	\| [🅰️ Angular + 🐈 NestJS Auth](#-angular--nestjs-auth-example) \| Angular 20 + NestJS 11 secure authentication \| `@beefree.io/angular-email-builder`, split layout, API monitor, full frontend/backend 100% test coverage \| `yarn start:angular-nestjs` \|

-  app.enableCors({ origin: 'http://localhost:8034' });
+  const corsOrigin = process.env.CORS_ORIGIN ?? 'http://localhost:8034';
+  app.enableCors({ origin: corsOrigin });

	- ES Modules
	- ES Modules is the default pattern for most examples, but the module system may be CommonJS or ESM depending on the framework/example configuration

Uh oh!

Conversation

amadurell-bee commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amadurell-bee commented Mar 14, 2026 •

edited

Loading