'CSS won't load in hbs file for some reason

so I have a very basic file structure going but for whatever reason I cannot get the css to show up in the project when I run it on the localhost. everything else except the css loads here's the structure

enter image description here

I have tried all kinds of path files and have just resorted to straight up copying the entire file path into the relevant parts but still that does not work. I am calling everything from the index.js file.

here's the code for that

const path = require('path');
const express = require('express');
const hbs = require('hbs')
const app = express();
const config = require('./config/request');


const publicDirectoryPath = path.join(__dirname, 'public')
// it was ../public but that did nothing
// also ./public/
// also ../public/
// also /public/
// also public/

const viewsPath = path.join(__dirname, './templates/views')
const partialsPath = path.join(__dirname, './templates/partials')

// error handler
app.use(function(req, res, next) {
    if(config.MARKETPLACE_ID === '' || config.SECRET === '') {
        res.send('MarketplaceId and secret must be set with your marketplace API credentials');
    } else{
        next();
    }
});

app.set('view engine', 'hbs')
app.set('views', viewsPath)
hbs.registerPartials(partialsPath)

app.use(express.static(publicDirectoryPath))

app.get('', (req, res) => {
    res.render('index')
})

app.listen(process.env.PORT || 3000, function(err, req, res) {
    if(err) {
        res.send('There was no endpoint listening');
    } else{
        console.log('server started on port: ', (process.env.PORT || 3000));
    }
});

css file (it's VERY, VERY complicated so take your time reading through it)

.main-content {
    background-color: purple;
}

index.hbs file

<!DOCTYPE html>

<html>

<head>
    <title>marketplace</title>
    <link rel="stylesheet" src="/literally/the/file/path/I copied/from visual studio code/public/css/styles.css" >
 I even put the file into the terminal to get the exact address cause I was convinced I was spelling something wrong
 unless all the possible tools used to determine file path on my Mac are wrong then this is the correct file path. 
</head>

<body>
  <div class="main-content">

so yeah. the index.hbs page should have a purple background. it used to say something about there being an error loading the css file cause of the MIME type or something but I've basically played around with it and got that to go away. now there is no background. no css loaded. and nothing in the console about an error or file not loading. so what gives?

at one point I was trying all of these to load in my css

<link rel="stylesheet" type="text/css" src="actual path copied from the terminal the path is 100% correct>
<link rel="stylesheet type="text/css" href="100% correct file path">
htmlcssnode.jsexpresshandlebars.js


Solution 1:[1]

I had the same issue, so solve it you should put in the link src only "/css/styles.css".

<link rel="stylesheet" href="/css/style.css">

I hope it works for you as well.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 youssef zahi

Related Questions