This question has been asked multiple times I know, but I have searched and tried everything, and it still doesn’t work. I’m new to Node. My file directory is set up like this:
io
-node_modules/
-app/
--css
--js
-index.html
-server.js
Server.js:
var express = require('express');
var app = express();
//app.use(express.static(__dirname+'/app/css'));
app.use('/css', express.static(__dirname+'/app/css'));
var server=require('http').createServer(app);
var io=require('socket.io').listen(server);
users=[];
connections=[];
//set up server
server.listen(process.env.PORT || 3001);
console.log('Server running...');
//create a route
app.get('/',function(req,res){
res.sendFile(__dirname+'/app/index.html');
});
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IO Chat</title>
<meta name="description" content="">
<meta name="author" content="Lloyd">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="css/main.css" rel="sylesheet">
<link href="css/bootstrap.css" rel="sylesheet">
<!--link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.js"></script>
</head>
So what I need to know is why index.html doesn’t seem to able to reference my css files. I’ve tried multiple possible combinations in app.use()
and it just doesn’t want to work, even though at times I can get to the file directly from the browser.
2
Answers
I think you’re using the
app.use
wrongTry it like this :
this routes calls to
css/...
to the static dir named.in the server:
in the client: