title: style sheet not loading because of MIME
body: <blockquote>
    <p>Refused to apply style from '<a href="http://localhost:3001/css/style.css" rel="nofollow noreferrer">http://localhost:3001/css/style.css</a>'
    because its MIME type ('text/html') is not a supported stylesheet MIME
    type, and strict MIME checking is enabled.</p>
  </blockquote>
  
  <p>I know this has been discussed here '<a href="https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type">style sheet not loading because of MIME type</a>' but I cannot solve my issue using the tips provided.</p>
  
  <p>I am honestly quite lost as to what to do... did anyone have any other suggests that were previously not mentioned in the other post?</p>
  
  <p><strong>client directoy</strong></p>
  
  <p><strong>layouts</strong></p>
  
  <p>default.hbs</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="/css/style.css"&gt;
      &lt;!--&lt;link rel="shortcut icon" href="img/favicon.png" type="image/x-icon"&gt;--&gt;
      &lt;title&gt;Spoty&lt;/title&gt;
      &lt;title&gt;{{title}}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      {{{body}}}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>root directory</strong></p>
  
  <p>index.js</p>
  
  <pre><code>'use strict';
  
  
  const server = require('./server')();
  const config = require('./config');
  
  server.create(config);
  server.start();
  </code></pre>
  
  <p><strong>server directory</strong></p>
  
  <p>index.js</p>
  
  <pre><code>'use strict';
  
  
  const express = require('express');
  const bodyParser = require('body-parser');
  const expressHandlebars = require('express-handlebars');
  
  
  module.exports = () =&gt; {
  
      let server = express();
      let create;
      let start;
  
      // creates server
      create = (config) =&gt; {
          let routes = require('./routes');
  
          // server settings
          server.set('env', config.env);
          server.set('port', config.port);
          server.set('hostname', config.hostname);
          server.set('viewDir', config.viewDir);
  
          // middleware for parsing json
          server.use(bodyParser.json());
  
  
          // Setup view engine
          server.engine('.hbs', expressHandlebars({
              defaultLayout: 'default',
              layoutsDir: config.viewDir + '/layouts',
              extname: '.hbs'
          }));
          server.set('views', server.get('viewDir'));
          server.set('view engine', '.hbs');
  
          server.use(express.static(__dirname + '/client'));
  
          // Set up routes
          routes.init(server);
  
      };
  
      // start server
      start = () =&gt; {
          let hostname = server.get('hostname');
          let port = server.get('port');
  
          server.listen(port, () =&gt; {
              console.log('Express server listening on - http://' + hostname + ':' + port);
          });
      };
  
      return {
          create, start
      }
  };
  </code></pre>
  
  <p><strong>server/routes</strong></p>
  
  <p>index.js</p>
  
  <pre><code>const homeRoute = require('./home');
  
  function init(server) {
      server.get('/', function (req, res) {
          console.log('error here');
          res.redirect('/home');
      });
  
      server.use('/home',homeRoute);
  }
  
  module.exports = {
      init
  };
  </code></pre>
  
  <p>home.js</p>
  
  <pre><code>const express = require('express');
  const homeController = require('../controllers/home');
  
  let router = express.Router();
  
  router.get('/',homeController.index);
  
  module.exports = router;
  </code></pre>
  
  <p><strong>server/controllers</strong></p>
  
  <p>home.js</p>
  
  <pre><code>function index(req, res) {
      res.render('home/index', {
          title: 'Home Page'
      });
  }
  
  module.exports = {
      index
  };
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "example",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "watch:sass": "node-sass /client/sass/main.scss /client/css/style.css -w",
      "devserver": "live-server",
      "start": " node index.js npm-run-all --parallel devserver watch:sass",
  
      "compile:sass": "node-sass sass/main.scss css/style.comp.css",
      "build:css": "npm-run-all compile:sass"
    },
    "dependencies": {
      "body-parser": "^1.18.3",
      "cookie-parser": "~1.4.3",
      "debug": "~2.6.9",
      "express": "~4.16.0",
      "express-handlebars": "^3.0.0",
      "hbs": "^4.0.1",
      "http-errors": "~1.6.2",
      "jade": "~1.11.0",
      "lodash": "^4.17.10",
      "morgan": "~1.9.0"
    },
    "devDependencies": {
      "nodemon": "^1.18.3",
      "autoprefixer": "^8.6.4",
      "concat": "^1.0.3",
      "node-sass": "^4.9.0",
      "npm-run-all": "^4.1.3",
      "postcss-cli": "^5.0.1"
    }
  }
  </code></pre>
  
  <p><strong>config</strong></p>
  
  <p>index.js</p>
  
  <pre><code>const _ = require('lodash');
  const env = process.env.NODE_ENV || 'local';
  const envConfig = require(`./${env}`);
  
  
  const defaultCofig = env;
  
  module.exports = _.merge(defaultCofig, envConfig);
  </code></pre>
  
  <p>local.js</p>
  
  <pre><code>let localConfig = {
      hostname: 'localhost',
      port: 3001,
      viewDir: './client/views'
  };
  
  module.exports = localConfig;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gP2pf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gP2pf.png" alt="Folder Structure"></a></p>
  
  <p>git repo: <a href="https://github.com/rostgoat/NodeExpress" rel="nofollow noreferrer">https://github.com/rostgoat/NodeExpress</a></p>