webtretech / nestjs-mailer-react-adapter

📨 Build and send emails in Nest framework using React.js
https://www.npmjs.com/package/@webtre/nestjs-mailer-react-adapter
MIT License
34 stars 3 forks source link

Documentation improvements to be more clear #39

Closed yangricardo closed 11 months ago

yangricardo commented 1 year ago

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..
kodjunkie commented 12 months ago

Hi @yangricardo, you can give the latest release a try. Also, the documentation is fine and you don't need any extra setup.