HTML links in Node JS

I have a String template literal to dynamically build an HTML file, but if I try to add a link tag with href in the string, and run Node to execute the code to build the html file, then I get an error 404, as it’s trying to call GET on my string of HTML as it builds the file. Is there some way to include the href=“path/to/somthing” in the string without it trying to GET it?

Can you show us the code you are using to do this?

It’s when I added the in the element of the string template that node tries to GET the styles.css file instead of just writing it to the html document.

const csvFilePath = "csv/FormSubmissions.csv";
const csv = require("csvtojson");

const PdfWriter = require("csv-converter-to-pdf-and-html/modules/PdfWriter");

const path = require("path");
const fs = require("fs");
const fsPromises = fs.promises;

const pdfFilePath = "./Form-Submissions.pdf";

const creatHtmlFile = async (data) => {
  const fileName = "./Form-Submissions.html";
  return await fsPromises.writeFile(fileName, data);
};

// CREATE HTML FROM JSON OBJECT
const createSubmissionHtml = async (JsonObj) => {
  try {
    return `
      <!DOCTYPE html>
      <html>
          <head>
          <title>Form Submissions</title>
          <link href="./styles.css" rel="stylesheet">
          </head>
          <body>
              ${Object.keys(JsonObj).map((key) => {
                let submission = JsonObj[key];
                return `
                  <div class="submission">
                    <ul>
                      ${Object.entries(submission)
                        .map((entry) => {
                          let listItem;
                          const groups = [
                            "Contact",
                            "Founders",
                            "Progress",
                            "Idea",
                            "Equity",
                            "Legal",
                            "Curious",
                          ];
                          const [prop, value] = entry;
                          const propertyValue = `<li class="property">${prop}:</br><span>${value}</span></li>`;
                          const sectionGroup = `<li class="section-group">${prop}:</li>`;

                          groups.includes(prop)
                            ? (listItem = sectionGroup)
                            : (listItem = propertyValue);
                          return listItem;
                        })
                        .join("\n")}
                    </ul>
                  </div>
                  `;
              })}
          </body>
      </html>
   `;
  } catch (error) {
    console.log(error);
  }
};

csv({
  delimiter: ",",
})
  .fromFile(csvFilePath)
  .then((JsonObj) => createSubmissionHtml(JsonObj))
  .then((html) => {
    creatHtmlFile(html);
    PdfWriter.WritePDF(pdfFilePath, html);
  })
  .catch((err) => err.message);

There’s nothing obvious that I can see which might be causing Node to do that.

Unfortunately, in the code you posted, there are a couple of puzzle pieces that I don’t have access to (e.g. FormSubmissions.csv).

Could you:

  • remove any superfluous steps (e.g. the PDF generation is probably unimportant to the problem at hand)
  • hardcode any missing values into the code (e.g. the CSV file can likely be replaced by a hardcoded JsonObj variable)
  • post enough code that I can replicate the problem on my PC.

If you can do that, I don’t mind taking a look and helping you work out why this behavior is going on.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.