Troubleshooting: Style sheets not loading on a page rendered by node

Question

Troubleshooting: Style sheets not loading on a page rendered by node

Today was my first attempt at learning Node.js and creating a basic server to display a single page with a header tag. However, I encountered an error stating that the CSS file could not be loaded.

This is the code I used:

const express = require('express');
const path = require('path');

const HOST = '127.0.0.1';
const PORT = 3000;

const app = express();

//app.use("/public", express.static(path.join(__dirname, "static")));
app.get('/', (request, response) => {
    response.setHeader("Content-Type", "text/html");
    response.sendFile(path.join(__dirname, "static", 'index.html'));
});

app.listen(PORT, HOST, () => {
    console.log(`Running Server on ${HOST}:${PORT}`)
});

The HTML file:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
    <h1>Hello World From Node.js!</h1>
</body>
</html>

The Error: https://i.sstatic.net/kCU6u.png

File Tree:

https://i.sstatic.net/ygM1J.png

I am in need of guidance to understand what might be missing for the CSS file to be properly linked with the HTML.

Note: The CSS file loads correctly when directly opening the HTML file in a browser.

javascript html css node.js

Answer 1

Answer №1

You had previously mentioned using express.static(), which is a great way to serve static files.

Based on the documentation, you would utilize the following code:

app.use(express.static(path.join(__dirname, "static")));

By doing this, your CSS should load properly. Any requests like

http://127.0.0.1:3000/css/index.css

will be checked against the static directory, and if a matching file is found, Express will serve it.

If the request does not match a file in that directory (e.g., http://127.0.0.1:3000/), Express will then proceed to look for other matching routes and execute app.get('/', fn) because it matches.

As a reference, here is the full code snippet:

const express = require('express');
const path = require('path');

const HOST = '127.0.0.1';
const PORT = 3000;

const app = express();

app.use(express.static(path.join(__dirname, "static")));
app.get('/', (request, response) => {
    response.setHeader("Content-Type", "text/html");
    response.sendFile(path.join(__dirname, "static", 'index.html'));
});

app.listen(PORT, HOST, () => {
    console.log(`Running Server on ${HOST}:${PORT}`)
});

UPDATED There are two methods for utilizing express.static(), as explained in the documentation:

When using

app.use(express.static(path.join(__dirname, "static")));

(without specifying a prefix), the index.css file can be accessed at:

http://127.0.0.1:3000/css/index.css

Alternatively, when using

app.use("/public", express.static(path.join(__dirname, "static")));

(with the /public prefix), the same index.css file will now be accessible under the /public prefix at:

http://127.0.0.1:3000/public/css/index.css

This second approach may seem counter-intuitive because index.html needs to be updated to load CSS from this new prefix (and will only work when viewed via , not when opened as a local file):

<link rel="stylesheet" type="text/css" href="./public/css/index.css">

Answer 2

You had previously mentioned using express.static(), which is a great way to serve static files.

Based on the documentation, you would utilize the following code:

app.use(express.static(path.join(__dirname, "static")));

By doing this, your CSS should load properly. Any requests like

http://127.0.0.1:3000/css/index.css

will be checked against the static directory, and if a matching file is found, Express will serve it.

If the request does not match a file in that directory (e.g., http://127.0.0.1:3000/), Express will then proceed to look for other matching routes and execute app.get('/', fn) because it matches.

As a reference, here is the full code snippet:

const express = require('express');
const path = require('path');

const HOST = '127.0.0.1';
const PORT = 3000;

const app = express();

app.use(express.static(path.join(__dirname, "static")));
app.get('/', (request, response) => {
    response.setHeader("Content-Type", "text/html");
    response.sendFile(path.join(__dirname, "static", 'index.html'));
});

app.listen(PORT, HOST, () => {
    console.log(`Running Server on ${HOST}:${PORT}`)
});

UPDATED There are two methods for utilizing express.static(), as explained in the documentation:

When using

app.use(express.static(path.join(__dirname, "static")));

(without specifying a prefix), the index.css file can be accessed at:

http://127.0.0.1:3000/css/index.css

Alternatively, when using

app.use("/public", express.static(path.join(__dirname, "static")));

(with the /public prefix), the same index.css file will now be accessible under the /public prefix at:

http://127.0.0.1:3000/public/css/index.css

This second approach may seem counter-intuitive because index.html needs to be updated to load CSS from this new prefix (and will only work when viewed via , not when opened as a local file):

<link rel="stylesheet" type="text/css" href="./public/css/index.css">

Answer 3

Answer №2

If you want to load your static assets, one way to do it is by creating a virtual path like this:

app.use('/assets', express.static(__dirname + '/public/css'));

In this setup, 'public' refers to the directory where all your assets are stored. Within that directory, 'CSS' is the folder containing all your CSS files. You can then use this virtual path in the link tag's href attribute to load the CSS. For example, if you have a template file, you can include the link tag there to reference the CSS file. I've tested this with a similar directory structure and was able to fix any issues with loading the CSS. You can check out my code at: https://github.com/ardnahcivar/Node.js-Code-/tree/master/11-17-18

Answer 4

If you want to load your static assets, one way to do it is by creating a virtual path like this:

app.use('/assets', express.static(__dirname + '/public/css'));

In this setup, 'public' refers to the directory where all your assets are stored. Within that directory, 'CSS' is the folder containing all your CSS files. You can then use this virtual path in the link tag's href attribute to load the CSS. For example, if you have a template file, you can include the link tag there to reference the CSS file. I've tested this with a similar directory structure and was able to fix any issues with loading the CSS. You can check out my code at: https://github.com/ardnahcivar/Node.js-Code-/tree/master/11-17-18

Troubleshooting: Style sheets not loading on a page rendered by node

Answer №1

Answer №2

Similar questions

Is there a way to ensure a Javascript alert appears just one time and never again?

Tips on dividing a div into two separate pages when converting to PDF

Order of flexbox items when placed within separate divs?

Issue with Nodejs exports causing mongoose insertion to return undefined

Display a blade modal upon clicking a Vuejs button

Node.js environment variable returns a value of 'undefined'

Error: Type Error when using custom App and getInitialProps in Next.js

I need to fetch data from mongoDB by allowing the user to input a name into a search field, and then retrieve all documents that correspond to that search term

The error "map is not a function" occurs when trying to update the

Unable to establish a session on the Node server

Is there a way to ensure that Express JS retains local variables even after server restarts?

When using Express, the XML response is returning an empty document

A simple trick to compile and run TypeScript files with just one command!

After installing the latest version of Node.js, the stability of the Ionic environment

Nodemon fails to function when using an npm script defined in the package.json file within a Docker

Middleware caching for faster responses

Retrieve all elements from an array that has been imported through the fs module

Resolving syntax error to enable dismissible device alerts

Transferring Large Volumes of Data via REST API

Leveraging URL parameters in a POST request