Stylesheet is sent with a wrong mime type using node.js, how do I fix that?

Question

node.js/express code

var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000,
    path = require('path');


app.use('/public', function (req, res) {
    res.sendfile(path.join(__dirname + '/public/index.html'));
});

app.use('/', function (req, res) {
    var data = '<h1>hello world</h1>';

    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(data)
});

app.listen(port);

console.log('server started at port %s ', port);

html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">  
    <title>MME2 U1</title>

    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="js/app.js" type="text/javascript"></script>

  </head>
  <body>
    <div class="wrap">
      <header>
        <h1>Multimedia Engeneering 2</h1>
        <h2>Übung 1</h2>
      </header>
      <div class="main">
        <div class="content">
          <section id="video1">
            <h3>WebM</h3>

            <video id="vid1" controls> 
              <source src=vid/small_WebM.webm type=video/webm> 
            </video>

            <div id="buttons">
              <button id="playVid1">▶</button>
              <button id="stopVid1">▇</button>
            </div>  
          </section>

          <section id="video2">
            <h3>Ogg Vorbis</h3>
            <video id="vid2" controls> 
              <source src=vid/small_Ogg.ogv type=video/ogg> 
            </video>
            <div id="buttons">
              <button id="playVid2">▶</button>
              <button id="stopVid2">▇</button>
            </div>
          </section> 

          <section id="video3">
            <h3>Mp4</h3>
            <video id="vid3" controls> 
              <source src=vid/small_mp4.mp4 type=video/mp4>
            </video>
            <div id="buttons">
                <button id="playVid3">▶</button>
              <button id="stopVid3">▇</button>
            </div>
          </section>
        </div>

        <div class="side">
          <ul>
            <li><a href="#video1">Video 1</a></li>
            <li><a href="#video2">Video 2</a></li>
            <li><a href="#video3">Video 3</a></li>
          </ul>
        </div>
      </div>

      <footer>
        <p>Lena Meßmer, Sophie Wirth</p>
      </footer> 
    </div>
  </body>
</html>

css code

html, body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.wrap {
    margin: 0 auto;
}

header{
    background: url(http://media.giphy.com/media/S3bkh4BuHMyfC/giphy.gif);
    padding: 1%;
    border-bottom: 3px solid #C9469A;
}

.main {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    align-self: stretch;
}

.content {
    background: #fff;
    padding: 1%;
    order: 0;
    flex: 4 1 auto;
    align-self: auto;
}

.side {
    background: #FF91BA;
    padding: 1%;
    order: 0;
    flex: 2 1 auto;
    align-self: stretch;
    border-left: 12px solid #7F587C;

    color: #7F587C;
}

.side a {
    color: #7F587C;
    font-weight: bold;
    text-decoration: none;
}

.side li {
    margin: 3%;
}

section{
    margin: 3%;
}

footer {
    width: 98%;
    background: #202020;
    padding: 1%;
    border-top: 3px solid #28b1b6;
    color: #939393;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

h1, h2, h3{
    margin: 0;
}

h1 {
    color: #fff;
}

h2 {
    color: #fff;
    font-style: italic;
}

h3 {
    color: #3c3c3c;
    width: 50%;
    border-bottom: 2px dashed #C9469A;
    margin-bottom: 1%;
}

.htaccess

AddType text/css .css
AddType text/javascript .js

the node.js code is in the root directory, the html and css are in /public subdir. Every time I load the side I get: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/css/app.css".

How can I fix that?

Ozymandias Ozymandias · Accepted Answer · 2015-11-02T10:12:50

var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000,
    path = require('path');

app.use('/public', express.static('public'));
app.use('/', function (req, res) {
    res.sendfile(path.join(__dirname + '/index.html'));
});
app.listen(port);

console.log('Server started at http://localhost:%s/', port);

So I rewrote my code like so, and that worked. It only changed when I used the express.static for the public sub url.

Stylesheet is sent with a wrong mime type using node.js, how do I fix that?

1 Answers