feat(create-rstack): add Nx template

packages/create-rstack/README.md

@@ -51,6 +51,7 @@ npx create-rstack --dir my-project --template app-vanilla-ts --no-git
 - `doc` - Basic documentation site
 - `doc-i18n` - Multilingual documentation site
 - `turborepo` - Turborepo
+- `nx` - Nx
 
 ## Documentation
 

packages/create-rstack/src/index.ts

@@ -44,6 +44,7 @@ const templateNames = [
   'doc',
   'doc-i18n',
   'turborepo',
+  'nx',
 ];
 
 const resolveTemplateName = (template: string): string => {
@@ -56,7 +57,7 @@ const resolveTemplateName = (template: string): string => {
 
 const getTemplateName = async ({ template }: Argv): Promise<string> => {
   if (typeof template === 'string') {
-    if (/^(?:app|lib|doc|turborepo)(?:-|$)/u.test(template)) {
+    if (/^(?:app|lib|doc|turborepo|nx)(?:-|$)/u.test(template)) {
       return resolveTemplateName(template);
     }
 
@@ -79,7 +80,10 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
     const monorepoType = checkCancel<string>(
       await select({
         message: 'Select monorepo tool',
-        options: [{ value: 'turborepo', label: 'Turborepo', hint: 'pnpm' }],
+        options: [
+          { value: 'turborepo', label: 'Turborepo', hint: 'pnpm' },
+          { value: 'nx', label: 'Nx', hint: 'pnpm' },
+        ],
       }),
     );
 
@@ -235,6 +239,6 @@ await create({
   builtinTools: [],
   getTemplateName,
   getPackageManager: ({ templateName }) =>
-    templateName === 'turborepo' ? 'pnpm' : undefined,
+    ['turborepo', 'nx'].includes(templateName) ? 'pnpm' : undefined,
   onGitResolved: injectStagedSetup,
 });

packages/create-rstack/template-nx/README.md

@@ -0,0 +1,35 @@
+# Nx + Rstack
+
+## Setup
+
+```bash
+pnpm install
+```
+
+## Structure
+
+- `apps/web`: React application.
+- `packages/ui`: Shared UI components.
+- `tsconfig.base.json`: Shared TypeScript configuration.
+
+## Scripts
+
+Run from the repository root:
+
+- `pnpm run build`: Build all packages.
+- `pnpm run dev`: Start the web app and watch the shared UI package.
+- `pnpm run test`: Run tests.
+- `pnpm run check`: Run lint, formatting, and TypeScript checks.
+- `pnpm run lint`: Lint the workspace.
+- `pnpm run format`: Format the workspace.
+
+Nx discovers projects and tasks from workspace package manifests. Build and test tasks are cached, and dependencies are built first.
+
+Run `pnpm run build` before `pnpm run check`.
+
+Use `pnpm exec nx graph` to explore the project graph.
+
+## Learn more
+
+- [Rstack CLI monorepo guide](https://rstack.rs/guide/monorepo)
+- [Nx documentation](https://nx.dev/docs/getting-started/intro)

packages/create-rstack/template-nx/apps/web/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rs build",
+    "dev": "rs dev",
+    "preview": "rs preview",
+    "test": "rs test"
+  },
+  "dependencies": {
+    "@repo/ui": "workspace:^",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "happy-dom": "^21.0.1"
+  }
+}

packages/create-rstack/template-nx/apps/web/rstack.config.ts

@@ -0,0 +1,13 @@
+// Configuration guide: https://rstack.rs/config
+import { define } from 'rstack';
+
+define.app(async () => {
+  const { pluginReact } = await import('@rsbuild/plugin-react');
+  return {
+    plugins: [pluginReact()],
+  };
+});
+
+define.test({
+  setupFiles: ['./tests/rstest.setup.ts'],
+});

packages/create-rstack/template-nx/apps/web/src/App.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@repo/ui/button';
+
+export function App() {
+  return (
+    <main>
+      <h1>Web</h1>
+      <p>Nx + Rstack CLI</p>
+      <p>Edit apps/web/src/App.tsx to get started.</p>
+      <Button onClick={() => window.alert('Hello from @repo/ui!')}>
+        Shared button
+      </Button>
+      <nav>
+        <a href="https://rstack.rs">Rstack documentation</a>
+      </nav>
+    </main>
+  );
+}

packages/create-rstack/template-nx/apps/web/src/index.css

@@ -0,0 +1,27 @@
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  color: #202124;
+  background: #f8f9fa;
+}
+
+main {
+  max-width: 640px;
+  margin: 15vh auto;
+  padding: 24px;
+}
+
+button {
+  padding: 10px 16px;
+  border: 0;
+  border-radius: 8px;
+  color: white;
+  background: #5755d9;
+  cursor: pointer;
+}
+
+nav {
+  display: flex;
+  gap: 20px;
+  margin-top: 24px;
+}

packages/create-rstack/template-nx/apps/web/src/index.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+}

packages/create-rstack/template-nx/apps/web/tests/app.test.tsx

@@ -0,0 +1,11 @@
+import { expect, test } from 'rstack/test';
+import { render, screen } from '@testing-library/react';
+import { App } from '../src/App';
+
+test('renders the web app with the shared UI package', () => {
+  render(<App />);
+  expect(screen.getByRole('heading', { name: 'Web' })).toBeInTheDocument();
+  expect(
+    screen.getByRole('button', { name: 'Shared button' }),
+  ).toBeInTheDocument();
+});

packages/create-rstack/template-nx/apps/web/tests/rstest.setup.ts

@@ -0,0 +1,4 @@
+import { expect } from 'rstack/test';
+import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(jestDomMatchers);

packages/create-rstack/template-nx/apps/web/tests/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["rstack/types", "node", "@testing-library/jest-dom"]
+  },
+  "include": ["./"]
+}

packages/create-rstack/template-nx/apps/web/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "rstack.config.ts"]
+}

packages/create-rstack/template-nx/gitignore

@@ -0,0 +1,17 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# Nx
+.nx/cache/
+.nx/workspace-data/

packages/create-rstack/template-nx/nx.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "sharedGlobals": [
+      "{workspaceRoot}/tsconfig.base.json",
+      "{workspaceRoot}/rstack.config.ts",
+      "{workspaceRoot}/pnpm-workspace.yaml"
+    ]
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "cache": true,
+      "outputs": ["{projectRoot}/dist"]
+    },
+    "dev": {
+      "dependsOn": ["^build"],
+      "continuous": true
+    },
+    "test": {
+      "dependsOn": ["^build"],
+      "cache": true
+    }
+  }
+}

packages/create-rstack/template-nx/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "rstack-nx",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nx run-many -t build",
+    "check": "rs check --type-check",
+    "dev": "nx run-many -t dev",
+    "format": "rs fmt",
+    "lint": "rs lint",
+    "test": "nx run-many -t test"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "nx": "^23.3.0",
+    "rstack": "^0.8.4",
+    "typescript": "^7.0.2"
+  },
+  "packageManager": "pnpm@12.11.2"
+}

packages/create-rstack/template-nx/packages/ui/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@repo/ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "default": "./dist/button.js"
+    }
+  },
+  "scripts": {
+    "build": "rs lib",
+    "dev": "rs lib --watch --no-clean",
+    "test": "rs test"
+  },
+  "dependencies": {
+    "react": "^19.3.0"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "happy-dom": "^21.0.1",
+    "react-dom": "^19.3.0"
+  },
+  "nx": {
+    "targets": {
+      "dev": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  }
+}

packages/create-rstack/template-nx/packages/ui/rstack.config.ts

@@ -0,0 +1,20 @@
+// Configuration guide: https://rstack.rs/config
+import { define } from 'rstack';
+
+define.lib(async () => {
+  const { pluginReact } = await import('@rsbuild/plugin-react');
+  return {
+    dts: true,
+    source: {
+      entry: { button: './src/button.tsx' },
+    },
+    output: {
+      target: 'web',
+    },
+    plugins: [pluginReact()],
+  };
+});
+
+define.test({
+  setupFiles: ['./tests/rstest.setup.ts'],
+});

packages/create-rstack/template-nx/packages/ui/src/button.tsx

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+
+export function Button({
+  type = 'button',
+  ...props
+}: ComponentProps<'button'>) {
+  return <button type={type} {...props} />;
+}

packages/create-rstack/template-nx/packages/ui/tests/button.test.tsx

@@ -0,0 +1,18 @@
+import { expect, test } from 'rstack/test';
+import { render, screen } from '@testing-library/react';
+import { Button } from '../src/button';
+
+test('defaults to a non-submitting button and forwards props', () => {
+  render(<Button disabled>Save</Button>);
+  const button = screen.getByRole('button', { name: 'Save' });
+  expect(button).toHaveAttribute('type', 'button');
+  expect(button).toBeDisabled();
+});
+
+test('allows a submit button', () => {
+  render(<Button type="submit">Submit</Button>);
+  expect(screen.getByRole('button', { name: 'Submit' })).toHaveAttribute(
+    'type',
+    'submit',
+  );
+});

packages/create-rstack/template-nx/packages/ui/tests/rstest.setup.ts

@@ -0,0 +1,4 @@
+import { expect } from 'rstack/test';
+import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(jestDomMatchers);

packages/create-rstack/template-nx/packages/ui/tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "types": ["rstack/types", "node", "@testing-library/jest-dom"]
+  },
+  "include": ["./", "../rstack.config.ts"]
+}

packages/create-rstack/template-nx/packages/ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

packages/create-rstack/template-nx/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+packages:
+  - apps/*
+  - packages/*
+
+allowBuilds:
+  nx: true