Search code examples
javascriptnode.jsexpressejssendgrid

NodeJS application, sending email via sendgrid, but my styles and javascript is gone

I send an email using sendgrid with a link to my site back (email confirmation), but when I come back via this link - all my styles are gone and I don't have javascript. I also get this errors:

  1. Refused to apply style from 'http://127.0.0.1:6700/confirm-email/css/style.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  2. Failed to load resource: the server responded with a status of 404 (Not Found)
  3. Refused to execute script from 'http://127.0.0.1:6700/confirm-email/js/build/index.bundle.js' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
  4. Failed to load resource: the server responded with a status of 404 (Not Found)
  5. Failed to load resource: the server responded with a status of 404 (Not Found)
  6. Refused to apply style from 'http://127.0.0.1:6700/confirm-email/css/style.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I tried with clicktracking="off" before the anchor tag, so my link does not change in my template, but it didn't work. Here is my code for the actual email:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email</title>
  </head>
  <body
    style="
      background-color: #efefef;
      font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    "
  >
    <div style="width: 600px; margin: auto; background-color: #fff; border-radius: 5px">
      <table role="presentation" border="0" width="100%" height="48px" cellspacing="0">
        <tbody>
          <tr>
            <td style="background-color: #45bd43; border-radius: 5px 5px 0 0"></td>
          </tr>
        </tbody>
      </table>

      <table style="width: 90%; margin-inline: 2em">
        <tbody>
          <tr>
            <td style="text-align: center">
              <div>
                <h1 style="font-size: 1.75rem; font-weight: bold; padding: 0">your name</h1>
                <h2 style="font-size: 2rem; font-weight: 600">welcome</h2>
              </div>
            </td>
          </tr>
          <tr>
            <td style="text-align: center">
              <img src="images/mail-test.png" alt="" style="width: 15em" />
            </td>
          </tr>
          <tr>
            <td style="text-align: center">
              <h3 style="font-size: 0.9rem; font-weight: 500">
                some text
              </h3>
            </td>
          </tr>
          <tr>
            <td style="text-align: center; padding-top: 2em">
              <button
                style="
                  cursor: pointer;
                  justify-self: center;
                  background-color: #45bd43;
                  outline: none;
                  border: none;
                  width: 10em;
                  font-size: 1rem;
                  text-align: center;
                  vertical-align: middle;
                  padding: 0.5em 1em 0.4em 1em;
                  margin-bottom: 1em;
                  border-radius: 15px;
                  transition: 0.5s;
                "
              >
                <a href="<%= url %>" (it's coming from my ejs templating engine i will show down) style="text-decoration: none; color: #fff">confirm btn</a>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <table
        role="presentation"
        border="0"
        width="100%"
        cellspacing="0"
        style="padding-block: 1em; text-align: center; border-top: solid 1px #d8dde4; margin-inline: auto; width: 90%"
      >
        <tbody>
          <tr>
            <td>
              <small style="font-weight: 400; color: grey; font-size: 1.05rem">my footer</small>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Here is my html render:

const html = await ejs.renderFile(`${__dirname}/../views/email/confirmEmail.ejs`, {
      firstName: this.firstName,
      email: this.email,
      url: this.url,
      token: this.token,
      subject,
    });

After clicking the link to my website my page is rendered like this:

exports.getConfirmEmail = (req, res, next) => {
  res.status(200).render('account/confirm-email', {
    title: 'title',
};

But I get the errors, which I said about up.

Solution

  • I think your path for js and css file is not correct you should give absolute path in ejs or pug template like /css/styles.css and /js/build etc. Wherever you have used these css and js files. If you have these css and js files in public folder of your node app