CSS not working with NodeJS

Question

I am having a problem with CSS file which has failed to work in my NodeJs application. Here is my folder contents.

 + controllers
 + models
 + node_modules
 - public
     index.html
     style.css
 - views 
     app.js
     package.json

And below is my app.js file

   var express = require('express');
   var path = require('path');

   var app = express();
   app.use(express.static(__dirname + '/views'));
   app.use('/static', express.static(__dirname + '/public'));

   app.listen(9000)

is there something i am doing wrongly for I am new to nodeJS.

EDIT: Below Here is my index.html

  <!DOCTYPE html>
 <head>
 <title>Brandme - Internet Marketing Agency</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic' rel='stylesheet' type='text/css'>

    <nav class="menubar" id="menubar">
            <div class="listItems">
                <div class="listItem">Personal</div>    
                <div class="listItem">Business</div>
                <div class="listItem">Career</div>  
                <div class="listItem">Sign In</div>             
                <div class="listItem">Learn More</div>
                <div class="listItem"><span class="glyphicon glyphicon-align-justify"></span></div>         
            </div>
    </nav>
    <div id="container">            
        <div class="untop">
            <div id="untop_align">
                <div id="div">Gaining global recognition has never been this easy</div>
                <div style="font-size: 16px; line-height: 25px; margin-top: 30px; font-weight: 500">Brandme is a digital marketing platform that helps promote your business or skill to a large base</div>
                <div class="sign_btn"><button class="btn">Start your journey here</button></div>
            </div>
        </div>
    </div>
    <div class="container-cover-cover">
        <div class="container-cover">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <div class="sample">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-2"><img src ="" class="imagesfaces" style="display: inline-block;position: relative;"></div>
                                    <div class="col-md-10">
                                        <div class="names-samples"></div>
                                        <div class='positions'></div>
                                        <div></div>                                             
                                    </div>
                                </div>
                            </div>
                        </div>  
                        </div>
                        <div class="col-md-4">
                            <div id="side">
                                <div id="sideDescription">

                                </div>
                                <div id="sideAuthor">                               

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script type="text/javascript">
    var collapse = function(){
        $(document).ready(function(){
        $(window).resize(function(){
            var width = $(window).width();
            if(width < 700){
                $('#menubar').hide();
            }
            else{
                $('#menubar').show();
            }
        })          
    })  
    }

    var imageSize = function(){
        $(".imagesfaces").width("80");
    }
    collapse();
    imageSize()
    </script>

did you check when you load the content in network tab of dev tool? is your css loaded? — Raphaël VO
– Raphaël VO, Commented Mar 21, 2016 at 9:42
app.use(express.static(path.join(__dirname, 'public'))); try this — Özgür Ersil
– Özgür Ersil, Commented Mar 21, 2016 at 9:42

Quentin · Accepted Answer · 2016-03-21 10:24:49Z

2

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

merely makes a bunch of static files available over URLs. It won't make the browser request them for you.

You need to explicitly load the stylesheet.

<link rel="stylesheet" href="/static/style.css">

answered Mar 21, 2016 at 10:24

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS not working with NodeJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related