Dev 1220 backend integration examples laravel symfony nest js express with docker compose

.gitignore

@@ -6,4 +6,5 @@ dist
 .cache
 .vscode
 .DS_Store
-.angular
+.angular
+.claude/

server-examples/django/Makefile

@@ -22,6 +22,8 @@ setup:
 	@echo ""
 	@echo "==> Installing frontend dependencies..."
 	cd frontend && npm install
+	cd frontend-angular && npm install
+	cd frontend-react && npm install
 	@echo ""
 	@echo "==> Starting Vite dev server..."
 	@echo "    Open http://localhost:5173 in your browser."
@@ -41,3 +43,5 @@ stop:
 clean:
 	docker compose down -v
 	rm -rf frontend/node_modules
+	rm -rf frontend-angular/node_modules
+	rm -rf frontend-react/node_modules

server-examples/django/README.md

@@ -8,40 +8,56 @@ A fully working employee directory that demonstrates Handsontable's `dataProvide
 |---|---|
 | Database | PostgreSQL 15 (Docker) |
 | Backend | Python 3.11, Django 4, Django REST Framework |
-| Frontend | Vite, Handsontable (`dataProvider` plugin) |
+| Frontend (JS) | Vite, Handsontable (`dataProvider` plugin) |
+| Frontend (Angular) | Angular 21, `@handsontable/angular-wrapper` |
+| Frontend (React) | React 19, `@handsontable/react-wrapper` |
 
 ## Quick start
 
 **Prerequisites:** Docker (with Compose plugin), Node.js, npm
 
 ```bash
-cd server-examples
-chmod +x setup.sh
-./setup.sh
+bash setup.sh
 ```
 
 Or with Make:
 
 ```bash
-cd server-examples
-make
+make setup
 ```
 
 The script will:
 1. Build and start PostgreSQL + Django via Docker Compose
 2. Run database migrations inside the container
 3. Seed 50 realistic employee records
-4. Install frontend npm dependencies
-5. Start the Vite dev server
+4. Install all frontend npm dependencies (JS, Angular, React)
+5. Build Angular and React apps, then start watchers for live rebuilds
+6. Start the Vite dev server
 
 Open **http://localhost:5173** in your browser.
 
+| URL | Description |
+|---|---|
+| http://localhost:5173 | JS frontend |
+| http://localhost:5173/angular.html | Angular frontend |
+| http://localhost:5173/react.html | React frontend |
+
+## Available commands
+
+```bash
+make setup    # Full first-time setup (build → migrate → seed → start)
+make backend  # Start only the Docker services
+make frontend # Install deps and start Vite
+make stop     # Stop Docker services
+make clean    # Remove containers, volumes, and node_modules
+```
+
 ## Project structure
 
 ```
-server-examples/
+server-examples/django/
 ├── setup.sh              # One-run setup script
-├── Makefile              # Alternative make-based entry point
+├── Makefile              # Convenience targets
 ├── docker-compose.yml    # PostgreSQL + Django services
 ├── backend/
 │   ├── Dockerfile
@@ -56,11 +72,24 @@ server-examples/
 │       ├── views.py      # Sort/filter translation + batch CRUD endpoints
 │       ├── urls.py
 │       └── management/commands/seed.py
-└── frontend/
+├── frontend/             # JS entry point + Vite dev server (serves all 3 variants)
+│   ├── package.json
+│   ├── vite.config.js    # Proxies /api/* → Django; serves Angular/React builds
+│   ├── favicon.png
+│   ├── index.html
+│   └── src/main.js       # Handsontable + dataProvider setup
+├── frontend-angular/     # Angular variant (ng build --watch → served via Vite)
+│   ├── angular.json
+│   ├── package.json
+│   └── src/app/
+│       ├── app.component.ts
+│       └── app.component.html
+└── frontend-react/       # React variant (vite build --watch → served via Vite)
+    ├── vite.config.ts
     ├── package.json
-    ├── vite.config.js    # Proxies /api/* → localhost:8000
-    ├── index.html
-    └── src/main.js       # Handsontable + dataProvider setup
+    └── src/
+        ├── main.tsx
+        └── App.tsx
 ```
 
 ## API endpoints

server-examples/django/backend/employees/views.py

@@ -133,10 +133,12 @@ def get_queryset(self):
     @action(detail=False, methods=['post'], url_path='create-rows')
     @transaction.atomic
     def create_rows(self, request):
-        serializer = EmployeeSerializer(data=request.data, many=True)
-        serializer.is_valid(raise_exception=True)
-        serializer.save()
-        # Return created rows so dataProvider can update its row map with server-assigned ids.
+        rows_amount = max(1, int(request.data.get('rowsAmount', 1)))
+        employees = Employee.objects.bulk_create([
+            Employee(first_name='', last_name='', department='', role='', salary=0)
+            for _ in range(rows_amount)
+        ])
+        serializer = EmployeeSerializer(employees, many=True)
         return Response(serializer.data, status=201)
 
     @action(detail=False, methods=['patch'], url_path='update-rows')
@@ -145,7 +147,7 @@ def update_rows(self, request):
         updated = []
         for row in request.data:
             employee = Employee.objects.get(pk=row['id'])
-            serializer = EmployeeSerializer(employee, data=row, partial=True)
+            serializer = EmployeeSerializer(employee, data=row['changes'], partial=True)
             serializer.is_valid(raise_exception=True)
             serializer.save()
             updated.append(serializer.data)

server-examples/django/docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.9'
-
 services:
   db:
     image: postgres:15-alpine

server-examples/django/frontend-angular/angular.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "django-angular": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": {
+              "base": "dist",
+              "browser": "browser"
+            },
+            "baseHref": "/angular-assets/",
+            "index": {
+              "input": "src/index.html",
+              "output": "angular.html"
+            },
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [],
+            "styles": [
+              "node_modules/handsontable/styles/handsontable.css",
+              "node_modules/handsontable/styles/ht-theme-main.css",
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "core-js",
+              "@handsontable/pikaday",
+              "numbro"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "django-angular:build:production"
+            },
+            "development": {
+              "buildTarget": "django-angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "django-angular:build"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}