Node.js won't load css at a specific url path length

Question

When I try to load my css on a page with the follow path:

http://wwww.example.com/test = works!

http://www.example.com/test/test = works!

http://www.example.com/test/test/test = doesn't work!

I'm using NodeJS, ExpressJS and ReactJS. My dev server doesn't have this problem, it only occurs on the production server. Maybe it has something to do with the dev dependencies?

This is the folder structure so far.

My server.js file

const express = require('express');
const path = require('path');
const port = 80;
const app = express();

app.use(express.static(__dirname));

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname + '/src/index.html'));
});

app.listen(port);
console.log('Server started and is listening on port ', port);

index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stadro</title>
    <link rel="stylesheet" href="../src/style/global/error.css">
    <link rel="stylesheet" href="../src/style/global/global.css">
    <link rel="stylesheet" href="../src/style/webapp/dashboard.css">
    <link rel="stylesheet" href="../src/style/webapp/content.css">
    <link rel="stylesheet" href="../src/style/webapp/hubbar.css">
    <link rel="stylesheet" href="../src/style/webapp/navbar.css">
    <link rel="stylesheet" href="../src/style/website/contact.css">
    <link rel="stylesheet" href="../src/style/website/support.css">
    <link rel="stylesheet" href="../src/style/website/header.css">
    <link rel="stylesheet" href="../src/style/website/about.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="webapp-style">
    <div class="webapp"></div>
</body>
<script src="/dist/app/bundle.js"></script>
</html>

webpack.config.js file

var path = require('path');

var DIST_DIR = path.resolve(__dirname, "dist");

var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/",
    output: {
       path: DIST_DIR + "/app",
       filename: "bundle.js",
       publicPath: "/app/"
   },
   module: {
       loaders: [
           {
               test: /\.js?/,         
               include: SRC_DIR,      
               loader: "babel-loader",
               query: {
                   presets: ["react", "es2015", "stage-2"]
               }
           }
       ]
   },
   devServer: {
        historyApiFallback: true,    
        port:8080
   }
};

module.exports = config;

SOLUTION: Thanks @taco, I changed the <link> href paths to start at the top level.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stadro</title>
    <link rel="stylesheet" href="/src/style/global/error.css">
    <link rel="stylesheet" href="/src/style/global/global.css">
    <link rel="stylesheet" href="/src/style/webapp/dashboard.css">
    <link rel="stylesheet" href="/src/style/webapp/content.css">
    <link rel="stylesheet" href="/src/style/webapp/hubbar.css">
    <link rel="stylesheet" href="/src/style/webapp/navbar.css">
    <link rel="stylesheet" href="/src/style/website/contact.css">
    <link rel="stylesheet" href="/src/style/website/support.css">
    <link rel="stylesheet" href="/src/style/website/header.css">
    <link rel="stylesheet" href="/src/style/website/about.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="webapp-style">
    <div class="webapp"></div>
</body>
<script src="/dist/app/bundle.js"></script>
</html>

does console shows any erros when you navigate to example.com/test/test — Fadi Abo Msalam
– Fadi Abo Msalam, Commented May 27, 2018 at 8:02
@FadiAboMsalam , I don't see any errors. When I navigate to example.com/test/test/ — Michiel
– Michiel, Commented May 27, 2018 at 8:16
so inspect the page and check the head does you css links show there if so click on the url of the css does it load — Fadi Abo Msalam
– Fadi Abo Msalam, Commented May 27, 2018 at 8:30
the head shows the css paths and when I click on it, it redirects me to the right file. But if the path is wrong (example above) than there's nothing in the css files. — Michiel
– Michiel, Commented May 27, 2018 at 9:58

taco · Accepted Answer · 2018-05-27 08:27:12Z

2

Try changing the src attributes to start at the top level

<link rel="stylesheet" href="/{fullpathtocssfile}">

The easiest way to determine what path to use is to test from shell.

cd app

find . -name 'error.css'

Then use the path it for the href source.

answered May 27, 2018 at 8:27

taco

1,38317 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michiel Over a year ago

Thanks that worked! Added the solution to the post above!

Collectives™ on Stack Overflow

Node.js won't load css at a specific url path length

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest