Introducing nest-mailman 🎉🎉

Sparsh — Mon, 26 Oct 2020 13:58:05 +0000

Hello folks! We are super excited to release the first version of nest-mailman. Mailman allows you to send mails from your NestJS applications with breeze. This blog post provides a simple overview of the package, complete documentation is available at nest-mailman.

A little background

Over the last couple of months, we at squareboat have gotten into the realms of NestJS.

Let's accept this that Node.js projects with its level of flexibility can easily go off hand. After months of hustling to get the right Node.js project structure, we stumbled upon NestJS and haven't looked back since.

Our motivation with nest-mailman and other nest packages that we have been working on is to provide utility packages that will solve most of your application use cases.

Enough talk show me the code!

Installation

To get up and running with mailman run:

npm i @squareboat/nest-mailman --save

Usage

We start by importing MailmanModule and registering it with configuration options. For the sake of this article, we will be using the register construct to register our module statically, although the recommended approach is to provide the config options via registerAsync. For a detailed description visit https://opensource.squareboat.com/nest-mailman/docs/send-mail.

import { MailmanModule } from '@squareboat/nest-mailman';

@Module({
  imports: [
    MailmanModule.register({
      host: 'smtp.mailtrap.io',
      port: 2525,
      username: 'c88XXXXXXXXX',
      password: 'sdsXXXXXXXXX',
      from: 'hello@mailman.com',
      path: 'path/to/mail/templates'
    }),
  ],
})
export class TestModule {}

Going along the lines of SOLID principles that NestJS highly emphasizes on, Mailman comes with 2 important APIs - MailMessage and Mailman

MailMessage is responsible for building mails whereas Mailman does the work of a transporter (just like how mailmen work in real life, they don't write mails for us, they only take them to the ones intended).
Mailman accepts an instance of MailMessage and will transport the mails to the specified recipients.

// test.service.ts
import { MailMessage } from '@squareboat/nest-mailman';

@Injectable()
export class TestmailService {
  triggerMail() {

    // Building mail message
    const mailMessage = MailMessage.init();
    mailMessage
      .subject('Order Received')
      .view('orderReceived', { productName: 'XYZ', productId: 123 }); // will look for orderReceived.hbs

    // Sending the constructed mail
    Mailman
      .init()
      .to('receiver@gmail.com')
      .send(mailMessage);
    return 'Done';
  }
}

Mailman is configured by default for handlebar templates and will append .hbs to all the template file names.

Bonus

We understand that writing a template for every mail that your application rolls out is an absolute chore that developers despise, and that's why mailman ships with a very simple generic mail builder API that makes building emails as simple as invoking a function.

triggerMail(){
  const mailMessage = MailMessage.init();

  mailMessage
    .subject('Testing 2')
    .greeting('Hello Sarah,')
    .line("You've received a new enquiry")
    .line('Summary: The product looks promising! would love to setup a call to discuss more')
    .action('View Enquiry', 'https://app.test.in/admin/queries/123');
// ... and you can call line(), action() methods any number of times to build your mail
}

And bam🌟 our mail is ready.

For a complete overview about nest-mailman visit (https://opensource.squareboat.com/nest-mailman/)

And this is our shot at giving back to the community. Head over to our site to know more about the available packages. We are looking for feedback, criticism, and of course contributions. See you!

Downloading remote images as a zip file using JSZip

Sparsh — Sun, 15 Dec 2019 10:54:09 +0000

Imagine this scenario where there is a gallery of images showing up on your website and you want the user to be able to select multiple images and download them as a zip file. How would you go about implementing it?

Firstly, we will have to fetch the images that are to be downloaded. We will be using browsers Fetch API to achieve that. Simple Enough?



const imageUrl = 'https://images.unsplash.com/photo-1576328842079-95ef7deedc89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80.jpg';

// Fetch the image and parse the response stream as a blob
const imageBlob = fetch(imageUrl).then(response => response.blob());

// create a new file from the blob object
const imageFile = new File([imageBlob], "filename.jpg");

Everything goes great until you stumble upon this CORS error.

To solve this you need to change the s3 bucket CORS settings. Add this to the CORS Configuration file.



 <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Alright! going back to creating the zip file. We are going to use a npm package called JSZip which will be responsible for generating a zip, and another one called file Saver that will trigger the download file for us.



import JSZip from "jszip";
import { saveAs } from 'file-saver';

/* Create a new instance of JSZip and a folder named 'collection' where*/
/* we will be adding all of our files*/
let zip = new JSZip();
let folder = zip.folder('collection');

/* Add the image to the folder */
folder.file(`${name}.jpg`, fileImg);

/* Generate a zip file asynchronously and trigger the download */
folder.generateAsync({ type: "blob" }).then(content => saveAs(content, "files"));