React Email Plugin
Relevant source files
The following files were used as context for generating this wiki page:
The React Email Plugin (@nx-extend/react-email) integrates the React Email framework into an Nx workspace. It provides tools to build, preview, and export email templates using React components. The plugin manages the lifecycle of email projects through standardized Nx generators and executors, enabling live development and static HTML generation.
Sources: packages/react-email/README.md:1-12, packages/react-email/package.json:1-15
Core Features
The plugin enables three primary workflows within the Nx ecosystem:
- Initialization: Configures a new email project with necessary dependencies and boilerplate.
- Development (Serve): Runs a local development server for real-time template previews.
- Production (Export): Transforms React components into optimized, static HTML files.
Sources: packages/react-email/README.md:7-12, packages/react-email/src/generators/init/init.impl.ts:25-50
Project Lifecycle and Architecture
The following diagram illustrates the lifecycle of a React Email project from initialization to deployment.
The plugin uses standard Nx patterns. The init generator sets up the project.json with serve and export targets.
Sources: packages/react-email/src/generators/init/init.impl.ts:25-67, e2e/react-email-e2e/tests/react-email.spec.ts:13-38
Project Initialization
To set up a new React Email project, you run the init generator. This process performs several automated steps:
- Normalization: It normalizes project names and roots using
@nx-extend/core. - Configuration: It adds a project configuration to the workspace with
applicationtype. - Target Injection: It defines
serveandexporttargets using the plugin's internal executors. - Dependency Management: It adds
react-emailto thedevDependenciesof the workspacepackage.json.
Sources: packages/react-email/src/generators/init/init.impl.ts:25-67, packages/react-email/README.md:16-19
Initialization Targets
When a project is initialized, the following targets are added to its project.json:
| Target | Executor | Default Options |
|---|---|---|
serve | @nx-extend/react-email:serve | {} |
export | @nx-extend/react-email:export | outputPath: dist/apps/<name>, pretty: false (production) |
Sources: packages/react-email/src/generators/init/init.impl.ts:31-50, e2e/react-email-e2e/tests/react-email.spec.ts:16-36
Development Workflow (Serve)
The serve executor starts the React Email development server. This server monitors the src/emails directory and provides a web interface to preview rendered templates.
nx serve <project-name> --port=3000
| Option | Type | Description |
|---|---|---|
port | string | The port number on which the development server listens. |
Sources: packages/react-email/README.md:23-32, packages/react-email/src/generators/init/init.impl.ts:36-39
Export Workflow (Export)
The export executor converts React .tsx email templates into static .html files. By default, the production configuration disables "pretty" formatting to optimize the output size.
nx export <project-name> --outputPath=dist/emails
| Option | Type | Description |
|---|---|---|
outputPath | string | The destination directory for the generated HTML files. |
Sources: packages/react-email/README.md:36-45, e2e/react-email-e2e/tests/react-email.spec.ts:21-34
Project Structure
A typical project created by the init generator adheres to the following structure:
<project-root>/
├── src/
│ └── emails/
│ └── welcome.tsx # Email template component
├── project.json # Nx project configuration
├── tsconfig.json # TypeScript configuration
└── .eslintrc.json # Linting rules
Sources: packages/react-email/README.md:54-61, packages/react-email/CHANGELOG.md:160-163
Dependencies
The plugin requires specific peer dependencies to function correctly within the Nx environment.
| Package | Version |
|---|---|
@nx/devkit | ^22.0.0 |
react-email | ^6.1.1 |
Sources: packages/react-email/package.json:16-19, packages/react-email/src/generators/init/init.impl.ts:63-65
Summary
The React Email Plugin provides a streamlined developer experience for creating HTML emails in Nx workspaces. By leveraging React components and a dedicated dev server, it eliminates the traditional friction of email template design. The plugin ensures consistency across the workspace by automating project setup and providing standardized build and serve commands.
Sources: packages/react-email/README.md:1-45, packages/react-email/src/generators/init/init.impl.ts:25-67