CLI

Almost always you will need to have static files in your emails, and seeing them on the preview server without having to first host on a CDN is very helpful.

We do allow for this, and currently, you can place your files inside a static directory inside your emails directory.

This does adjust to your --dir option, so if your emails directory was inside ./src/emails, you would place your static files inside ./src/emails/static.

These static files are directly served from our preview server by looking into the requests made into it that end with /static (i.e. http://localhost:3000/static/...) and serving the files at that point, this also allows for you to have images inside your emails like so:

export default function Email(props) {
  return (
    <div>
      <img src="/static/email-logo.png" />
    </div>
  );
}

const baseURL = process.env.NODE_ENV === "production" ? "https://cdn.com" : "";

export default function Email(props) {
  return (
    <div>
      <img src={`${baseURL}/static/email-logo.png`} />
    </div>
  );
}

Considering that you are already default exporting the React component that will render as your email template, you can just define a PreviewProps with it as follows:

export default function Email(props) {
  return (
    <div>
      <a src={props.source}>click here if you want candy 👀</a>
    </div>
  );
}

Email.PreviewProps = {
  source: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
};

And then, when opening this email’s preview, the PreviewProps will be used as props into Email. So, in a nutshell, it will render the same as if you were to do:

import Email from "./path-to-my-email";

<Email {...Email.PreviewProps} />;

Once the preview server has started and is now open on localhost, the preview server reads recursively down into all of your files and directories. This can be disabled from a directory down by prefixing it with _, e.g. components -> _components.

So if you wanted to make components for your emails, you could have a file structure as follows:

my-project
├── emails
│   ├── _components
│   │   └── this-is-not-going-to-appear-in-the-sidebar.tsx
│   ├── email.tsx
│   └── static
├── package.json
└── tsconfig.json

Then the only file that will be shown on the preview server is going to be your email.tsx.

To avoid uncanny files appearing in the sidebar of the preview server, we account for two heuristics to determine weather or not we should include it:

1. If a file has .js, .jsx or .tsx as their file extension
2. If the file contains a export default expression by matching with the regex
   /\bexport\s*default\b/gm

These can certainly fail as they are only heuristics, so if you do find any issues with these, feel free to open an issue.