Loading html stylesheets in node.js

Question

I am a beginner in node.js, I am learning it at w3schools.

Recently, when I was learning File System, I came accross fs.readFile method. As its first argument, I provided it with a link to a previously created html file. Now that file has a css stylesheet attached to it, whose href I edited (obviously). That marked the beginning of my problem.

After a lot of reading at several website and editing my code tons of times, this is the final version of my code.

My js, html and css are as follows -

var http = require('http'),
    fs = require('fs'),
    path = require('path'),
    express = require('express'),
    app = express();

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

http.createServer(function (req, res) {
    fs.readFile('.CSS Transitions - timing function.html', function (err, data) {
        res.writeHead(200, {'Content-Type' : 'text/html'});
        res.end(data);
    });
}).listen(8080);

console.log('Server running at =>\n                         localhost:8080\nCtrl + C to quit');

a
{
	transition : color 1s, font-size .5s;
	transition-timing-function : ease;
	color : black;
	font-size : 30px;
}

a:hover
{
	color : red;
	font-size : 40px;
}

<!DOCTYPE html>


<html>
	<head>
		<title>Transition</title>
		<link rel='stylesheet' type='text/css' href='css/CSS Transitions - timing function.css'>
	</head>
	<body>
		<h2>Links</h2>
		<ul>
			<li><a href='http://www.htmldog.com'>HTML-Dog</a></li>
			<li><a href='http://www.imdb.com'>IMDb</a></li>
			<li><a  href='http://www.youtube.com'>YouTube</a></li>
		</ul>
	</body>
</html>

The structure of my directory is

js file
html file
/public
    /css
        css file

PROBLEM >> No matter what I do, my css file isn't loading. This is the frequent error -

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/css/CSS%20Transitions%20-%20timing%20function.css".

Don't know what to do anymore. I have been at it since 2 days, please HELP!!

Khauri · Accepted Answer · 2017-07-01 19:05:48Z

1

You probably shouldn't have spaces in your filename, but that's besides the point. What it seems like you want to do is serve a static file.

Since you're already doing this

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

Then just this line is fine. Remove the entire http.createServer method and it should work fine.

href='/css/CSS Transitions - timing function.css'

No need to mess around with fs at all.

EDIT

I think the preferred method of doing this with express is what I wrote above, but maybe changing the header type from text/html to text/css would also work?

edited Jul 1, 2017 at 19:05

answered Jul 1, 2017 at 18:44

Khauri

3,8731 gold badge13 silver badges19 bronze badges

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

2 Comments

Samsite Over a year ago

Hey man, sorry I didn't realized it before but your solution was a shortcut to work with all static files at once. Thanks. Cheers.

Samsite Over a year ago

@Lorenz Meyer I tried to mark both as correct answers but in doing so I realized that it doesn't work like that. Anyway, Khauri McClain has my thanks.

Vasi · Accepted Answer · 2017-07-01 18:46:56Z

0

Why you use express and http modules at same time? Already express module wrapped by http module. So you can use express module instead of http. Here, example for use express module.

// proper way in server.js

var fs = require('fs');
var fs = require('express');
var fs = require('path');

var app = express();

app.use('/app', function(req, res){
    res.sendFile(path.resolve(__dirname, './html/app.html')); // put your app.html's relative path
})

app.use('/app.js', function(req, res){
    res.sendFile(path.resolve(__dirname, './js/app.js')); // put your app.js's relative path
})

app.use('/app.css', function(req, res){
    res.sendFile(path.resolve(__dirname, './css/app.css')); // put your app.css's relative path
})

app.listen(9090, function(err){
    if(err) console.log(err);
    console.log('listening at http://localhost:9090/app');
})

// app.html

<html>
     <head>
          <script src='/app.js'/>
          <link href='/app.css'/>
     </head>
     <body>
          // your elements
     </body>
</html>

answered Jul 1, 2017 at 18:46

Vasi

1,2271 gold badge10 silver badges18 bronze badges

2 Comments

Samsite Over a year ago

Thank you so much man. It works perfectly. Although, I was wondering if fs.readFile() method can be used to serve static files.

Vasi Over a year ago

Of course, your thought is correct. But you create server with http module, your response object hasn't sendFile method. So you must use " var file = fs.readFile() ", then send file with res " res.send(file) ". But you have use express module, that wrapped http module and exposed a lot of methods in your request and response object. In this time response object has sendFile method. So you can use res.sendFile() instead of fs.readFile().

Collectives™ on Stack Overflow

Loading html stylesheets in node.js

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related