React Academy · Lesson

Code Generators & Workspace Automation

Write custom Nx generators to scaffold components, pages, and libraries consistently.

Code Generators & Workspace Automation is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are Nx Generators?

Nx generators are code generation tools (like schematics) that scaffold files, update configs, and maintain consistency across a monorepo. Run built-in generators or write your own.

Running Built-in Generators

Use nx generate with a generator package and name. Add --dry-run to preview changes without writing files.

# Generate a React component in the ui library:
npx nx generate @nx/react:component Button --project=ui --dry-run

# Generate a hook:
npx nx generate @nx/react:hook useAuth --project=data-access

Creating a Custom Generator

Generate a blank generator template inside a local plugin project.

# Create a local plugin:
npx nx generate @nx/plugin:plugin my-plugin --directory=tools/my-plugin

# Add a generator to it:
npx nx generate @nx/plugin:generator feature-module --project=my-plugin

Generator Structure

A generator consists of a schema.json (inputs) and an index.ts (logic that modifies files and the workspace).

// tools/my-plugin/src/generators/feature-module/schema.json
{
  "$schema": "...",
  "title": "Feature Module Generator",
  "properties": {
    "name": { "type": "string", "description": "Feature name" },
    "directory": { "type": "string", "default": "libs" }
  },
  "required": ["name"]
}

Generator Index.ts

The generator function receives the tree (file system abstraction) and options. Use tree APIs to read, write, and update files.

import { Tree, formatFiles, generateFiles } from '@nx/devkit';
import * as path from 'path';

export default async function (tree: Tree, options: FeatureGeneratorSchema) {
  generateFiles(
    tree,
    path.join(__dirname, 'files'), // template folder
    `libs/${options.name}`,       // output path
    { ...options, tmpl: '' }       // template variables
  );
  await formatFiles(tree); // run prettier on generated files
}

Template Files

Place template files in a files/ folder next to the generator. Use EJS syntax for dynamic content.

// tools/my-plugin/src/generators/feature-module/files/src/index.ts__tmpl__
export * from './lib/<%= name %>';

// files/src/lib/__name@dasherize__.ts__tmpl__
export function <%= name %>() {
  return '<%= name %> feature';
}

Updating project.json

Generators can modify existing files. Use updateProjectConfiguration to add new targets to a project.

import { updateProjectConfiguration, readProjectConfiguration } from '@nx/devkit';

const config = readProjectConfiguration(tree, options.project);
config.targets.storybook = {
  executor: '@storybook/nx:build-storybook',
  options: { outputDir: 'dist/storybook' },
};
updateProjectConfiguration(tree, options.project, config);

Running Your Generator

Run custom generators the same way as built-in ones, referencing your local plugin.

npx nx generate my-plugin:feature-module my-feature --dry-run
npx nx generate my-plugin:feature-module my-feature

Workspace Migrations

Nx provides automatic migrations when you update Nx version. Run nx migrate latest then nx migrate --run-migrations to apply them.

npx nx migrate latest
# Review migrations.json
npx nx migrate --run-migrations

Automating Boilerplate

Build custom generators for patterns specific to your team: feature modules with standard folder structure, CRUD pages, data-access libraries with pre-configured query hooks, etc.

Testing Generators

Nx provides a test harness for generators. Create a minimal tree in tests to verify file generation without touching the real file system.

import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';

test('generates feature module', async () => {
  const tree = createTreeWithEmptyWorkspace();
  await generator(tree, { name: 'products' });
  expect(tree.exists('libs/products/src/index.ts')).toBe(true);
});

Quick Check

What is the purpose of the files/ folder in an Nx generator?

Recap

Nx generators scaffold files consistently via nx generate. Write custom generators with a schema.json (inputs) and index.ts (logic). Use the files/ folder for EJS templates. Test generators with createTreeWithEmptyWorkspace for a safe in-memory file system.

Frequently asked questions

Is the “Code Generators & Workspace Automation” lesson free?

Yes — the full text of “Code Generators & Workspace Automation” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Code Generators & Workspace Automation”?

Write custom Nx generators to scaffold components, pages, and libraries consistently. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Code Generators & Workspace Automation” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy