create-momentum-app 0.5.1 → 0.5.2

package/index.cjs

@@ -184,7 +184,15 @@ const pool = (dbAdapter as PostgresAdapterWithRaw).getPool();` : "",
     dbDevPackage: database === "postgres" ? "" : '"@types/better-sqlite3": "^7.6.13",',
     envDbVar: database === "postgres" ? "DATABASE_URL=postgresql://postgres:postgres@localhost:5432/momentum" : "DATABASE_PATH=./data/momentum.db",
     defaultPort: "4200",
-    externalDependencies: database === "postgres" ? '"pg", "pg-native"' : '"better-sqlite3"',
+    externalDependencies: [
+      database === "postgres" ? '"pg", "pg-native"' : '"better-sqlite3"',
+      ...flavor === "nestjs" ? [
+        '"@nestjs/microservices"',
+        '"@nestjs/websockets"',
+        '"class-validator"',
+        '"class-transformer"'
+      ] : []
+    ].join(", "),
     prerequisitesDocker: database === "postgres" ? `- **Docker** (for PostgreSQL database)
   - [macOS](https://www.docker.com/products/docker-desktop/)
   - [Linux](https://docs.docker.com/engine/install/)
@@ -325,7 +333,7 @@ function parseArgs(argv) {
     const arg = args[i];
     if (arg === "--flavor" && args[i + 1]) {
       const val = args[++i];
-      if (val === "angular" || val === "analog") {
+      if (val === "angular" || val === "analog" || val === "nestjs") {
         opts.flavor = val;
       }
     } else if (arg === "--database" && args[i + 1]) {
@@ -369,7 +377,8 @@ async function runCLI() {
         message: "Which framework?",
         choices: [
           { title: "Angular (Express SSR)", value: "angular" },
-          { title: "Analog (Nitro)", value: "analog" }
+          { title: "Analog (Nitro)", value: "analog" },
+          { title: "NestJS (Express)", value: "nestjs" }
         ]
       },
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-momentum-app",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Create a new Momentum CMS application",
   "license": "MIT",
   "author": "Momentum CMS Contributors",
@@ -57,6 +57,7 @@
     "fs-extra": "^11.2.0",
     "graphql": "16.13.0",
     "h3": "1.15.5",
+    "juice": "11.1.1",
     "picocolors": "^1.1.0",
     "prompts": "^2.4.2",
     "rxjs": "7.8.2"

package/templates/nestjs/angular.json.tmpl

@@ -0,0 +1,73 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+		"{{projectName}}": {
+			"projectType": "application",
+			"root": "",
+			"sourceRoot": "src",
+			"prefix": "app",
+			"architect": {
+				"build": {
+					"builder": "@angular/build:application",
+					"options": {
+						"outputPath": "dist/{{projectName}}",
+						"index": "src/index.html",
+						"browser": "src/main.ts",
+						"server": "src/main.server.ts",
+						"tsConfig": "tsconfig.app.json",
+						"assets": [
+							{
+								"glob": "**/*",
+								"input": "public"
+							}
+						],
+						"styles": ["src/styles.css"],
+						"scripts": [],
+						"ssr": {
+							"entry": "src/server.ts"
+						},
+						"outputMode": "server",
+						"externalDependencies": [{{externalDependencies}}]
+					},
+					"configurations": {
+						"production": {
+							"budgets": [
+								{
+									"type": "initial",
+									"maximumWarning": "1MB",
+									"maximumError": "2MB"
+								},
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "4kB",
+									"maximumError": "8kB"
+								}
+							],
+							"outputHashing": "all"
+						},
+						"development": {
+							"optimization": false,
+							"extractLicenses": false,
+							"sourceMap": true
+						}
+					},
+					"defaultConfiguration": "production"
+				},
+				"serve": {
+					"builder": "@angular/build:dev-server",
+					"configurations": {
+						"production": {
+							"buildTarget": "{{projectName}}:build:production"
+						},
+						"development": {
+							"buildTarget": "{{projectName}}:build:development"
+						}
+					},
+					"defaultConfiguration": "development"
+				}
+			}
+		}
+	}
+}

package/templates/nestjs/eslint.config.mjs

@@ -0,0 +1,31 @@
+import tseslint from 'typescript-eslint';
+import angular from 'angular-eslint';
+
+export default tseslint.config(
+	{
+		files: ['**/*.ts'],
+		extends: [...tseslint.configs.recommended, ...angular.configs.tsRecommended],
+		rules: {
+			'@angular-eslint/directive-selector': [
+				'error',
+				{
+					type: 'attribute',
+					prefix: 'app',
+					style: 'camelCase',
+				},
+			],
+			'@angular-eslint/component-selector': [
+				'error',
+				{
+					type: 'element',
+					prefix: 'app',
+					style: 'kebab-case',
+				},
+			],
+		},
+	},
+	{
+		files: ['**/*.html'],
+		extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+	},
+);

package/templates/nestjs/package.json.tmpl

@@ -0,0 +1,69 @@
+{
+	"name": "{{projectName}}",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "ng serve",
+		"build": "ng build",
+		"start": "node dist/{{projectName}}/server/server.mjs",
+		"lint": "ng lint",
+		"generate": "tsx node_modules/@momentumcms/core/src/generators/generator.cjs src/momentum.config.ts --types src/generated/momentum.types.ts --config src/generated/momentum.config.ts",
+		"migrate:generate": "ng generate @momentumcms/migrations:generate",
+		"migrate:run": "ng generate @momentumcms/migrations:run",
+		"migrate:status": "ng generate @momentumcms/migrations:status",
+		"migrate:rollback": "ng generate @momentumcms/migrations:rollback"
+	},
+	"dependencies": {
+		"@angular/animations": "^21.1.0",
+		"@angular/aria": "^21.1.0",
+		"@angular/cdk": "^21.1.0",
+		"@angular/common": "^21.1.0",
+		"@angular/compiler": "^21.1.0",
+		"@angular/core": "^21.1.0",
+		"@angular/forms": "^21.1.0",
+		"@angular/platform-browser": "^21.1.0",
+		"@angular/platform-server": "^21.1.0",
+		"@angular/router": "^21.1.0",
+		"@angular/ssr": "^21.1.0",
+		"@momentumcms/admin": "^{{packageVersion}}",
+		"@momentumcms/auth": "^{{packageVersion}}",
+		"@momentumcms/core": "^{{packageVersion}}",
+		"@momentumcms/db-drizzle": "^{{packageVersion}}",
+		"@momentumcms/server-core": "^{{packageVersion}}",
+		"@momentumcms/server-nestjs": "^{{packageVersion}}",
+		"@momentumcms/storage": "^{{packageVersion}}",
+		"@momentumcms/logger": "^{{packageVersion}}",
+		"@momentumcms/migrations": "^{{packageVersion}}",
+		"@momentumcms/plugins-core": "^{{packageVersion}}",
+		"@momentumcms/plugins-seo": "^{{packageVersion}}",
+		"@nestjs/common": "^11.1.0",
+		"@nestjs/core": "^11.1.0",
+		"@nestjs/platform-express": "^11.1.0",
+		"@ng-icons/core": "^33.0.0",
+		"@ng-icons/heroicons": "^33.0.0",
+		"@tiptap/core": "^3.0.0",
+		"@tiptap/extension-link": "^3.0.0",
+		"@tiptap/extension-placeholder": "^3.0.0",
+		"@tiptap/extension-underline": "^3.0.0",
+		"@tiptap/starter-kit": "^3.0.0",
+		"dotenv": "^16.5.0",
+		"express": "^4.21.0",
+		{{dbPackage}},
+		"reflect-metadata": "^0.2.0",
+		"rxjs": "^7.8.0",
+		"tslib": "^2.8.0"
+	},
+	"devDependencies": {
+		"@angular/build": "^21.1.0",
+		"@angular/cli": "^21.1.0",
+		"@angular/compiler-cli": "^21.1.0",
+		{{dbDevPackage}}
+		"@types/express": "^4.17.0",
+		"@types/node": "^22.15.0",
+		"autoprefixer": "^10.4.21",
+		"postcss": "^8.5.4",
+		"tailwindcss": "^3.4.17",
+		"tsx": "^4.0.0",
+		"typescript": "~5.9.2"
+	}
+}

package/templates/nestjs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

package/templates/nestjs/src/app/app.config.server.ts

@@ -0,0 +1,10 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+	providers: [provideServerRendering(withRoutes(serverRoutes))],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

package/templates/nestjs/src/app/app.config.ts

@@ -0,0 +1,18 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter, withViewTransitions } from '@angular/router';
+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { crudToastInterceptor, provideMomentumFieldRenderers } from '@momentumcms/admin';
+import { routes } from './app.routes';
+import { providePostBlocks } from './pages/post-block-providers';
+
+export const appConfig: ApplicationConfig = {
+	providers: [
+		provideHttpClient(withFetch(), withInterceptors([crudToastInterceptor])),
+		provideClientHydration(withEventReplay()),
+		provideBrowserGlobalErrorListeners(),
+		provideRouter(routes, withViewTransitions()),
+		provideMomentumFieldRenderers(),
+		...providePostBlocks(),
+	],
+};

package/templates/nestjs/src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+	// Admin routes render client-side — guards need to run without SSR hydration conflict
+	{ path: 'admin/**', renderMode: RenderMode.Client },
+	// All other routes use server-side rendering
+	{ path: '**', renderMode: RenderMode.Server },
+];

package/templates/nestjs/src/app/app.routes.ts

@@ -0,0 +1,22 @@
+import { Route } from '@angular/router';
+import { momentumAdminRoutes } from '@momentumcms/admin';
+import { adminConfig } from '../generated/momentum.config';
+
+export const routes: Route[] = [
+	{
+		path: '',
+		loadComponent: () => import('./pages/welcome').then((m) => m.WelcomePage),
+	},
+	{
+		path: 'posts',
+		loadComponent: () => import('./pages/posts').then((m) => m.PostsPageComponent),
+	},
+	{
+		path: 'posts/:slug',
+		loadComponent: () => import('./pages/post-detail').then((m) => m.PostDetailComponent),
+		resolve: {
+			postData: () => import('./pages/post-detail.resolver').then((m) => m.postDetailResolver),
+		},
+	},
+	...momentumAdminRoutes(adminConfig),
+];

package/templates/nestjs/src/app/app.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+	selector: 'app-root',
+	imports: [RouterOutlet],
+	template: '<router-outlet />',
+})
+export class App {}

package/templates/nestjs/src/app/pages/blocks/hero-block.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+	selector: 'app-hero-block',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+		'[attr.data-testid]': '"block-hero"',
+	},
+	template: `
+		<section class="bg-primary text-primary-foreground py-12 px-4 md:py-20 md:px-8 text-center">
+			<div class="mx-auto max-w-4xl">
+				<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4" data-testid="hero-heading">
+					{{ heading() }}
+				</h1>
+				@if (subheading()) {
+					<p class="text-lg md:text-xl text-primary-foreground mb-8" data-testid="hero-subheading">
+						{{ subheading() }}
+					</p>
+				}
+				@if (ctaText()) {
+					<a
+						class="inline-block bg-primary-foreground text-primary font-semibold px-6 py-3 rounded-lg hover:bg-primary-foreground/90 transition-colors"
+						[href]="ctaLink() || '#'"
+						data-testid="hero-cta"
+					>
+						{{ ctaText() }}
+					</a>
+				}
+			</div>
+		</section>
+	`,
+})
+export class HeroBlockComponent {
+	readonly data = input.required<Record<string, unknown>>();
+
+	readonly heading = computed((): string => String(this.data()['heading'] ?? ''));
+	readonly subheading = computed((): string => String(this.data()['subheading'] ?? ''));
+	readonly ctaText = computed((): string => String(this.data()['ctaText'] ?? ''));
+	readonly ctaLink = computed((): string => String(this.data()['ctaLink'] ?? ''));
+}

package/templates/nestjs/src/app/pages/blocks/image-text-block.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+	selector: 'app-image-text-block',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+		'[attr.data-testid]': '"block-imageText"',
+	},
+	template: `
+		<section class="py-8 px-4 md:py-16 md:px-8">
+			<div
+				class="mx-auto max-w-6xl flex flex-col gap-8 md:gap-12 items-center"
+				[class.md:flex-row]="!reversed()"
+				[class.md:flex-row-reverse]="reversed()"
+			>
+				<!-- Image -->
+				<div class="w-full md:w-1/2" data-testid="image-text-image">
+					@if (imageUrl()) {
+						<img
+							[src]="imageUrl()"
+							[alt]="imageAlt() || heading()"
+							class="w-full h-auto rounded-lg object-cover bg-muted"
+						/>
+					} @else {
+						<div class="w-full aspect-video rounded-lg bg-muted flex items-center justify-center">
+							<span class="text-muted-foreground text-sm">No image</span>
+						</div>
+					}
+				</div>
+
+				<!-- Text -->
+				<div class="w-full md:w-1/2">
+					<h2
+						class="text-2xl md:text-3xl font-bold text-foreground mb-4"
+						data-testid="image-text-heading"
+					>
+						{{ heading() }}
+					</h2>
+					<p class="text-lg text-muted-foreground leading-relaxed" data-testid="image-text-body">
+						{{ body() }}
+					</p>
+				</div>
+			</div>
+		</section>
+	`,
+})
+export class ImageTextBlockComponent {
+	readonly data = input.required<Record<string, unknown>>();
+
+	readonly heading = computed((): string => String(this.data()['heading'] ?? ''));
+	readonly body = computed((): string => String(this.data()['body'] ?? ''));
+	readonly imageUrl = computed((): string => String(this.data()['imageUrl'] ?? ''));
+	readonly imageAlt = computed((): string => String(this.data()['imageAlt'] ?? ''));
+	readonly reversed = computed((): boolean => this.data()['imagePosition'] === 'right');
+}

package/templates/nestjs/src/app/pages/blocks/text-block.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+	selector: 'app-text-block',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+		'[attr.data-testid]': '"block-textBlock"',
+	},
+	template: `
+		<section class="py-8 px-4 md:py-12 md:px-8 max-w-3xl mx-auto">
+			@if (heading()) {
+				<h2 class="text-2xl font-bold text-foreground mb-4" data-testid="text-heading">
+					{{ heading() }}
+				</h2>
+			}
+			<p class="text-lg text-muted-foreground leading-relaxed" data-testid="text-body">
+				{{ body() }}
+			</p>
+		</section>
+	`,
+})
+export class TextBlockComponent {
+	readonly data = input.required<Record<string, unknown>>();
+
+	readonly heading = computed((): string => String(this.data()['heading'] ?? ''));
+	readonly body = computed((): string => String(this.data()['body'] ?? ''));
+}

package/templates/nestjs/src/app/pages/post-block-providers.ts

@@ -0,0 +1,17 @@
+import type { Provider } from '@angular/core';
+import { provideBlockComponents } from '@momentumcms/ui';
+import { HeroBlockComponent } from './blocks/hero-block.component';
+import { TextBlockComponent } from './blocks/text-block.component';
+import { ImageTextBlockComponent } from './blocks/image-text-block.component';
+
+/**
+ * Provide all post block components for the block renderer.
+ * Add to the app's root providers.
+ */
+export function providePostBlocks(): Provider[] {
+	return provideBlockComponents({
+		hero: HeroBlockComponent,
+		textBlock: TextBlockComponent,
+		imageText: ImageTextBlockComponent,
+	});
+}

package/templates/nestjs/src/app/pages/post-detail.resolver.ts

@@ -0,0 +1,31 @@
+import type { ResolveFn } from '@angular/router';
+import { injectMomentumAPI, type FindResult } from '@momentumcms/admin';
+
+/**
+ * Resolver for the post detail route.
+ *
+ * Fetches the post by slug before the component renders. This ensures:
+ * - SSR renders the full post content (not just "Loading...")
+ * - The admin preview iframe (with scripts disabled) shows the real post
+ */
+export const postDetailResolver: ResolveFn<FindResult<Record<string, unknown>>> = (route) => {
+	const api = injectMomentumAPI();
+	const slug = typeof route.params['slug'] === 'string' ? route.params['slug'] : undefined;
+
+	if (!slug) {
+		return {
+			docs: [],
+			totalDocs: 0,
+			page: 1,
+			totalPages: 0,
+			limit: 1,
+			hasNextPage: false,
+			hasPrevPage: false,
+		};
+	}
+
+	return api.collection('posts').find({
+		where: { slug: { equals: slug } },
+		limit: 1,
+	});
+};

package/templates/nestjs/src/app/pages/post-detail.ts

@@ -0,0 +1,139 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+import { injectMomentumAPI, type FindResult } from '@momentumcms/admin';
+import { BlockRendererComponent } from '@momentumcms/ui';
+
+interface PostDetail {
+	id: string;
+	title: string;
+	blocks: Array<Record<string, unknown>>;
+}
+
+@Component({
+	selector: 'app-post-detail',
+	imports: [RouterLink, BlockRendererComponent],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-8 md:py-12',
+	},
+	template: `
+		<a
+			routerLink="/posts"
+			class="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-6 transition-colors"
+			data-testid="post-back-link"
+		>
+			&larr; Back to Posts
+		</a>
+
+		@if (loading()) {
+			<p class="text-muted-foreground" data-testid="post-loading">Loading post...</p>
+		} @else if (error()) {
+			<div class="text-center py-12" data-testid="post-error">
+				<h1 class="text-2xl font-bold text-foreground mb-2">Post not found</h1>
+				<p class="text-muted-foreground">The post you are looking for does not exist.</p>
+			</div>
+		} @else if (post(); as p) {
+			<article data-testid="post-detail">
+				<h1
+					class="text-3xl md:text-4xl font-bold text-foreground mb-6"
+					data-testid="post-detail-title"
+				>
+					{{ p.title }}
+				</h1>
+
+				<div data-testid="post-blocks">
+					<mcms-block-renderer [blocks]="p.blocks" />
+				</div>
+			</article>
+		}
+	`,
+})
+export class PostDetailComponent {
+	private readonly route = inject(ActivatedRoute);
+	private readonly api = injectMomentumAPI();
+	private readonly titleService = inject(Title);
+	private readonly metaService = inject(Meta);
+
+	readonly post = signal<PostDetail | null>(null);
+	readonly loading = signal(true);
+	readonly error = signal(false);
+
+	readonly blocks = computed((): Array<Record<string, unknown>> => this.post()?.blocks ?? []);
+
+	/**
+	 * Resolved post data from the route resolver (SSR-safe).
+	 */
+	private readonly resolvedPost = toSignal(
+		this.route.data.pipe(
+			map((data): Record<string, unknown> | null => {
+				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- route resolver returns FindResult
+				const result = data['postData'] as FindResult<Record<string, unknown>> | undefined;
+				if (!result?.docs?.[0]) return null;
+				return result.docs[0];
+			}),
+		),
+	);
+
+	constructor() {
+		const resolvedDoc = this.resolvedPost();
+
+		if (resolvedDoc) {
+			this.populateFromDoc(resolvedDoc);
+		} else {
+			const slug: unknown = this.route.snapshot.params['slug'];
+			if (typeof slug === 'string') {
+				void this.loadPost(slug);
+			} else {
+				this.loading.set(false);
+				this.error.set(true);
+			}
+		}
+	}
+
+	private populateFromDoc(doc: Record<string, unknown>): void {
+		const title = String(doc['title'] ?? '');
+		const rawBlocks = doc['pageContent'];
+		const blockList = Array.isArray(rawBlocks)
+			? // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- blocks from API are Record arrays
+				(rawBlocks as Array<Record<string, unknown>>)
+			: [];
+
+		this.post.set({
+			id: String(doc['id'] ?? ''),
+			title,
+			blocks: blockList,
+		});
+
+		this.titleService.setTitle(`${title} | Momentum CMS`);
+		this.metaService.updateTag({
+			name: 'description',
+			content: `Read "${title}" on Momentum CMS.`,
+		});
+		this.metaService.updateTag({ property: 'og:title', content: title });
+		this.metaService.updateTag({ property: 'og:type', content: 'article' });
+		this.loading.set(false);
+	}
+
+	private async loadPost(slug: string): Promise<void> {
+		try {
+			const result = await this.api
+				.collection<Record<string, unknown>>('posts')
+				.find({ where: { slug: { equals: slug } }, limit: 1 });
+
+			const doc = result.docs[0];
+			if (!doc) {
+				this.error.set(true);
+				this.loading.set(false);
+				return;
+			}
+
+			this.populateFromDoc(doc);
+		} catch {
+			this.error.set(true);
+			this.loading.set(false);
+		}
+	}
+}