Trying to get live previews out of handlebars and mjml when paired together

Question

I've created a file that marries handlebar templating to the MJML framework. My issue is I'm not quite sure how preview the live output as I make changes.

I would like to either: • run a script that will fs.writeFile every-time there is a change to my index.js file and then live serves it • or preview the main index file directly w/o the fs options

Any guidance would be GREATLY appreciated.

PACKAGE FILE

{
  "name": "g_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "",
    "server": "",
    "dev": "",
    "build": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^6.3.0",
    "handlebars": "^4.7.7",
    "live-server": "^1.2.1",
    "mjml": "^4.10.3"
  },
  "dependencies": {}
}

INDEX FILE

// SET  "type": "module", in PACKAGE FILE TO USE IMPORT
import mjml2html from 'mjml'
import Handlebars from 'handlebars'
import fs from 'fs'

// PUT DUMMY CONTENT HERE
const context = {
    fullName: 'Bob Wiley',
    message: 'How are you feeling?',
    logo: 'https://picsum.photos/300/100',
  }

//   MJML GOES HERE
const template = Handlebars.compile(`
<mjml>
<mj-head>
<mj-title>Little MJML/Handlebars App</mj-title>
<mj-preview>Preview text trick&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</mj-preview>
</mj-head>
<mj-body>
    <mj-section background-color="#FF5733" padding-bottom="0">
        <mj-column  paddin"10px" width="70%">
            <mj-text font-style="italic" font-size="18px" color="#FFFC33">Little MJML/Handlebars App</mj-text>
        </mj-column>
        <mj-column width="30%">
            <mj-image width="60px" src={{logo}} />
        </mj-column>
    </mj-section>
    <mj-section background-color="#FAFAFA">
        <mj-column padding="30px">
            <mj-text font-style="italic" font-size="15px" font-family="Helvetica Neue" color="#626262">
            Hello {{fullName}},
            </mj-text>
            <mj-text color="#525252">{{message}}
            </mj-text>
        </mj-column>
    </mj-section>
    <mj-section background-color="#FAFAFA">
    <mj-column padding="30px">
        </mj-text>
        <mj-text color="#525252">
            {{#if activeUser}}
                Hi active user!
            {{else}}
                Hi inactive user
            {{/if}}
        </mj-text>
    </mj-column>
</mj-section>
</mj-body>
</mjml>
`)

// COMPILING
const mjml = template(context)
const {html} = mjml2html(mjml)
// console.log(html)

// WRITING TO OUTPUT FOLDER
fs.writeFile('./output/new.html', html.toString(), { encoding: 'utf8' }, function (err) {
  if (err) {
    return console.log(err)
  }
  console.log('The file was saved to the output folder')
})

// TEST FS WATCH
// setTimeout(
//     () => fs.writeFileSync("index.js", 
//     fs.writeFile('./output/new.html', html.toString(), { encoding: 'utf8' }, function (err) {
//         if (err) {
//           return console.log(err)
//         }
//         console.log('The file was saved to the output folder')
//       })
//     ), 3000
//   );

score 0 · Answer 1 · answered Nov 01 '21 at 19:08

If you happen to use one of the JetBrains IDEs,

You could probably accomplish this with their File Watcher. It does exactly what you seek--if any one file or any file described as part of a group changes (say, *.mjml), it runs a script. Written correctly, the script results in HTML sent to an external browser window handled by Live Edit, part of JetBrains. There's an example of the JetBrains part, except for the Handlebars part, at https://github.com/mjmlio/mjml/issues/53#issuecomment-719887303
The JetBrains plugin "MJML Support" does exactly this internal to the IDE, except the Handlebars support.

Maybe other IDEs have similar.

Perhaps instead of using the JetBrains Live Edit, you could use a browser add-in offering a live browser.

You could write JavaScript to do exactly what you need. NPM has packages that watch for changes to files. Please consider supporting your finished code as an NPM package. I'm confident other Handlebars/MJML users are interested. Possibly, the MJML team would be willing to list your package in their documentation; they get lots of questions about this.

BTW: In addition to StackOverflow, a great source of MJML support is https://mjml.slack.com/ You probably would have gotten a more prompt response there than this one. (Sorry!)

Trying to get live previews out of handlebars and mjml when paired together

1 Answers1