Customize the emails Folder

[kirkouimet]

Goals

Currently react-email uses the convention of the emails folder at the root directory for the web interface to show emails.

Background

I would like to be able to configure which directory is used, allowing for more flexible folder structures for more complex projects.

Proposal

Perhaps as a configuration option in the command line call to run the email dev server, e.g., email dev -d "directory".

[gabrielmfern]

We actually already have a --dir option that can be used as -d that works exactly as you described.

react-email/packages/react-email/src/cli/index.ts

Lines 16 to 21 in 077360f

	program
	.command('dev')
	.description('Starts the preview email development app')
	.option('-d, --dir <path>', 'Directory with your email templates', './emails')
	.option('-p --port <port>', 'Port to run dev server on', '3000')
	.action(dev);

[kirkouimet]

@gabrielmfern thank you! This is so helpful.

Do you think supporting multiple directories would be a potential feature to add in the future? I am having an issue with project organization and I would love to be able to point to 2+ folders to read in emails from.

[gabrielmfern]

Might be, I can't think of a reason not to, but not sure what API we would implement here, maybe multiple -d flags being passed in?

[kirkouimet]

It looks like the standard way with commander (https://www.npmjs.com/package/commander) would be something like this:

npm run dev --dir ./dir1 ./dir2 ./dir3

Where each directory is separated by a space.

If I were to create a pull request adding this functionality, do you think it would be accepted?

[gabrielmfern]

@kirkouimet I'd review it in a heartbeat, go for it! Contributions are really appreciated.

[kirkouimet]

@gabrielmfern I took a look at adding it, thinking it would be an easy add. Then, the complexity quickly grew. The largest issue is that the monorepo shares the emails folder over to the next app using environment variables, and it is not possible to have an array as a environment variable:

https://github.com/resend/react-email/blob/canary/packages/react-email/src/cli/utils/preview/get-env-variables-for-preview-app.ts

Any ideas on how to handle an array of directories via environment vars?

[gabrielmfern]

@kirkouimet The best way I can currently think of is to do so through some separator in the same string. But now that you mention it, there are a few other changes will be needed down the line, like on the places getEmailsDirectoryMetadata is called.