Snoopy
Reputation: 1357
Import HTML file in Node.JS and pass variable into it
I am creating an email system and I send an activation code to the users. To define the msg object to be sent to the user it has to follow this structure:
const msg = {
to: req.body.email,
from: "[email protected]",
subject: "Welcome to the Empire!",
text: `Here is your access code! Shh, don't tell anyone - ${randomNum}`,
html: CodeActivation <---
};
For the CodeActivation HTML file I would like to pass randomNum into it which means I would need to actually import this file into Javascript to accept a variable then return the HTML (I've included the HTML file below).
This presents another obstacle, I have a length HTML file that I can't simply just wrap into a string.
Any suggestions would be awesome! Thank you for your time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&display=swap" rel="stylesheet" />
<!--<![endif]-->
<title>Email Template</title>
<!--[if gte mso 9]>
<style type="text/css" media="all">
sup { font-size: 100% !important; }
</style>
<![endif]-->
<!-- body, html, table, thead, tbody, tr, td, div, a, span { font-family: Arial, sans-serif !important; } -->
<style type="text/css" media="screen">
body { padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none }
a { color:#0047ab; text-decoration:none }
p { padding:0 !important; margin:0 !important }
img { margin: 0 !important; -ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */ }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.btn-16 a { display: block; padding: 15px 35px; text-decoration: none; }
.btn-20 a { display: block; padding: 15px 35px; text-decoration: none; }
.l-white a { color: #ffffff; }
.l-black a { color: #282828; }
.l-pink a { color: #0047ab; }
.l-grey a { color: #6e6e6e; }
.l-purple a { color: #9128df; }
.gradient { background: linear-gradient(to right, #388BFF 0%,#0047ab 100%); }
.btn-secondary { border-radius: 10px; background: linear-gradient(to right, #9028df 0%,#0047ab 100%); }
.cke_editable,
.cke_editable a,
.cke_editable span,
.cke_editable a span { color: #282828 !important; }
.tpl-content { padding: 0 !important; }
.mcnPreviewText { display: none !important; }
/* Mobile styles */
@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
.mpx-10 { padding-left: 10px !important; padding-right: 10px !important; }
.mpx-15 { padding-left: 15px !important; padding-right: 15px !important; }
u + .body .gwfw { width:100% !important; width:100vw !important; }
.td,
.m-shell { width: 100% !important; min-width: 100% !important; }
.mt-left { text-align: left !important; }
.mt-center { text-align: center !important; }
.mt-right { text-align: right !important; }
.me-left { margin-right: auto !important; }
.me-center { margin: 0 auto !important; }
.me-right { margin-left: auto !important; }
.mh-auto { height: auto !important; }
.mw-auto { width: auto !important; }
.fluid-img img { width: 100% !important; max-width: 100% !important; height: auto !important; }
.column,
.column-top,
.column-dir-top { float: left !important; width: 100% !important; display: block !important; }
.m-hide { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; }
.m-block { display: block !important; }
.mw-15 { width: 15px !important; }
.mw-2p { width: 2% !important; }
.mw-32p { width: 32% !important; }
.mw-49p { width: 49% !important; }
.mw-50p { width: 50% !important; }
.mw-100p { width: 100% !important; }
.mmt-0 { margin-top: 0 !important; }
}
/**
* @tab Page
* @section Body Background
* @tip Set the styling for email background.
* @style Body Background
*/
.background-body {
/*@editable*/ background-color: #f2f5f7;
}
/**
* @tab Page
* @section Footer Background
* @tip Set the styling for Footer background.
* @style Footer Background
*/
.background-footer {
/*@editable*/ background-color: #0047ab;
}
/**
* @tab Page
* @section Link Color
* @tip Set the styling for link color.
* @style Link Color
*/
a {
/*@editable*/ color: #0047ab;
}
/**
* @tab Page
* @section Button Background
* @tip Set the styling for Buttons background.
* @style Button Background
*/
.btn-16 {
/*@editable*/ background-color: #0047ab;
}
</style>
</head>
<body class="body" style="padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none;">
<center>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;" bgcolor="#f2f5f7" class="gwfw">
<tr>
<td style="margin: 0; padding: 0; width: 100%; height: 100%;" align="center" valign="top">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="m-shell">
<tr>
<td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="mpx-10">
<!-- Top -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-12 c-grey l-grey a-right py-20" style="font-size:12px; line-height:16px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; color:#6e6e6e; text-align:right; padding-top: 20px; padding-bottom: 20px;">
<a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="text-decoration:none; color:#6e6e6e;">View this email in your browser</span></a>
</td>
</tr>
</table> <!-- END Top -->
<!-- Container -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="gradient pt-10" style="border-radius: 10px 10px 0 0; padding-top: 10px;" bgcolor="#f3189e">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-radius: 10px 10px 0 0;" bgcolor="#ffffff">
<!-- Logo -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img-center p-30 px-15" style="font-size:0pt; line-height:0pt; text-align:center; padding: 30px; padding-left: 15px; padding-right: 15px;">
<a href="#" target="_blank"><img src="../HTML/img/[email protected]" width="112" height="43" mc:edit="image_1" style="max-width:112px;" border="0" alt="" /></a>
</td>
</tr>
</table>
<!-- Logo -->
<!-- Main -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="px-50 mpx-15" style="padding-left: 50px; padding-right: 50px;">
<!-- Section - Intro -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="pb-50" style="padding-bottom: 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="fluid-img img-center pb-50" style="font-size:0pt; line-height:0pt; text-align:center; padding-bottom: 50px;">
<img src="https://www.psd2newsletters.com/templates/purple/images/img_intro_5.png" width="264" height="300" border="0" alt="" />
</td>
</tr>
<tr>
<td class="title-36 a-center pb-15" style="font-size:36px; line-height:40px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-bottom: 15px;">
<strong>Access Code</strong>
</td>
</tr>
<tr>
<td class="text-16 lh-26 a-center pb-25" style="font-size:16px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 26px; text-align:center; padding-bottom: 25px;">
Click on the button below to activate code, this is your requested account key code to log in with your email address ([email protected])
</td>
</tr>
<tr>
<td class="pb-30" style="padding-bottom: 30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title-22 a-center py-20 px-50 mpx-15" style="border-radius: 10px; border: 1px dashed #b4b4d4; font-size:22px; line-height:26px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-top: 20px; padding-bottom: 20px; padding-left: 50px; padding-right: 50px;" bgcolor="#f2f5f7">
<strong>CODE : <span class="c-purple" style="color:#9128df;">PURPLE123</span></strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<!-- Button -->
<table border="0" cellspacing="0" cellpadding="0" style="min-width: 200px;">
<tr>
<td class="btn-16 c-white l-white" bgcolor="#f3189e" style="font-size:16px; line-height:20px; mso-padding-alt:15px 35px; font-family:'PT Sans', Arial, sans-serif; text-align:center; font-weight:bold; text-transform:uppercase; border-radius:25px; min-width:auto !important; color:#ffffff;">
<a href="#" target="_blank" class="link c-white" style="display: block; padding: 15px 35px; text-decoration:none; color:#ffffff;">
<span class="link c-white" style="text-decoration:none; color:#ffffff;">ACTIVATE CODE</span>
</a>
</td>
</tr>
</table>
<!-- END Button -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END Section - Intro -->
</td>
</tr>
</table>
<!-- END Main -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END Container -->
<!-- Footer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="background-footer p-50 mpx-15" bgcolor="#0047ab" style="border-radius: 0 0 10px 10px; padding: 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="pb-20" style="padding-bottom: 20px;">
<!-- Socials -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_facebook.png" width="34" height="34" mc:edit="image_6" style="max-width:34px;" border="0" alt="" /></a>
</td>
<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_instagram.png" width="34" height="34" mc:edit="image_7" style="max-width:34px;" border="0" alt="" /></a>
</td>
<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_twitter.png" width="34" height="34" mc:edit="image_8" style="max-width:34px;" border="0" alt="" /></a>
</td>
</tr>
</table>
<!-- END Socials -->
</td>
</tr>
<tr>
<td class="text-14 lh-24 a-center c-white l-white pb-20" style="font-size:14px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 24px; text-align:center; color:#ffffff; padding-bottom: 20px;">
<div mc:edit="text_12">
<br />
<a href="tel:+17384796719" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;">(738) 479-6719</span></a> - <a href="tel:+13697181973" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;">(369) 718-1973</span></a>
<br />
<a href="mailto:[email protected]" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;"></span></a> - <a href="www.website.com" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;"></span></a>
</div>
</td>
</tr>
<tr>
<td align="center">
<!-- Download App -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/btn_appstore.png" width="117" height="40" mc:edit="image_10" style="max-width:117px;" border="0" alt="" /></a>
</td>
<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
<td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;">
<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/btn_gplay.png" width="117" height="40" mc:edit="image_11" style="max-width:117px;" border="0" alt="" /></a>
</td>
</tr>
</table>
<!-- END Download App -->
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- END Footer -->
</table> <!-- END Footer -->
<!-- END Footer -->
<!-- Bottom -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-12 lh-22 a-center c-grey- l-grey py-20" style="font-size:12px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 22px; text-align:center; padding-top: 20px; padding-bottom: 20px;">
<a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">UNSUBSCRIBE</span></a> | <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">WEB VERSION</span></a> | <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">SEND TO A FRIEND</span></a>
</td>
</tr>
</table> <!-- END Bottom -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>Upvotes: 0
Views: 1224
Answers (2)
NilakArgento
Reputation: 1
Save html somewhere on your server ex: otp.ejs with SEND_CODE text in your file.
fs.readFile(__dirname+"/otp.ejs", {encoding: 'utf-8'}, (err, data) => {
if(err){
if(err.code == 'ENOENT'){
console.error(err.message);
}else{
console.error(err);
}
} else {
data = data.replace(/SEND_CODE/g, randomNum);
const msg = {
to: req.body.email,
from: "[email protected]",
subject: 'Code Verification',
html : data,
};
}
});
Don't forget to import fs
Upvotes: 0
Quentin
Reputation: 943663
Pick a template language such as nunjucks, then place an output instruction in the template:
<p>Your random number is {{randomNum}}</p>
… then run the template through the template library:
const html = nunjucks.render('template.html', { randomNum: get_a_random_number() });
Upvotes: 2
Related Questions
- Passing a variable from node.js to html
- Send variable from nodejs into js file that has rendered alongside html
- How to pass a variable from a Node.js file to a frontend JavaScript file
- How to pass/access node.js variable to an html file/template
- Javascript / Node.js importing html file and passing parameters to html file
- Nodejs add variable into imported html string
- Passing parameters from Node.JS to HTML file
- How to transfer data from Node js to html file?
- Pass variable to html with NodeJS
- How to pass a value from HTML to Node JS?