Twitter Bootstrap Question posted in

Express Server not Serving Static Files from Index.html – Twitter bootstrap

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.

Tags:

2

Answers


  1. 0

    I think you’re using the app.use wrong

    Try it like this : 

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

    this routes calls to css/... to the static dir named.

    Login or Signup to reply.
  2. 0

    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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search