Mailing
The mailing
package helps you sending emails in your app.
Install Mailing package
- npm
- Yarn
npm install @orion-js/mailing
yarn add @orion-js/mailing
Configuration
The configuration of mailing
is done by setting the following environment variables:
MAIL_URL
: You must pass a valid SMTP url. If you don't pass any, all mails sent will be logged in the console.- Note 1: The smtp url format looks like:
smtp://<user>:<password>@<smtp-server-url>:<port>
- Note 2: If your
username / API Key
orpassword
include characters like/
or\
or any other invalid url character, as in Amazon Web Services Simple Email Service, you must encode them to be valid. You can use tools like urlencoder to encode yourusername
andpassword
.
- Note 1: The smtp url format looks like:
MAIL_FROM
: A valid from address. You can also pass thefrom
option when callingsendEmail
.
Example .env
.env
...
MAIL_URL="smtp://<user>:<password>@<smtp-server-url>:<port>"
MAIL_FROM="example@domain.com"
...
Sending emails
Plain text
To send a email you must call the sendEmail
function.
import {sendEmail} from '@orion-js/mailing'
await sendEmail({
to: await user.email(),
subject: 'Verify your email',
text: `Hi, please verify your email by going to the following site: ${url}`
})
All options will be passed to nodemailer sendMail
function.
HTML
Alternatively, in addition to sending text you can also send HTML.
import {sendEmail} from '@orion-js/mailing'
await sendEmail({
to: await user.email(),
subject: 'Welcome',
text: null,
html: getHTML()
})
Example using ReactDomServer
In this example, importHTML()
will use renderToString
to render the Template
React element into an HTML string:
index.js
import {sendEmail} from '@orion-js/mailing'
await sendEmail({
to: await user.email(),
subject: 'Welcome',
text: null,
html: await importHTML(user.nickName)
})
importHTML.js
import {renderToString} from 'react-dom/server'
import Template from './Template'
export default function (nickName) {
const bodyToInsert = renderToString(<Template>{nickName}</Template>)
return `<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
${bodyToInsert}
</body>
</html>`
}
Template.js
import React from 'react'
import PropTypes from 'prop-types'
export default class Template extends React.Component {
static propTypes = {
nickName: PropTypes.string
}
render() {
return (
<div>
<div style={{padding: '20px', backgroundColor: '#111'}}>
<div
style={{padding: '20px', maxWidth: '600px', backgroundColor: '#fff', margin: '0 auto'}}>
Greetings, {this.props.nickName}!
</div>
</div>
<div style={{margin: '0 auto', textAlign: 'center', padding: '20px'}}>
<p>
<a>Comments</a>
<a>Contact</a>
</p>
</div>
</div>
)
}
}