Lloydinator Lloydinator - 17 days ago 9
Node.js Question

Express Server not Serving Static Files from Index.html

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.

Answer

in the server:

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

in the client:

<link href="/main.css" rel="stylesheet">
<link href="/bootstrap.css" rel="stylesheet">
Comments