Menu
My directory set up is like this :
app.js vews home.html css style.css My home file is like this :
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> </body> </html> My app is like this :
var io = require('socket.io'), url = require('url'), sys = require('sys'), express = require('express'), http=require('http'); var app = express(); var server = http.createServer(app); var socket = io.listen(server); app.engine('.html', require('ejs').__express); app.set('views', __dirname + '/views'); app.set('view engine', 'html'); app.get('/', function(req, res){ res.render('home'); }); app.listen(4000); sys.puts('server running ' + 'now ' + Date.now()); The problem is when i run the app, css file can not be loaded.
567
Make sure the link tag is at the right place If you put the <link> tag inside another valid header tag like <title> or <script> tag, then the CSS won't work. The external style CAN be put inside the <body> tag, although it's recommended to put it in the <head> tag to load the style before the page content.
Make sure that your CSS and HTM/HTML files use the same encoding ! If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well. IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.
Since .css files are static files you have to serve them to the clients. However, you do not serve static files as a express middleware. Add the following middleware to your express app and move the css folder under the public directory (you should create a public directory)
app.use(express.static(path.join(__dirname, 'public'))); So your final directory structure should look like this
app.js views home.html public css style.css And do not forget to require path module
var path = require('path') In one of my apps, I have these relevant files in this file structure:
/ index.js /public /stylesheets main.css /views /partials header.ejs The index.js includes app.use(express.static(path.join(__dirname, '/public'))); Note the /public.
The header.ejs partial includes <link rel='stylesheet' type='text/css' href='/stylesheets/main.css' /> Note the lack of public, it’s implied by the middleware.
In your example, your current directory for static files doesn’t match where you are keeping static files.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
