GithubHelp home page GithubHelp logo

webtretech / nestjs-mailer-react-adapter Goto Github PK

View Code? Open in Web Editor NEW
31.0 3.0 3.0 53 KB

๐Ÿ“จ Build and send emails in Nest framework using React.js

Home Page: https://www.npmjs.com/package/@webtre/nestjs-mailer-react-adapter

License: MIT License

TypeScript 100.00%
email-template mailer nestjs nestjs-mailer nodejs nodemailer reactjs nest react typescript

nestjs-mailer-react-adapter's Introduction

Nest Logo

๐Ÿ“จ Build and send emails in Nest framework using React.js

NPM Version Package License NPM Downloads

Features

  • โšก๏ธ Write your email templates in React and TypeScript

  • โ›” No more template not found / sending blank emails.

  • โ›” No more missing context / variables from template.

  • ๐Ÿฆพ Write testable templates intended for email clients.

  • ๐Ÿ’Œ Built on top of react-email โ€” the next generation of writing emails.

Installation

This library is an adapter for the @nestjs-modules/mailer module, so we'll install the dependencies alongside by running the command below.

npm i @webtre/nestjs-mailer-react-adapter @nestjs-modules/mailer nodemailer

Getting Started

To add support for React to your project, modify tsconfig.json

{
  "compilerOptions": {
    // add this line
    "jsx": "react-jsx"
  }
}

Configuration

// src/app.module.ts
import { Module } from "@nestjs/common";
import { MailerModule } from "@nestjs-modules/mailer";
import { ReactAdapter } from "@webtre/nestjs-mailer-react-adapter";

@Module({
  imports: [
    MailerModule.forRoot({
      transport: {
        host: "smtp.domain.com",
        port: 2525,
        secure: false,
        auth: {
          user: "[email protected]",
          pass: "password",
        },
      },
      defaults: {
        from: '"Webtre Technologies" <[email protected]>',
      },
      template: {
        dir: __dirname + "/templates",
        // Use the adapter
        adapter: new ReactAdapter(),

        // Or with optional config
        adapter: new ReactAdapter({
          pretty: false,
          plainText: true,
        }),
      },
    }),
  ],
})
export class AppModule {}

Service Provider

import { Injectable } from '@nestjs/common';
import { MailerService } from '@nestjs-modules/mailer';

@Injectable()
export class ExampleService {
  constructor(private readonly mailerService: MailerService) {}

  async public example(): void {
    await this.mailerService
      .sendMail({
        to: '[email protected]',
        subject: 'Testing react template',
        template: 'welcome', // The compiled extension is appended automatically.
        context: { // Data to be passed as props to your template.
          code: '123456',
          name: 'John Doe',
        },
      });
  }
}

React Template

// src/templates/welcome.tsx
interface Props {
  code: string;
  name: string;
}

export default function Welcome({ name, code }: Props) {
  return (
    <div>
      Hi {name}, thanks for signing up. Your code is {code}
    </div>
  );
}

Credits

License

MIT License ยฉ 2022 Webtre Technologies

nestjs-mailer-react-adapter's People

Contributors

bighoho123 avatar darkphoenix2704 avatar kodjunkie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

nestjs-mailer-react-adapter's Issues

How to preview email templates

Hey, nice package! I have successfully integrated this package into my project, but I'm wondering how would be the recommended workflow for previewing my templates with hot-reloading.

Thanks in advance ! :D

Support windows runtime

When running Nestjs in a Windows environment, the template could not be loaded properly.

Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

I'll submit an PR shortly.

Documentation improvements to be more clear

Hi, thanks a lot for the initiative of open sourcing this adapter, it has given me a direction on how integrate the React Email with NestJS.

But i had some issues on how setup this at first.

Here some points i think the instructions should be improved. In my case i configured the templates directory at src/emails/templates, containing the tsx files with react email templates.

A base point i have done were to setup swc builder with swc-loader and updating the test rules with test: /\.(tsx|ts|js|cjs|mjs)$/, at webpack.config.js

import { swcDefaultsFactory } from '@nestjs/cli/lib/compiler/defaults/swc-defaults';

const swcDefaultConfig = swcDefaultsFactory().swcOptions;

export const module = {
  rules: [
    {
      test: /\.(tsx|ts|js|cjs|mjs)$/,
      exclude: /node_modules/,
      use: {
        loader: 'swc-loader',
        options: swcDefaultConfig,
      },
    },
  ],
};

Also, i had to setup a .swcrc file, updating the sample with tsx=true

{
  "$schema": "https://json.schemastore.org/swcrc",
  "sourceMaps": true,  
  "module": {
    "type": "commonjs"
  },
  "jsc": {
    "target": "es2022",
    "parser": {
      "syntax": "typescript",
      "decorators": true,
      "dynamicImport": true,
      "tsx": true  
    },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true      
    },
    "keepClassNames": true,
  },
  "minify": true
}

Also, is important to have jsx set as preserve on tsconfig.json.

Also, is import some scripts configured on package.json for the developmen of the templates.

"emails:dev": "email dev --dir src/emails/templates --port 5000",
"emails:export": "email export --dir src/emails/templates --outDir dist/emails/templates"

With this setup, is even not necessary run yarn emails:export, each time the server hot reloads on development mode, the templates are updated on dist/emails/templates.

By end, i had to do 2 updates on your adapter implementation:

image

  1. With a console log, i noticed that this generic import were receiving a undefined, i updated from tmpl.default.default to tmpl.default
  2. Looking at the docs, as this is a NodeJS backend project, i updated from JSX Tag notation to function call, to avoid some errors..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.