CODEWITHSUNDEEP
javascripthtmlcssnode.js
Samsite
Samsite

Reputation: 9

Loading html stylesheets in node.js

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!!

Upvotes: 0

Views: 1944

Answers (2)

Khauri
Khauri

Reputation: 3863

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?

Upvotes: 1

Vasi
Vasi

Reputation: 1227

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>

Upvotes: 0

Related Questions