Deployment guide

[maksimchowis]

Greetings! I was wondering how to deploy my project to Netlify, the way you did with demo page.

I know that project contains .react-email folder which internally uses Next.JS infrastructure. But deploying process is quite tricky for me. Is there a deploy command for the whole project, or I should deploy only Next.JS one? Would have been awesome, if you could provide some guidelines.

Thank you.

Update: I managed it by including .react-email folder to my GitHub repo and running "build" command for Next.JS project inside. Please tell me if there is a better way.

[jinsley8]

Don't deploy /.react-email that's only for previewing on local dev.

.gitignore the ./react-email folder and node_modules in that folder

[jinsley8]

I followed this:
https://github.com/resendlabs/react-email/tree/main/examples/resend

/transactional and /email folders would act like any other folder in your Next project. Link to these emails from your API routes.

Although for images I added them to my regular /public folder and pass my domain URL from my API route to the email components as a prop.

To view images in the React Email preview app, they also need to be in the /static folder.

// example of an img header component for emails
import { Img } from '@react-email/components';

interface HeaderProps {
    appDomain: string;
}

const Header = ({ appDomain }: HeaderProps) => {
    return (
        <>
            <Img
                src={
                    process.env.NODE_ENV == 'development'
                        ? '../static/email-header.png'
                        : `${appDomain}/email/email-header.png`
                }
                width="540"
                height="100"
                alt="Trade Your Horses email banner image"
            />
        </>
    );
};

export default Header;

I organized mt email folder like this:

[kirillmarkelov]

Can you confirm that your images working in prod? Because when I place images in public folder inside next.js project, they're got tree shaken on build step because they aren't imported anywhere in the project.

[kirillmarkelov]

Although for images I added them to my regular /public folder and pass my domain URL from my API route to the email components as a prop.

On top of that, files inside /public folder change their original filename at build step, e.g. logo.png will be become logo.3129cbf3.svg
There's no way to simply reference image by url if you just know it's original name.

I wonder how you made it work

[jinsley8]

@iamchubko I put images in /static within the /transactional folder which is in the project root folder.

transactional is all the code for react-email

[nimeshmaharjan1]

i dont get it so we dont need to deploy the .react-email but what about the react-email-starter folder it contains its own node_modules what am i supposed to do with that if i dont push it i get the error here
import {
Body,
Container,
Head,
Heading,
Html,
Img,
Link,
Preview,
Text,
} from '@react-email/components';

[jinsley8]

I had this in .gitignore inside the /transactional folder:

# React Email
.react-email
/node_modules

I believe that node_modules is just for the .react-email to run the local previewer. None of that is deployed.

So I have my project root with nextjs and the transactional folder which is basically a normal component and assets folder with the email components.

/ root
|--/ src
    |----/components
    |----/pages
    |----/types, etc
|--/ transactional
    |----/components
    |----/emails
    |----/static