title: Passing variable from app.js to handlebars template
body: <p>So I am creating a quote request contact form on a website and I need to make a confirmation or error message pop up under the form after it has been submitted. The issue I am faced with is how can I set a variable on the express side based on whether there was an error or not with the email sending and then use that variable within my handlebars template in order to display the proper message. I'm thinking I would use a helper to achieve this but I keep hitting a wall on attempting it. The logic should begin withing the transporter.sendMail as that is where the error will be determined. I put comments in to help identify.
  Here is the backend of my contact form:</p>
  <pre><code>    // ==== Contact Form ====
  //Create Mailer options
  const options = {
      viewEngine: {
          extname: '.hbs',
          layoutsDir: __dirname + '/views/email/',
          defaultLayout: 'template',
          partialsDir: 'views/partials/'
      },
      viewPath: 'views/email/',
      extName: '.hbs'
  };
  // Create Transporter
  const transporter = nodemailer.createTransport({
      host: 'smtp-mail.outlook.com',
      port: 587,
      auth: {
          user: process.env.USER,
          pass: process.env.PASS
      }
  });
  
  // verify connection configuration
  transporter.verify(function(error, success) {
      if (error) {
          console.log('Error with transporter verification:' + `\n${error}`);
      }
  });
  
  //attach the plugin to the nodemailer transporter
  transporter.use('compile', hbs(options));
  
  app.post('/send', (req, res) =&gt; {
      // Accepts the form data submitted and parse it
      let form = new multiparty.Form();
      let data = {};
      form.parse(req, function(err, fields) {
          Object.keys(fields).forEach(function(property) {
              data[property] = fields[property].toString();
          });
          // Create Mail object with options
          const mail = {
              from: `&quot;********&quot; &lt;${process.env.USER}&gt;`,
              to: '************', // receiver email,
              subject: 'Quote Request',
              template: 'email.body',
              // Import variables into email for use with handlebars
              context: {
                  name: data.name,
                  email: data.email,
                  number: data.number,
                  message: data.message
              }
          };
          // Send email
          transporter.sendMail(mail, (err, data) =&gt; {
              if (err) {
                  console.log(err);
                  // if error return mailError = true;
              }
              else {
                  console.log('Email successfully sent to recipient!');
                  // if sent return mailSent = true;
              }
          });
      });
  });
  </code></pre>
  <p>Here is my script.js:</p>
  <pre><code>    // Contact Form Client Functions
  //get the form by its id
  const form = document.getElementById('contact-form');
  //add event listener (when clicking the submit button, do the following)
  const formEvent = form.addEventListener('submit', (event) =&gt; {
      // Prevent page from refreshing when submit button clicked
      event.preventDefault();
  
      //parse data to formData variable
      let mail = new FormData(form);
      //send mail
      sendMail(mail);
      // Determine if sendMail returned an error or not
      console.log(typeof mailError);
      // reset form feilds to empty
      form.reset();
  });
  const sendMail = (mail) =&gt; {
      console.log('step 1');
      fetch('/send', {
          method: 'post',
          body: mail
      }).then((response) =&gt; {
          return response.json();
      });
  };
  </code></pre>
  <p>and here is the section within my template.hbs file that I need dynamically updated:</p>
  <pre><code>&lt;div&gt;
      {{#if mailSent}}
      &lt;h4 style=&quot;color: lightgreen&quot;&gt;Your message has been sent successfully!&lt;/h4&gt;
      {{else if mailError}}
      &lt;h4 style=&quot;color: red&quot;&gt;ERROR: There was an issue sending your message, please
          try again.&lt;/h4&gt;
      {{/if}}
  &lt;/div&gt;
  </code></pre>