Manual Setup - React Email

1. Create directory

Create a new folder called react-email-starter and initialize a new npm project:

mkdir react-email-starter
cd react-email-starter
npm init

2. Install dependencies

Install the React Email package locally and a few components.

npm install react-email @react-email/button @react-email/html -E

3. Add scripts

Include the following script in your package.json file.

package.json

{
  "scripts": {
    "dev": "email dev"
  }
}

4. Include email template

Create a new folder called emails, create a file inside called index.tsx, and add the following code:

index.tsx

import { Button } from '@react-email/button';
import { Html } from '@react-email/html';
import * as React from 'react';

export default function Email() {
  return (
    <Html>
      <Button
        pX={20}
        pY={12}
        href="https://example.com"
        style={{ background: '#000', color: '#fff' }}
      >
        Click me
      </Button>
    </Html>
  );
}

5. Run locally

Start the development server.

npm run dev

6. See changes live

Visit localhost:3000 and edit the index.tsx file to see the changes.

​1. Create directory

​2. Install dependencies

​3. Add scripts

​4. Include email template

​5. Run locally

​6. See changes live