@adriankulik/create-fullstack-app 1.5.0 → 1.7.0

package/templates/frontend/angular/package.json

@@ -7,7 +7,7 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --watch=false --browsers=ChromeHeadlessCI",
-    "lint": "echo 'No lint command configured'"
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -25,9 +25,15 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^21.0.0",
+    "@angular-eslint/builder": "^21.4.0",
+    "@angular-eslint/eslint-plugin": "^21.4.0",
+    "@angular-eslint/eslint-plugin-template": "^21.4.0",
+    "@angular-eslint/template-parser": "^21.4.0",
     "@angular/cli": "^21.0.0",
     "@angular/compiler-cli": "^21.0.0",
+    "@eslint/js": "^10.0.1",
     "@types/jasmine": "~5.1.0",
+    "eslint": "^10.4.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
@@ -35,6 +41,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "puppeteer": "^22.0.0",
-    "typescript": "~5.9.0"
+    "typescript": "~5.9.0",
+    "typescript-eslint": "^8.59.3"
   }
 }

package/templates/frontend/angular/src/app/app.component.html

@@ -0,0 +1,32 @@
+<main style="padding: 2rem; font-family: sans-serif;">
+  <h1>Multiplier App (Angular)</h1>
+  <form (submit)="handleSubmit($event)" style="margin-bottom: 1rem;">
+    <label for="numberInput" style="display: block; margin-bottom: 0.5rem;">
+      Enter a number:
+    </label>
+    <input
+      id="numberInput"
+      type="number"
+      step="any"
+      [(ngModel)]="number"
+      name="number"
+      required
+      style="padding: 0.5rem; margin-right: 0.5rem;"
+    />
+    <button type="submit" style="padding: 0.5rem 1rem;">
+      Multiply by 2
+    </button>
+  </form>
+
+  @if (result !== null) {
+    <div style="margin-top: 1rem; padding: 1rem; background-color: #e0ffe0; border: 1px solid #00cc00;">
+      <strong>Result:</strong> {{ result }}
+    </div>
+  }
+
+  @if (error) {
+    <div style="margin-top: 1rem; padding: 1rem; background-color: #ffe0e0; border: 1px solid #cc0000;">
+      <strong>Error:</strong> {{ error }}
+    </div>
+  }
+</main>

package/templates/frontend/angular/src/app/app.component.ts

@@ -1,47 +1,24 @@
 import { Component, ChangeDetectorRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
+interface MultiplyResponse {
+  result: number;
+}
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, FormsModule],
-  template: `
-    <main style="padding: 2rem; font-family: sans-serif;">
-      <h1>Multiplier App (Angular)</h1>
-      <form (submit)="handleSubmit($event)" style="margin-bottom: 1rem;">
-        <label for="numberInput" style="display: block; margin-bottom: 0.5rem;">
-          Enter a number:
-        </label>
-        <input
-          id="numberInput"
-          type="number"
-          step="any"
-          [(ngModel)]="number"
-          name="number"
-          required
-          style="padding: 0.5rem; margin-right: 0.5rem;"
-        />
-        <button type="submit" style="padding: 0.5rem 1rem;">
-          Multiply by 2
-        </button>
-      </form>
-
-      <div *ngIf="result !== null" style="margin-top: 1rem; padding: 1rem; background-color: #e0ffe0; border: 1px solid #00cc00;">
-        <strong>Result:</strong> {{ result }}
-      </div>
-
-      <div *ngIf="error" style="margin-top: 1rem; padding: 1rem; background-color: #ffe0e0; border: 1px solid #cc0000;">
-        <strong>Error:</strong> {{ error }}
-      </div>
-    </main>
-  `,
+  imports: [FormsModule],
+  templateUrl: './app.component.html',
 })
 export class AppComponent {
   number: string = '';
   result: number | null = null;
   error: string | null = null;
 
+  // Configure via environment: defaults to localhost for development
+  private apiUrl = 'http://localhost:8000';
+
   constructor(private cdr: ChangeDetectorRef) {}
 
   async handleSubmit(event: Event) {
@@ -50,7 +27,7 @@ export class AppComponent {
     this.result = null;
 
     try {
-      const response = await fetch('http://localhost:8000/api/multiply', {
+      const response = await fetch(`${this.apiUrl}/api/multiply`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -62,12 +39,12 @@ export class AppComponent {
         throw new Error('Network response was not ok');
       }
 
-      const data = await response.json();
+      const data: MultiplyResponse = await response.json();
       this.result = data.result;
     } catch (err: unknown) {
       this.error = (err as Error).message;
     }
-    
+
     this.cdr.detectChanges();
   }
 }

package/templates/frontend/angular/start.sh

@@ -1,2 +1,3 @@
 #!/usr/bin/env bash
+set -e
 npm run dev

package/templates/frontend/angular/test.sh

@@ -1,2 +1,3 @@
 #!/usr/bin/env bash
+set -e
 npm run test

package/templates/frontend/nextjs/__tests__/page.test.tsx

@@ -2,16 +2,16 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Home from '../app/page';
 
 // Mock fetch
-global.fetch = jest.fn(() =>
+globalThis.fetch = jest.fn(() =>
   Promise.resolve({
     ok: true,
     json: () => Promise.resolve({ result: 10 }),
-  })
-);
+  } as unknown as Response)
+) as typeof fetch;
 
 describe('Home', () => {
   beforeEach(() => {
-    fetch.mockClear();
+    (fetch as jest.Mock).mockClear();
   });
 
   it('renders a heading', () => {

package/templates/frontend/nextjs/app/page.tsx

@@ -2,18 +2,24 @@
 
 import { useState, FormEvent } from 'react';
 
+interface MultiplyResponse {
+  result: number;
+}
+
 export default function Home() {
   const [number, setNumber] = useState<string>('');
   const [result, setResult] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     setResult(null);
 
     try {
-      const response = await fetch('http://localhost:8000/api/multiply', {
+      const response = await fetch(`${apiUrl}/api/multiply`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -25,7 +31,7 @@ export default function Home() {
         throw new Error('Network response was not ok');
       }
 
-      const data = await response.json();
+      const data: MultiplyResponse = await response.json();
       setResult(data.result);
     } catch (err: unknown) {
       setError((err as Error).message);

package/templates/frontend/nextjs/eslint.config.mjs

@@ -0,0 +1,7 @@
+import nextConfig from "eslint-config-next";
+
+const config = [
+  ...nextConfig,
+];
+
+export default config;

package/templates/frontend/nextjs/lint.sh

@@ -1,3 +1,4 @@
 #!/usr/bin/env bash
+set -e
 npm run lint
 npx prettier --write .