CLI

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:

```jsx
export default function Email(props) {
  return (
    <div>
      
    </div>
  );
}
```

<Info>
  This does not mean your images are hosted for you to send the emails.

    If you do send the rendered email, and you are trying to link to an image,
    or some other asset inside `emails/static`, they will not load on the email that was sent.

    We recommend that you use a different source link to your files depending on whether you're
    running in production or not. Here's an example

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

    export default function Email(props) {
      return (
        <div>
          
        </div>
      );
    }
    ```

    You can refer to our [demo emails source code](https://demo.react.email/preview/notifications/vercel-invite-user)
    for an example of how we do this with our demo deploy on Vercel.
</Info>

```jsx Email template
export default function Email(props) {
  return (
    <div>
      <a href={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:

```jsx Another file
import Email from "./path-to-my-email";

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

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

```bash
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`.

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](https://github.com/resend/react-email/issues).