Redwood Mailer functionality docs

Get Help and Help Others
1

Hey there,

I see in redwood studio there are some new mailer tools. Is there any documentation on how to use this functionality?

Thanks

2

Hi. Both documentation and setup command/instructions are coming soon: feat(cli): Setup command for mailer by Josh-Walker-GM Ā· Pull Request #9335 Ā· redwoodjs/redwood Ā· GitHub

We wanted to finalize the implementation before publishing documentation as the use on the api side is getting refined.

1 Like
3

Yeah sorry about the lack of documentation at the moment. Itā€™s now my current priority so Iā€™ll get them out soon

4

No need to apologise. I am excited to see the result.

1 Like
5

After setting up mailer with the command, my emails all complain about Cannot use JSX unless the '--jsx' flag is provided.

They also donā€™t get found by redwood studio, unsure, if thatā€™s connected.

I also tried it with just running yarn rw setup mailer and then yarn rw exp studio on top of my project, the created Example mail also doesnā€™t show up in studio.

1 Like
6

Hi all,

We now have mailer docs available on the main docs site. Specifically under the ā€˜referenceā€™ section here: Mailer | RedwoodJS Docs

@razzeee - Thanks for trying out the mailer! The first thing that comes to mind is a change we made (9133) to the jsconfig.json/tsconfig.json which we may not have codemodā€™ed for. Inside of compilerOptions we added "jsx": "react-jsx" is this something you have or could try adding?

7

yeah, that codemod seems to be missing (I should have known). Kinda wondering, if I will also need it in the script folder, as I will be sending emails from a worker.

Also is there a better way to have some default preview input values, for the email? I do like the way react-email does it in their projects. See here for e.g. Start an email service by razzeee Ā· Pull Request #2514 Ā· flathub-infra/website Ā· GitHub

8

I also seem to get "Text is not defined" when trying to stack layouts. But itā€™s imported everywhere. Not sure why, might be due to the format used by redwood, or should I have my base template outside of the mail folder?

9

Also is there a better way to have some default preview input values, for the email?

Is this for the studio template preview props input?

Script folder & ā€œText is not definedā€

I have to admit I donā€™t have much experience using scripts in redwood projects beyond the basic seed that we ship with by default.

Iā€™d likely need to poke around at a reproduction to help with the ā€œText is not definedā€ error as nothing comes to mind straight away. The intention would be for us not to add anything magic about the layouts and that we let you do things as normal - so if thereā€™s a bug here thatā€™s great to iron out.

10

Yes, itā€™s kind of annoying, to have to fill that out each time to get a usable preview

Yeah, not surprised, in general, that part of the codebase seems like one of the places, that getā€™s less love :slight_smile:
Our old email setup was using a worker to send emails, to get get the benefits of keeping it out of the main app, resheduling and backoff in case the email server is down etc.

I kinda feel stuck, but I give it some more minutes - in general, the error display could maybe give some more info, there likely is a stacktrace somewhere? I had to comment out one file to figure out in which one it fails.

mail/Base.tsx

import React from 'react'

import {
  Html,
  Body,
  Head,
  Tailwind,
  Preview,
  Container,
  Text,
} from '@react-email/components'

export function Base({
  children,
  preview,
  username,
}: {
  children: React.ReactNode
  preview: string
  username: string
}) {
  return (
    <Html lang="en">
      <Head />
      <Preview>{preview}</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 p-[20px]">
            <Text>Hi {username.split(' ')[0]}</Text>

            {children}

            <Text>Cheers</Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

Then that gets used by mail/UserImageInternalAuditEmail/UserImageInternalAuditEmail.tsx

import React from 'react'

import { Hr, Heading, Text } from '@react-email/components'

import { Base } from '../Base'

export function UserImageInternalAuditEmail({
  preview,
  username,
}: {
  preview: string
  username: string
}) {
  return (
    <Base preview={preview} username={username}>
      <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
        Example Email
      </Heading>
      <Text className="text-[14px] leading-[24px] text-black">
        This is an example email which you can customise to your needs.
      </Text>
      <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
      <Text className="text-[12px] leading-[24px] text-[#666666]"></Text>
    </Base>
  )
}

I can preview the Base template fine. The 2nd one wonā€™t preview.

1 Like
11

Good point about the props! Iā€™ve added it as an issue to the studio repository and we can hopefully have an enhancement that makes the template previews easier to work with.

The scripts are something we feel we should get back to thinking more about the fundamental design of that feature. I am not yet sure how scripts might evolve as the BigHorn epoch rolls out. I agree that sending emails out of band is a totally sensible pattern that we should aim to make easy for users.

I have never tested the template previewing feature with a mail layout like that. Iā€™ll add it as something I have to do. My gut reaction is that we might not be handling the relative import too well when we dynamically import and execute the template.

12

Okay Iā€™ve tried to get to a repro repo and it works with a new project - so thereā€™s probably some setup missing.

Some observations:

  • jsx is set for a new project
  • I needed to install nodemailer or else studio wouldnā€™t start
  • I seem to have to actually run/restart yarn rw dev for templates to get recognized at some points - might be good to point at that in the docs
2 Likes
13

Okay it seems to work now, guess I havenā€™t had a dev server running in the background and thought running the studio by itself was fine

2 Likes
14

Coming back to the Previews and not being sure how you can support them, I do think the pattern you can use in react-email for example pages (kinda storybook style) is nice Start an email service by razzeee Ā· Pull Request #2514 Ā· flathub-infra/website Ā· GitHub

1 Like