What is the best way to link a stylesheet to the content generated by res.write in Node.js?

Question

What is the best way to link a stylesheet to the content generated by res.write in Node.js?

Currently, I am running a node.js program that performs certain functions and generates an HTML table using res.write(). The output is displayed on the localhost port without being connected to an actual HTML page. As a result, I am facing the challenge of determining where to include my stylesheet.

function func(){
  app.get('/', function (reqs, resp) {
  resp.writeHead(200, {'Content-Type': 'text/html'});
   resp.write("<table></table>");
   resp.end();
  });
}

var server = app.listen(8081, function () {
   func();
});

This snippet showcases the relevant portion of my code. How can I incorporate the stylesheet into this setup effectively?

javascript html css node.js

Answer 1

Answer №1

It may be unconventional, but regardless of how you present it, HTML remains the same. To link an external stylesheet, you would typically use a <link> tag. Here's an example:

res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<link rel="stylesheet" type="text/css" href="/url/to/your/stylesheet">');
res.write("<table></table>");
res.end();

Notice the way the string is enclosed in single quotes to avoid conflicts with double quotes.

Alternatively, if you prefer to directly include CSS on your page without hosting a separate stylesheet, you can utilize a <style> element. Here's an example:

res.writeHead(200, {'Content-Type': 'text/html'});
res.write(`<style type="text/css">
  body {
    color: red;
  }
</style>`);
res.write("<table></table>");
res.end();

You can insert any specific CSS styling rules within the <style> tags. Using backticks for template literals allows for multi-line content, enhancing readability as seen in this example.

Answer 2

It may be unconventional, but regardless of how you present it, HTML remains the same. To link an external stylesheet, you would typically use a <link> tag. Here's an example:

res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<link rel="stylesheet" type="text/css" href="/url/to/your/stylesheet">');
res.write("<table></table>");
res.end();

Notice the way the string is enclosed in single quotes to avoid conflicts with double quotes.

Alternatively, if you prefer to directly include CSS on your page without hosting a separate stylesheet, you can utilize a <style> element. Here's an example:

res.writeHead(200, {'Content-Type': 'text/html'});
res.write(`<style type="text/css">
  body {
    color: red;
  }
</style>`);
res.write("<table></table>");
res.end();

You can insert any specific CSS styling rules within the <style> tags. Using backticks for template literals allows for multi-line content, enhancing readability as seen in this example.

What is the best way to link a stylesheet to the content generated by res.write in Node.js?

Answer №1

Similar questions

The issue with json arises when utilizing $.ajax without the definition$

The command 'npm install -g bigcommerce-stencil/stencil-cli' failed to run properly in the Windows command prompt

The navigation bar is showing my logo in a blurry and small format when viewed on a desktop

One Functionality on Button is Failing to Execute among Several Tasks

Getting the value of a lookup in an alert or console within a Material table in React

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The API is providing data, but it's being returned within an ambiguous object. What could be causing this confusion?

Is it possible to observe cross-domain Javascript requests in Firebug or any alternative browser extension?

What is the best way to align multiple form elements both horizontally and vertically within a frame?

What could be causing the Ioncol not triggering the Onclick event?

What is the best way to remove a parent app.js element from a child component?

Looking for solutions to troubleshoot npm? Wondering why it suddenly stopped functioning properly after reinstalling all the dependencies

Verify if the external web address includes a specific substring

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

In JavaScript or jQuery, what is the most optimal method to swap out all instances of a specific string within the body content without altering the rest of the body text?

Applying a consistent script with varying inputs on the same HTML page

Error: The property 'title' is not defined and cannot be read

Combining ng-filter and ng-repeat to iterate over key-value pairs in objects

Having trouble getting the CSS 3 Spin feature to work?

Bundling with Webpack, utilizing Dev-Middleware, and managing Static Files