@react-foundry/plop-pack 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (C) 2019-2025 Crown Copyright
+Copyright (C) 2019-2026 Daniel A.C. Martin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+React Foundry - Plop Pack
+=========================
+
+Plop pack with misc tools.
+
+
+Using this package
+------------------
+
+First install the package into your project:
+
+```shell
+npm install -D @react-foundry/plop-pack
+```
+
+Then use it in your `plopfile.js` as follows:
+
+```js
+module.exports = plop => {
+  plop.load('@react-foundry/plop-pack');
+
+  // ...
+}
+```
+
+
+Working on this package
+-----------------------
+
+Before working on this package you must install its dependencies using
+the following command:
+
+```shell
+pnpm install
+```
+
+
+### Testing
+
+```shell
+npm test
+```

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@react-foundry/plop-pack",
+  "version": "0.1.0",
+  "description": "Plop pack with misc tools.",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "/src",
+    "/skel"
+  ],
+  "author": "Daniel A.C. Martin <npm@daniel-martin.co.uk> (http://daniel-martin.co.uk/)",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "dependencies": {
+    "fs-extra": "^11.3.3",
+    "lodash": "^4.17.23",
+    "minimist": "^1.2.8",
+    "node-plop": "^0.32.3",
+    "plop": "^4.0.5",
+    "resolve": "^1.22.11",
+    "shelljs": "^0.10.0"
+  },
+  "devDependencies": {
+    "handlebars": "4.7.8",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0"
+  },
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "build": "true",
+    "clean": "true"
+  }
+}

package/skel/app/.dockerignore

@@ -0,0 +1,9 @@
+.cypress/
+.react-router/
+node_modules/
+pkg/
+spec/
+src/
+README.md
+tsconfig.json
+tsconfig.tsbuildinfo

package/skel/app/Dockerfile

@@ -0,0 +1,32 @@
+FROM node:24.13.0-alpine
+
+RUN apk add --no-cache ca-certificates \
+ && apk upgrade --no-cache \
+ && addgroup -S app \
+ && adduser -S app -G app -u 31337 -h /app/ \
+ && chown -R app:app /app/
+
+USER app
+WORKDIR /app
+ENV NODE_ENV production
+ENV MODE server
+
+COPY package.json /app/
+COPY dist/ /app/dist/
+
+USER 31337
+ENV LISTEN_HOST="::" \
+    LISTEN_PORT="8080" \
+    SSR_ONLY="false" \
+    SESSIONS_SECRET="changeme" \
+    AUTH_METHOD="none" \
+    OIDC_ISSUER="https://keycloak/realms/demo/" \
+    OIDC_CLIENT_ID="app" \
+    OIDC_CLIENT_SECRET="" \
+    OIDC_REDIRECT_URI="https://localhost" \
+    AUTH_HEADER_USERNAME="x-auth-username" \
+    AUTH_HEADER_GROUPS="x-auth-groups" \
+    AUTH_HEADER_ROLES="x-auth-roles"
+EXPOSE ${LISTEN_PORT:-8080}
+HEALTHCHECK CMD wget -q -O /dev/null http://localhost/healthz:${LISTEN_PORT} || exit 1
+CMD ["node", "."]

package/skel/app/Makefile.hbs

@@ -0,0 +1,87 @@
+DOCKER_IMAGE ?= {{{pkg 'name'}}}-{{{name}}}
+DOCKER_REGISTRY ?= hub.docker.com
+DOCKER_REPO ?= $(DOCKER_REGISTRY)/$(DOCKER_IMAGE)
+KUBE_CONTEXT ?= {{{pkg 'name'}}}-dev
+KUBE_DEPLOYMENT ?= {{{pkg 'name'}}}-{{{name}}}
+KUBE_CONTAINER ?= app
+
+kubectl ?= kubectl --context $(KUBE_CONTEXT)
+
+patch_version != jq -r '.version' 'package.json'
+minor_version != echo "$(patch_version)" | awk -F '.' '{print $$1"."$$2}'
+major_version != echo "$(patch_version)" | awk -F '.' '{print $$1}'
+full_version != echo "$(patch_version)-$${BUILD_NUMBER/%/-}$$(git rev-parse --short HEAD)"
+
+.PHONY: all aws-lambda build clean deploy deps distclean docker docker-clean docker-push docker-test netlify node-deps test unit-test
+
+all: deps test docker
+
+clean:
+	npm run clean
+	rm -rf node_modules/ pkg/
+
+distclean: clean docker-clean
+
+deps: node-deps
+
+node-deps: node_modules/.bin/react-router
+
+node_modules/%: package.json
+	pnpm install
+
+build: dist/server/index.js
+
+dist/%: node_modules/.bin/react-router
+	npm run build
+
+docker: build
+	docker build -t '$(DOCKER_IMAGE)' .
+
+docker-test:
+	docker build -t '$(DOCKER_IMAGE)-test' -f 'test.Dockerfile' .
+
+docker-clean:
+	docker rmi -f '$(DOCKER_IMAGE)' || true
+	docker rmi -f '$(DOCKER_IMAGE)-test' || true
+
+docker-push: docker
+	docker tag $(DOCKER_IMAGE) '$(DOCKER_REPO):$(full_version)' && docker push '$(DOCKER_REPO):$(full_version)'
+	docker tag $(DOCKER_IMAGE) '$(DOCKER_REPO):$(patch_version)' && docker push '$(DOCKER_REPO):$(patch_version)'
+	docker tag $(DOCKER_IMAGE) '$(DOCKER_REPO):$(minor_version)' && docker push '$(DOCKER_REPO):$(minor_version)'
+	docker tag $(DOCKER_IMAGE) '$(DOCKER_REPO):$(major_version)' && docker push '$(DOCKER_REPO):$(major_version)'
+	docker tag $(DOCKER_IMAGE) '$(DOCKER_REPO):latest' && docker push '$(DOCKER_REPO):latest'
+
+docker-run:
+	docker run --name=docs -p '8080:8080' '$(DOCKER_IMAGE)'
+
+aws-lambda: pkg/aws-lambda/{{{name}}}.zip
+
+pkg/aws-lambda/%.zip: aws-lambda-entry.js package.json dist/server/index.js
+	mkdir -p '$(@D)'
+	zip -rv '$(@)' 'dist'
+	zip -v '$(@)' 'package.json'
+	cp '$(<)' '$(@D)/$(basename $(@F)).js'
+	zip -mvj '$(@)' '$(@D)/$(basename $(@F)).js'
+
+netlify: pkg/netlify/functions/{{{name}}}.zip pkg/netlify/publish/_redirects
+
+pkg/netlify/functions/%.zip: pkg/aws-lambda/%.zip
+	mkdir -p '$(@D)'
+	cp -a '$(<)' '$(@)'
+
+pkg/netlify/publish/_redirects: dist/server/index.js
+	mkdir -p '$(@D)'
+	cp -a 'dist/app/client/'* '$(@D)'
+	echo '/* /.netlify/functions/{{{name}}}/:splat 200' > '$(@)'
+
+deploy: docker-push
+	$(kubectl) set image 'deployment/$(KUBE_DEPLOYMENT)' '$(KUBE_CONTAINER)=$(DOCKER_REPO):$(full_version)'
+	$(kubectl) rollout status 'deployment/$(KUBE_DEPLOYMENT)'
+
+functional-test: build
+	npm run 'test:functional:ci'
+
+unit-test: node-deps
+	npm test
+
+test: unit-test functional-test

package/skel/app/README.md.hbs

@@ -0,0 +1,91 @@
+{{#mdTitle}}{{{titleCase (pkg 'name')}}} - {{{titleCase name}}}{{/mdTitle}}
+
+{{{description}}}
+
+## Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+To build and run using Docker:
+
+```bash
+docker build -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

package/skel/app/aws-lambda-entry.js

@@ -0,0 +1,3 @@
+process.env['MODE'] = 'serverless';
+process.env['NODE_ENV'] = 'production';
+export const { handler } = await import('./dist/server/index.js');

package/skel/app/cypress.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from 'cypress';
+import projectConfig from '../../cypress.config.mjs';
+
+export default defineConfig({
+  ...projectConfig
+});

package/skel/app/feat/home.spec.js

@@ -0,0 +1,5 @@
+describe('The home page', () => {
+  it('successfully loads', () => {
+    cy.visitReady('/');
+  });
+});

package/skel/app/gitignore

@@ -0,0 +1,10 @@
+.cypress/
+.DS_Store
+.netlify/
+.react-router/
+dist/
+node_modules/
+package-lock.json
+pkg/
+pnpm-lock.yaml
+tsconfig.tsbuildinfo

package/skel/app/jest.config.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const baseConfig = require('../../jest.config.base');
+
+const config = {
+  ...baseConfig,
+  collectCoverageFrom: [
+    '<rootDir>/src/**.{ts,tsx}',
+  ],
+  testMatch: [
+    '<rootDir>/spec/**.{ts,tsx}'
+  ]
+};
+
+module.exports = config;

package/skel/app/lambda.Dockerfile

@@ -0,0 +1,23 @@
+FROM public.ecr.aws/lambda/nodejs:24
+
+ENV NODE_ENV production
+ENV MODE serverless
+
+COPY package.json ${LAMBDA_TASK_ROOT}/
+COPY dist/ ${LAMBDA_TASK_ROOT}/dist/
+COPY aws-lambda-entry.js ${LAMBDA_TASK_ROOT}/entry.js
+
+USER 31337
+ENV LISTEN_HOST="::" \
+    LISTEN_PORT="8080" \
+    SSR_ONLY="false" \
+    SESSIONS_SECRET="changeme" \
+    AUTH_METHOD="none" \
+    OIDC_ISSUER="https://keycloak/realms/demo/" \
+    OIDC_CLIENT_ID="app" \
+    OIDC_CLIENT_SECRET="" \
+    OIDC_REDIRECT_URI="https://localhost" \
+    AUTH_HEADER_USERNAME="x-auth-username" \
+    AUTH_HEADER_GROUPS="x-auth-groups" \
+    AUTH_HEADER_ROLES="x-auth-roles"
+CMD ["entry.handler"]

package/skel/app/package.json.hbs

@@ -0,0 +1,61 @@
+{
+  "name": "@{{{pkg 'name'}}}/{{{name}}}",
+  "version": "{{{pkg 'version'}}}",
+  "description": "{{{description}}}",
+  "private": true,
+  "type": "module",
+  "main": "dist/server/index.js",
+  "scripts": {
+    "start": "node .",
+    "start:test": "COOKIES_SECURE=no node .",
+    "test": "npm run test:unit",
+    "test:ci": "npm test && npm run test:functional:ci",
+    "test:functional": "cypress run ${CYPRESS_PROJECT_ID:+--record ${CYPRESS_FLAGS}}",
+    "test:functional:ci": "start-server-and-test 'start:test' 'http-get://localhost:8080/readiness' test:functional",
+    "test:unit": "jest --passWithNoTests",
+    "build": "npm run build:app && npm run build:server",
+    "build:app": "react-router build",
+    "build:server": "vite -c vite.config.server.ts build",
+    "heroku-postbuild": "npm run build",
+    "clean": "rm -rf dist/ pkg/ node_modules/.vite/ node_modules/.vite-temp/ .react-router/",
+    "dev": "NODE_ENV=development bun --watch --inspect ./src/server/dev.ts",
+    "cypress": "cypress open",
+    "create": "plop",
+    "create:deployment": "plop deployment",
+    "create:page": "plop page",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "author": "{{{pkg 'author'}}}",
+  "license": "{{{pkg 'license'}}}",
+  "dependencies": {
+    "@react-foundry/fastify": "{{#if (eq (pkg 'name')'react-foundry')}}workspace:*{{else}}0.1.0{{/if}}",
+    "@react-foundry/fastify-react-router": "{{#if (eq (pkg 'name')'react-foundry')}}workspace:*{{else}}0.1.0{{/if}}",
+    "@react-foundry/react-router-context": "{{#if (eq (pkg 'name')'react-foundry')}}workspace:*{{else}}0.1.0{{/if}}",
+    "@react-foundry/router": "{{#if (eq (pkg 'name')'react-foundry')}}workspace:*{{else}}0.1.0{{/if}}",
+    "@mdx-js/rollup": "3.1.1",
+    "@react-router/fs-routes": "7.12.0",
+    "@react-router/node": "7.12.0",
+    "isbot": "5.1.32",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-router": "7.12.0",
+    "serverless-http": "4.0.0"
+  },
+  "devDependencies": {
+    "@react-foundry/app-plop-pack": "{{#if (eq (pkg 'name')'react-foundry')}}workspace:*{{else}}0.1.0{{/if}}",
+    "@react-foundry/vite-html-react": "{{#if (eq (pkg 'name')'react-foundry')}}workspace:*{{else}}0.1.0{{/if}}",
+    "@react-router/dev": "7.12.0",
+    "@types/mdx": "2.0.13",
+    "@types/node": "24.10.9",
+    "@types/react": "19.2.8",
+    "@types/react-dom": "19.2.3",
+    "bun": "1.3.6",
+    "cypress": "15.9.0",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "start-server-and-test": "2.1.3",
+    "ts-jest": "29.4.6",
+    "typescript": "5.9.3",
+    "vite": "7.3.1"
+  }
+}

package/skel/app/plopfile.mjs

@@ -0,0 +1,5 @@
+export const plopFunction = async (plop) => {
+  await plop.load('@react-foundry/app-plop-pack');
+};
+
+export default plopFunction;

package/skel/app/react-router.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  appDirectory: 'src/app',
+  buildDirectory: 'dist/app',
+  future: {
+    v8_middleware: true
+  },
+  routeDiscovery: {
+    mode: 'initial'
+  },
+  ssr: true,
+} satisfies Config;

package/skel/app/src/app/config.ts.hbs

@@ -0,0 +1 @@
+export const siteTitle: string = '{{{ title }}}';

package/skel/app/src/app/entry.client.tsx

@@ -0,0 +1,17 @@
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>,
+    {
+      onRecoverableError: (error, errorInfo) => {
+        console.warn(error, 'Component Stack:', errorInfo.componentStack);
+      }
+    }
+  );
+});

package/skel/app/src/app/entry.server.tsx

@@ -0,0 +1,85 @@
+import { PassThrough } from "node:stream";
+
+import type { EntryContext } from "react-router";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { ServerRouter } from "react-router";
+import { isbot } from "isbot";
+import type { RenderToPipeableStreamOptions } from "react-dom/server";
+import { renderToPipeableStream } from "react-dom/server";
+import type { Request } from "@react-foundry/fastify-react-router";
+import type { RouterContextProvider } from "@react-foundry/react-router-context";
+import { cspNonceContext } from "@react-foundry/react-router-context";
+
+export const streamTimeout = 5_000;
+const isServerless = process.env['MODE'] === 'serverless';
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  loadContext: RouterContextProvider
+) {
+  const nonce = request.cspNonce || loadContext.cspNonce || loadContext.get(cspNonceContext);
+
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    let userAgent = request.headers.get("user-agent");
+
+    // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    let readyOption: keyof RenderToPipeableStreamOptions =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode || isServerless
+        ? "onAllReady"
+        : "onShellReady";
+
+    // Abort the rendering stream after the `streamTimeout` so it has time to
+    // flush down the rejected boundaries
+    let timeoutId: ReturnType<typeof setTimeout> | undefined = setTimeout(
+      () => abort(),
+      streamTimeout + 1000,
+    );
+
+    const { pipe, abort } = renderToPipeableStream(
+      <ServerRouter context={routerContext} url={request.url} nonce={nonce} />,
+      {
+        [readyOption]() {
+          shellRendered = true;
+          const body = new PassThrough({
+            final(callback) {
+              // Clear the timeout to prevent retaining the closure and memory leak
+              clearTimeout(timeoutId);
+              timeoutId = undefined;
+              callback();
+            },
+          });
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          pipe(body);
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+        },
+        nonce,
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+  });
+}