Html Question posted in
Some basic documentation can be found here.

Starting server loads HTML but not CSS or JPG

This is server.js which I am starting in cmd using node server.js:

const express = require("express");
const path = require("path");
const app = express();
const port = 3000;

app.use(express.static('/public'));

app.get("/", (req, res)=>{
    res.sendFile(path.join(__dirname, "views/index.html"));
});

app.listen(port);

This is a section of index.html where I join it with css and create one image:

<!DOCTYPE html>
<html>
    <head>
        <title>Dućan s hranom</title>
        <link rel="stylesheet" href="/public/styles/stil.css">
    </head>

    <body>
        <div id="div1">
            <img src="/public/images/logo.jpg" id="logo">
            <span id="kat">Voće</span>
            <div id="div2">

This is part of my error msg:

Refused to apply style from ‘http://localhost:3000/public/styles/stil.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:10

   GET http://localhost:3000/public/images/logo.jpg 404 (Not Found)

localhost/:18

   GET http://localhost:3000/data/data.js net::ERR_ABORTED 404 (Not Found)

localhost/:1 Refused to execute script from ‘http://localhost:3000/data/data.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
localhost/:91

This is what my directory looks like, but instead of ejs i use html for now

Started server with node server.js, and I was expecting it to open my html file and load css and images.

Tags:

4

Answers


  1. 0

    I believe you do not have to include public in the URL Express static files so by doing http://localhost:3000/public/images/logo.jpg Express thinks you want /public/public/images/logo.jpg, instead it should be http://localhost:3000/images/logo.jpg.

    You can also tell Express to look in multiple directories by doing

    app.use(express.static('/public'));
app.use(express.static('/data'));

    which means Express will also pickup your data folder. The choice is up to you whether you want to place your data folder inside of the public folder or just have multiple app.use(express.static('directory_name')); lines.

    Login or Signup to reply.
  2. 0

    The problem is:
    /public path is not required and should be removed from the href tag. If you define app.use(express.static('/public')); then express will look for static files and directories from /public directory (for example /public/styles/ or /public/img/ etc).

    So the solution is to change your href tag value into:

    <link rel="stylesheet" href="/styles/stil.css">
    Login or Signup to reply.
  3. 0

    The following two points are to take care:

    1. Please use relative paths in frontend apps if the resources referred to are available in the same site of the html documents.

      E.g. styles/stil.css

      Absolute paths and Absolute URI(s) are used when it is the only way out.

    2. The root passed into express.static can either be a relative path or an absolute path.

      E.g. Relative path : express.static(“public”)

      E.g. Absolute path : express.static(__dirname + “/”+ “public”)

    For a detailed discussion on the same, please see the follow-up posted already.

    Code revised

    server.js

    ...
// root as absolute path
app.use(express.static(__dirname + '/' + 'public'));
...
app.listen(port);

    server.js

    ...
// root as relative path, please note No '/' prefixed.
app.use(express.static('public'));
...
app.listen(port);

    index.html

    <html>
...
    <link rel="stylesheet" href="styles/stil.css" />
...
    <img src="images/logo.jpg" id="logo" />
...
</html>

    Citations:

    What is the definition of an absolute URL (fully qualified?)

    express.static(root, [options])

    Login or Signup to reply.
  4. 0

    Please see below for a detailed explanation. This is in continuation to the short answer already posted to this question. Please start from there if not already done.

    express.static(root, [options])

    Quote from Express documentation

    "The root argument specifies the root directory from which to serve static assets. The function determines the file to serve by combining req.url with the provided root directory."

    Please note in the quote “…The function determines the file to serve by combining req.url with the provided root directory”.

    Therefore the static file to serve will always be resulted as root + req.url

    We have three cases to discuss.

    case 1: when req.url is /public/styles/stil.css

    case 2: when req.url is /public/images/logo.jpg

    case 3: when req.url is /data/data.js

    In all these cases, the root remains same as /public.

    In case 1, the resulting static file to serve will be /public/public/styles/stil.css. It is as by the same formula root + req.url. This absolute path resulted will fail to load this resource since there is no such file in the server. It fails so because the actual file is in a relative path which is public/styles/stil.css. Therefore the absolute path is to be corrected. We shall address it in two steps.

    Step 1 : req.url is corrected to styles/stil.css

    Now let us look at the status:

    static file = /public/styles/still.css

    This also results an absolute path which will also fail to load since there is no file in the server in the resultant path.

    Step 2: root is corrected to public

    Now, static file = public/styles/still.css

    This relative path will successfully load the resource since the file is existing in the
    resultant path. This same discussion is applicable to the other two cases
    as well.

    Citations:

    express.static(root, [options])

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search