To use preview on vscode when using remote development

make new directory called output and something like this (if using Twing like I am, then see below for install)

const Email = require('email-templates')
async function sendTestEmail () {
  const template = 'twig-test'
  const opts = {
    message: {
      from: 'Test <test@test.com>',
      to: 'Test <test@test.com>',
      bcc: 'Test <test@test.com>'
    },
    send: false,
    transport: { jsonTransport: true },
    views: { options: { extension: 'twig', map: { twig: 'twing' } } },
    preview: { id: 'testEmail', dir: 'output', open: false }
  }
  const locals = { headline: 'Headline', contents: '<p>So easy!</p>' }
  const email = new Email(opts)
  await email.send({ template, locals })
}
sendTestEmail () {

Now you'll have your email in the output directory.

Open VSCode and.... Install Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Open a tunnel https://code.visualstudio.com/docs/remote/ssh#_forwarding-a-port-creating-ssh-tunnel - in my case, 5500

Now in VSCode remote, right click on your shiny new testEmail.html file and select "Start Live Server", and then on your local machine, browse to (in my case) http://127.0.0.1:5500/ubuntu/scripts/email/output/testEmail.html

Now you can keep experimenting with layouts etc, and the view will always be live.

To install Twig

npm install tj/consolidate.js#master
cd node_modules/email-templates
npm install tj/consolidate.js#master

Make your template folder and files: twig-test/subject.twig Test email about {{headline}}

twig-test/html.twig

<doctype html>
    <head>
        <meta name='viewport' content='width=device-width'>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
        <title>{{headline}}</title>
        <style>body{background-color:#9493f9}h1,h2,h3,h4{border-bottom:1px solid #add8e6;font-weight:700;font-size:16px}main{background:#fff;border-style:solid;border-radius:3px;border-width:thin;font-size:16px;line-height:1.5;padding:5px;max-width:600px;margin:0 auto;text-align:left;mso-element-frame-width:600px;mso-element:para-border-div;mso-element-left:center;mso-element-wrap:no-wrap-beside}footer{font-size:12px;border-top:1px solid}</style>
    </head>
    <body>
        <main>
        <h1>{{headline}}</h1>
       {% autoescape false %}{{contents}}{% endautoescape %}
        <main>
        <footer>Footer</footer>
    </body>
</html>

Enjoy, and profit!

forwardemail / email-templates

Previewing on remote server using vscode, twing install tips etc #406

To use preview on vscode when using remote development

To install Twig