express: how to send html together with css using sendFile?


Tags: html,css,node.js,express,sendfile

Problem :

var app = require('express')();

app.get('/', function(req, res) {
  res.sendFile(__dirname + "/" + "index.html");
});
<link rel="stylesheet" href="style.css">

I used the above node.js code to send a html file. To get the html file formatted I need to send another css file(style.css).
My question is: how can I send both of these two files(index.html and style.css) using sendFile() and integrate them together in the client side?



Solution :

The browser should load style.css on its own, so you can serve that as a route:

app.get('/style.css', function(req, res) {
  res.sendFile(__dirname + "/" + "style.css");
});

However, this would get very cumbersome very quickly as you add more files. Express provides a built in way to serve static files:

https://expressjs.com/en/starter/static-files.html

const express = require("express");
const app = express();
app.use(express.static(__dirname));

Keep in mind that if index.html is in the same directory as your server code you will also serve the server code as static files which is undesirable.

Instead you should move index.html, your css, images, scripts, etc. to a subdirectory such as one named public and use:

app.use(express.static("public"));

If you do this, Express will serve index.html automatically and you can remove your app.get("/" as well.


    CSS Howto..

    How to embed a php/javascript photogallery in a page of an html/css website?

    How to place 3 different paragraphs next to each other?

    how to size the silverlight object to available space

    how to use css align control one row

    How to make CSS Multi Column layout over html to move between the columns on user click

    How to addStyleNames “Multiple css classes” into 1 element in UiBinder in GWT?

    How To Use CSS To Style The Output Of JavaScript

    How to make a vertical bar that follows its user in a specific area?

    How to make H1 tag responsive in Avada WordPress theme using CSS

    jQuery date picker show half day blocked

    How can I make an H4 element behave like an HR when floats are present

    css boxes are not shown in the right place (when adding doctype)

    How to get background colors with fullCalendar and Bootstrap

    How to have an unlimited amount of divs shown next to each other

    How would I reverse a css transition property width?

    how to use css inheritance for button colors

    CSS: How to set image width larger than the container's [closed]

    CSS and JS: How to Inflate the Size of a Tile In Grid

    How to turn on Visual Studio 2008 .css Intellisense on .less file

    How to stop html/css object from resizing

    How to reduce size of a text with police roboto on a small scren

    How to make content div full height when using padding on wrapper?

    How to assign a Css class on an item based on click

    CSS - How to horizontally center table whos position is absolute

    How to use sprite css [duplicate]

    How to get a div text from html content

    How does jQuery affect CSS structure

    How to change the opacity of image on hover using css

    How to apply CSS locally on any online page?

    how to make yo angular load bootstrap theme css