initial separated preview server

Author: gabrielmfern

apps/demo/package.json

@@ -15,6 +15,7 @@
     "react-email": "workspace:*"
   },
   "devDependencies": {
+    "@react-email/preview-server": "workspace:*",
     "next": "15.3.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",

apps/preview-server/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+
+# for testing
+static

apps/preview-server/.npmignore

@@ -0,0 +1,5 @@
+.react-email
+./emails
+./emails/static
+node_modules
+.turbo

apps/preview-server/_index.js

@@ -0,0 +1,4 @@
+/**
+ * this file is just a placeholder file so that import.meta.resolve and require.resolve can properly
+ * find out the path to this module. This file does not do anything nor does it need to export anything of value.
+ */

apps/preview-server/license.md

@@ -0,0 +1,71 @@
+{
+  "name": "@react-email/preview-server",
+  "version": "1.0.0",
+  "description": "A live preview of your emails right in your browser.",
+  "scripts": {
+    "caniemail:fetch": "node ./scripts/fill-caniemail-data.mjs",
+    "clean": "rm -rf dist",
+    "build": "node ./scripts/build-preview-server.mjs",
+    "dev": "",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "main": "./_index.js",
+  "dependencies": {
+    "@babel/parser": "^7.27.0",
+    "@babel/traverse": "^7.27.0",
+    "@lottiefiles/dotlottie-react": "0.13.3",
+    "@radix-ui/colors": "1.0.1",
+    "@radix-ui/react-collapsible": "1.1.7",
+    "@radix-ui/react-dropdown-menu": "2.1.10",
+    "@radix-ui/react-popover": "1.1.10",
+    "@radix-ui/react-slot": "1.2.0",
+    "@radix-ui/react-tabs": "1.1.7",
+    "@radix-ui/react-toggle-group": "1.1.6",
+    "@radix-ui/react-tooltip": "1.2.3",
+    "chalk": "^4.1.2",
+    "clsx": "2.1.1",
+    "esbuild": "^0.25.0",
+    "framer-motion": "12.7.5",
+    "json5": "2.2.3",
+    "log-symbols": "^4.1.0",
+    "module-punycode": "npm:[email protected]",
+    "next": "^15.2.4",
+    "node-html-parser": "6.1.13",
+    "ora": "^5.4.1",
+    "pretty-bytes": "6.1.1",
+    "prism-react-renderer": "2.4.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "sharp": "0.34.1",
+    "socket.io-client": "^4.8.1",
+    "sonner": "1.7.4",
+    "source-map-js": "1.2.1",
+    "stacktrace-parser": "0.1.11",
+    "tailwind-merge": "2.6.0",
+    "use-debounce": "10.0.4",
+    "zod": "3.24.3"
+  },
+  "devDependencies": {
+    "@react-email/components": "workspace:*",
+    "@types/babel__core": "7.20.5",
+    "@types/babel__traverse": "7.20.7",
+    "@types/fs-extra": "11.0.1",
+    "@types/mime-types": "2.1.4",
+    "@types/node": "22.10.2",
+    "@types/normalize-path": "3.0.2",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "@types/webpack": "5.28.5",
+    "autoprefixer": "10.4.21",
+    "postcss": "8.5.3",
+    "tailwindcss": "3.4.0",
+    "typescript": "5.8.3"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/resend/react-email.git",
+    "directory": "apps/preview-server"
+  }
+}

packages/react-email/module-punycode.d.ts renamed to apps/preview-server/module-punycode.d.ts

@@ -0,0 +1,23 @@
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const nextBuildProcess = spawn('pnpm', ['next', 'build'], {
+  detached: true,
+  shell: true,
+  stdio: 'inherit',
+  cwd: path.resolve(import.meta.dirname, '../'),
+});
+
+process.on('SIGINT', () => {
+  nextBuildProcess.kill('SIGINT');
+});
+
+nextBuildProcess.on('exit', (code) => {
+  if (code !== 0) {
+    console.error(`next build failed with exit code ${code}`);
+    process.exit(code);
+  }
+
+  fs.rmSync(path.resolve(import.meta.dirname, '../.next/cache'), { recursive: true });
+});

packages/react-email/next-env.d.ts renamed to apps/preview-server/next-env.d.ts

@@ -0,0 +1,3 @@
+export function escapeStringForRegex(string: string) {
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}

packages/react-email/next.config.js renamed to apps/preview-server/next.config.js

@@ -0,0 +1,63 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import type { Loader, PluginBuild, ResolveOptions } from 'esbuild';
+import { escapeStringForRegex } from './escape-string-for-regex';
+
+/**
+ * Made to export the `render` function out of the user's email template
+ * so that issues like https://github.com/resend/react-email/issues/649 don't
+ * happen.
+ *
+ * This also exports the `createElement` from the user's React version as well
+ * to avoid mismatches.
+ *
+ * This avoids multiple versions of React being involved, i.e., the version
+ * in the CLI vs. the version the user has on their emails.
+ */
+export const renderingUtilitiesExporter = (emailTemplates: string[]) => ({
+  name: 'rendering-utilities-exporter',
+  setup: (b: PluginBuild) => {
+    b.onLoad(
+      {
+        filter: new RegExp(
+          emailTemplates
+            .map((emailPath) => escapeStringForRegex(emailPath))
+            .join('|'),
+        ),
+      },
+      async ({ path: pathToFile }) => {
+        return {
+          contents: `${await fs.readFile(pathToFile, 'utf8')};
+          export { render } from 'react-email-module-that-will-export-render'
+          export { createElement as reactEmailCreateReactElement } from 'react';
+        `,
+          loader: path.extname(pathToFile).slice(1) as Loader,
+        };
+      },
+    );
+
+    b.onResolve(
+      { filter: /^react-email-module-that-will-export-render$/ },
+      async (args) => {
+        const options: ResolveOptions = {
+          kind: 'import-statement',
+          importer: args.importer,
+          resolveDir: args.resolveDir,
+          namespace: args.namespace,
+        };
+        let result = await b.resolve('@react-email/render', options);
+        if (result.errors.length === 0) {
+          return result;
+        }
+
+        // If @react-email/render does not exist, resolve to @react-email/components
+        result = await b.resolve('@react-email/components', options);
+        if (result.errors.length > 0 && result.errors[0]) {
+          result.errors[0].text =
+            "Failed trying to import `render` from either `@react-email/render` or `@react-email/components` to be able to render your email template.\n Maybe you don't have either of them installed?";
+        }
+        return result;
+      },
+    );
+  },
+});

apps/preview-server/package.json

@@ -0,0 +1,82 @@
+import path from 'node:path';
+import { getEmailsDirectoryMetadata } from './get-emails-directory-metadata';
+
+test('getEmailsDirectoryMetadata on demo emails', async () => {
+  const emailsDirectoryPath = path.resolve(
+    __dirname,
+    '../../../../apps/demo/emails',
+  );
+  expect(await getEmailsDirectoryMetadata(emailsDirectoryPath)).toEqual({
+    absolutePath: emailsDirectoryPath,
+    directoryName: 'emails',
+    relativePath: '',
+    emailFilenames: [],
+    subDirectories: [
+      {
+        absolutePath: `${emailsDirectoryPath}/magic-links`,
+        directoryName: 'magic-links',
+        relativePath: 'magic-links',
+        emailFilenames: [
+          'aws-verify-email',
+          'linear-login-code',
+          'notion-magic-link',
+          'plaid-verify-identity',
+          'raycast-magic-link',
+          'slack-confirm',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/newsletters`,
+        directoryName: 'newsletters',
+        relativePath: 'newsletters',
+        emailFilenames: [
+          'codepen-challengers',
+          'google-play-policy-update',
+          'stack-overflow-tips',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/notifications`,
+        directoryName: 'notifications',
+        relativePath: 'notifications',
+        emailFilenames: [
+          'github-access-token',
+          'papermark-year-in-review',
+          'vercel-invite-user',
+          'yelp-recent-login',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/receipts`,
+        directoryName: 'receipts',
+        relativePath: 'receipts',
+        emailFilenames: ['apple-receipt', 'nike-receipt'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/reset-password`,
+        directoryName: 'reset-password',
+        relativePath: 'reset-password',
+        emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/reviews`,
+        directoryName: 'reviews',
+        relativePath: 'reviews',
+        emailFilenames: ['airbnb-review', 'amazon-review'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/welcome`,
+        directoryName: 'welcome',
+        relativePath: 'welcome',
+        emailFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],
+        subDirectories: [],
+      },
+    ],
+  });
+});