{"id":27767,"date":"2022-03-24T19:50:34","date_gmt":"2022-03-24T19:50:34","guid":{"rendered":"http:\/\/handle-responsive-emails-with-images-in-mjml-in-nodejs"},"modified":"2025-04-16T12:52:22","modified_gmt":"2025-04-16T19:52:22","slug":"handle-responsive-emails-with-images-in-mjml-in-nodejs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-responsive-emails-with-images-in-mjml-in-nodejs\/","title":{"rendered":"Responsive emails with Images in MJML in Nodejs"},"content":{"rendered":"

Electronic Mail, popularly known as email, is an electronic means of exchanging messages between people. The content of an email can be texts, images, videos, links, e.t.c, which makes it tricky when building for different screen sizes and making it responsive.<\/p>\n

This post will discuss building a responsive email with images using MJML<\/a> and Node.js. At the end of this tutorial, we will learn how to configure Node.js to serve email templates, use a templating engine to pass in custom variables, and use MJML to build responsive email.<\/p>\n

MJML is a framework for building responsive email templates. It is responsive by default and does not require writing media queries to cater for different screen sizes. MJML uses an HTML-like semantic syntax as its building block that supports extensibility and code reuse. MJML also comes with an engine for transpiling MJML code into the desired format.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a CodeSan<\/a>d<\/a>box<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Github link here<\/a>.<\/p>\n

Prerequisites<\/h2>\n

The following steps in this post require JavaScript and Node.js experience. Experience with MJML isn\u2019t a requirement, but it\u2019s nice to have.<\/p>\n

Getting Started<\/h2>\n

We need to create a Node.js starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n

mkdir mail_temp && cd mail_temp && npm init -y\n<\/code><\/pre>\n
The command creates a  mail_temp<\/code> directory, navigates into the directory, and creates a Node.js project with a package.json<\/code> file, a JSON file for configuring and monitoring application installed dependencies.<\/p>\n
PS<\/strong>: -y<\/code> flag stands for yes, and it tells<\/em> npm<\/code> to generate an empty project without going through an interactive process.<\/em><\/p>\n
We proceed to install the required dependencies with:<\/p>\n
npm i mjml express eta\n<\/code><\/pre>\n
mjml<\/code> is a framework for creating responsive email<\/p>\n
express<\/code> is a Node.js framework for creating web and mobile applications.<\/p>\n
eta<\/code> is a JavaScript templating engine. It lets us include logic in our markup.<\/p>\n
Project structuring and setup<\/h2>\n
It is essential to have a good folder structure for our project. It makes it easier for us and others to read our codebase.\nTo do this, we need to create  src<\/code> and views<\/code> folder in our project directory.<\/p>\n
src<\/code> is a folder for structuring our email template.<\/p>\n
views<\/code> is a folder for structuring application views and generated outputs from MJML.<\/p>\n
Application Configuration<\/strong>\nNext, we need to setup up our project to transpile and run effectively on the browser. To do this, we need to modify the package.jon<\/code> file as shown below:<\/p>\n
{\n  \"name\"<\/span>: \"mail_temp\"<\/span>,\n  \"version\"<\/span>: \"1.0.0\"<\/span>,\n  \"description\"<\/span>: \"\"<\/span>,\n  \"main\"<\/span>: \"app.js\"<\/span>,\n  \"type\"<\/span>: \"module\"<\/span>, \n  \"scripts\"<\/span>: {\n     \"build\"<\/span>: \"mjml src\/template.mjml --output views\/output.eta\"<\/span>,\n     \"start\"<\/span>: \"npm run build && node app.js\"<\/span>\n   },\n  \"keywords\"<\/span>: [],\n  \"author\"<\/span>: \"\"<\/span>,\n  \"license\"<\/span>: \"ISC\"<\/span>,\n  \"dependencies\"<\/span>: {\n     \"eta\"<\/span>: \"^1.12.3\"<\/span>,\n     \"express\"<\/span>: \"^4.17.2\"<\/span>,\n     \"mjml\"<\/span>: \"^4.12.0\"<\/span>\n    }\n  }\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n
The snippet above does the following:<\/p>\n