Node.js Express framework: can't get CSS file

Question

I want to access my .html with localhost via node.js. I use the express framework for this. My .html contains some CSS, but this doesn't get loaded with the html file.

Code:

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

app.use(express.static('public'));
app.engine('.html', require('ejs').renderFile);

app.get('/', function(req, res) {
    res.render('FrontPage.html');
});

app.listen(3000, function(){
    console.log("listening to 3000");
})

HTML:

<head>
    <link rel="stylesheet" type="text/css" href="./css/FrontPageCSS.css">
</head>



<body style="background-image:url(./img/bg.jpg)">

<div id="header">
        <a href="./frontPage.html"><img src="./img/Logo.png" height="5%" width="5%" alt="logo"></a>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="./script/FrontPageJS.js"></script>
</div>

<div id="buttonWrapper">
    <div id="first" class="first">
        This is my first button
    </div>

    <div id="second" class="second">
        This is my second button
    </div>
</div>

CSS:

div#header{
    text-align: center;
}
div#buttonWrapper{
    text-align: center;
}
div.madeBefore, div.madeNotBefore{
    border-radius: 25px;
    background: -webkit-linear-gradient(left top, #ffc300 , #ff8300);
    background: -o-linear-gradient(bottom right, #ffc300, #ff8300);
    background: -moz-linear-gradient(bottom right, #ffc300, #ff8300);
    background: linear-gradient(to bottom right, #ffc300 , #ff8300);
    width: 500px;
    height: 425px;
    margin-right: 50px;

    padding:50px;
    padding-top: 250px;
    padding-bottom: 0px;

    display: inline-block;
    vertical-align: top;

    text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0,       0, 0.2);
    color: #B36103;
    font-size: 60px;
    text-align: center;
}
div.madeNotBefore{
    margin-right: 0px;
}
div.madeBefore:hover, div.madeNotBefore:hover{
    background: -webkit-linear-gradient(left top, #ff7600 , #e96c00);
    background: -o-linear-gradient(bottom right, #ff7600, #e96c00);
    background: -moz-linear-gradient(bottom right, #ff7600, #e96c00);
    background: linear-gradient(to bottom right, #ff7600 , #e96c00);
}

How do I make sure the CSS gets sended togheter with the .html?

Show your html and css please

Idos
– Idos

2015-12-03 18:06:08 +00:00
Commented Dec 3, 2015 at 18:06 — Idos
– Idos, Commented Dec 3, 2015 at 18:06

klijakub · Accepted Answer · 2015-12-03 19:08:14Z

6

Add this:

var path = require('path');

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

create folder public, put css files inside and in your html file:

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

edited Dec 3, 2015 at 19:08

answered Dec 3, 2015 at 18:18

klijakub

84513 silver badges31 bronze badges

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

6 Comments

Stijn Over a year ago

I still only get the html without any CSS.

klijakub Over a year ago

Open your browser then go to the console (ctrl + shift + j in chrome) and look at "Console tab" Do you have any errors? Problem with load css?

Stijn Over a year ago

Yes, it indeed gives me: failed to load resources. The path it gives me is still my old path instead of the new one with public/..

klijakub Over a year ago

Try hard refresh Ctrl + F5?

Stijn Over a year ago

Doesn't work either. I don't no why it still talks about the previous path in the error while I changed it in my html file

|

Ro. · Accepted Answer · 2015-12-03 18:53:58Z

1

You need to make sure your css content is inside your public folder. For example if you have a folder css inside public folder and your css file is named FrontPageCSS.css then you can use it like this

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

You can asume that you are inside public for references.

answered Dec 3, 2015 at 18:53

Ro.

1,8011 gold badge19 silver badges17 bronze badges

Comments

Luop90 · Accepted Answer · 2015-12-04 00:02:22Z

1

Before doing anything:

1) Verify that public/ is in the main folder of the server. (So wherever your server file is, public/ should in that same directory)

2) ...verify the css file is actually there.

Then, use this to make the /public directory static:

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

And in your file, set this to get your CSS:

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

answered Dec 4, 2015 at 0:02

Luop90

605 bronze badges

Collectives™ on Stack Overflow

Node.js Express framework: can't get CSS file

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related