Giter Club home page Giter Club logo

forwardemail / test-preview-emails-cross-browsers-ios-simulator-nodejs-javascript Goto Github PK

View Code? Open in Web Editor NEW
204.0 4.0 20.0 1.44 MB

Automatically opens your browser and iOS Simulator to preview Node.js email messages sent with Nodemailer. Made for @forwardemail and @ladjs. Cross-browser and cross-platform email testing.

Home Page: https://forwardemail.net/docs/test-preview-email-rendering-browsers-ios-simulator

License: MIT License

JavaScript 71.49% Pug 27.44% Shell 1.07%
preview email letter opener previewer emails node pug render demo

test-preview-emails-cross-browsers-ios-simulator-nodejs-javascript's Introduction

preview-email

build status code style styled with prettier made with lass license

Automatically opens your browser and iOS Simulator to preview Node.js email messages sent with Nodemailer. Made for Forward Email and Lad. Cross-platform and cross-browser email testing.

Need to send emails that land in the inbox instead of spam folder? Click here to learn how to send JavaScript contact forms and more with Node.js

Table of Contents

Screenshots

iOS Simulator

macOS Notification Screenshot
iOS Simulator Screenshot

Browser

Browser Screenshot

Install

npm:

npm install preview-email

Requirements

As of v3.0.6 we have built-in support for previewing emails in the iOS Simulator (in addition to rendering them in your default web browser).

This is only applicable if you are using macOS and if not running in a CI environment. If you wish to disable this default behavior, then set openSimulator to false in the options.

Otherwise you will need to install XCode from the App Store or Apple Developer Website. We have built-in friendly macOS notifications that will alert you if there are any issues while attempting to load the iOS Simulator.

After installing XCode, you will need to open it and agree to the terms and conditions. Then you will need to assign Command Line Tools.

Once the Simulator is opened – if you need to inspect the rendered email, then you can use the Web Inspector in Safari Developer Tools.

Usage

NOTE: You should probably just use email-templates directly instead of using this package.

The function previewEmail accepts two arguments message and options, and it returns a Promise which resolves with a URL (unless you specify returnHTML: true in options argument). We automatically open the browser to this URL unless you specify options.open as false (see Options for more info).

const previewEmail = require('preview-email');
const nodemailer = require('nodemailer');

const transport = nodemailer.createTransport({
  jsonTransport: true
});

// <https://nodemailer.com/message/>
const message = {
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Hello world',
  html: '<p>Hello world</p>',
  text: 'Hello world',
  attachments: [{ filename: 'hello-world.txt', content: 'Hello world' }]
};

// note that `attachments` will not be parsed unless you use
// `previewEmail` with the results of `transport.sendMail`
// e.g. `previewEmail(JSON.parse(res.message));` where `res`
// is `const res = await transport.sendMail(message);`
previewEmail(message).then(console.log).catch(console.error);

transport.sendMail(message).then(console.log).catch(console.error);

Custom Preview Template and Stylesheets

Using the options.template object, you can define your own template for rendering (e.g. get inspiration from template.pug and write your own!):

const path = require('path');

// ...

previewEmail(message, {
  template: path.join(__dirname, 'my-custom-preview-template.pug')
})
  .then(console.log)
  .catch(console.error);

Debugging

You can easily debug output from preview-email:

NODE_DEBUG=preview-email node app.js

Options

  • message (Object) - a Nodemailer message configuration object
  • options (Object) - an object with the following two properties:
    • id (String) - a unique ID for the file name created for the preview in dir (defaults to uuid.v4() from uuid)
    • dir (String) - a path to a directory for saving the generated email previews (defaults to os.tmpdir(), see os docs for more insight)
    • open (Object or Boolean) - an options object that is passed to open (defaults to { wait: false }) - if set to false then it will not open the email automatically in the browser using open, and if set to true then it will default to { wait: false }
    • template (String) - a file path to a pug template file (defaults to preview-email's template.pug by default) - this is where you can pass a custom template for rendering email previews, e.g. your own stylesheet
    • urlTransform (Function (path) => url) - a function to build preview url from file path (defaults to (path) => 'file://[file path]') - this is where you can customize the opened path to handle WSL to Windows transformation or build a http url if dir is served.
    • openSimulator (Boolean) - whether or not to open the iOS Simulator with the preview url file path (defaults to true via process.env.NODE_ENV !== 'test' and will only run if macOS detected and not in a CI environment)
    • simpleParser (Object) - an options Object to pass to mailparser's simpleParser method (see mailparser docs for available options – note that Iconv option is always overridden for safeguard)
    • returnHTML (Boolean) - whether or not to return HTML only – and subsequently not write nor open the file preview file (defaults to false)
    • hasDownloadOriginalButton (Boolean) - whether or not to render a "Download Original" button to download via base64 inline onclick JavaScript (defaults to true)

License

MIT © Forward Email

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.