Cant load css file

Question

I'm trying to use the login templates (Took from: 50 Free HTML5 And CSS3 Login Forms For Your Website 201

My directory set up is like this :

-css
 |
 -- style.css
- js
 |
 -- index.js
 |
index.html

The head of the index.html file looks:

<head>
  <meta charset="UTF-8">
  <title>Sign-Up/Login Form</title>
  <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


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


</head>

and the body contains the includes scrips:

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

My node.js looks:

// Import Required Module
var express = require('express')
var app = express()
var bodyParser = require('body-parser')


// css
var path = require('path')
app.use(express.static(path.join(__dirname, 'public')));

// Create instances
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({    
  extended: true
})); 

// Get
app.get('/', function (req, res) {
  console.log('Get: /');
  res.sendFile('LoginTemplate/index.html', {root: __dirname })
})

/*
app.get('css/style.css', function (req, res) {
    console.log('Get: css/style.css');
    res.sendFile('css/style.css', {root: __dirname })
})
*/


// Listner
app.listen(3001, function () {
  console.log('Example app listening on port 3001!')
})

When loading the html file I'm getting the error:

GET http://127.0.0.1:3001/css/style.css

I have tried to look for solution at: Can not get CSS file

And created the public folder and copy the css folder inside, but it still doesnt work.

How can I load the css & js files ?

We must create a directory public on the root and put your directory css inside it — Fabio Campinho, Feb 21 '17 at 18:11

score 1 · Accepted Answer · answered Feb 21 '17 at 20:13

// Import Required Module
var express = require('express')
var app = express()
var bodyParser = require('body-parser')

// Create instances
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({    
  extended: true
})); 

// Get
app.get('/', function (req, res) {
  console.log('Get: /');
  res.sendFile('LoginTemplate/index.html', {root: __dirname })
})


app.get('/css/style.css', function (req, res) {
    console.log('Get: css/style.css'); 
    res.sendFile('LoginTemplate/css/style.css', {root: __dirname })
})

app.get('/js/index.js', function (req, res) {
    console.log('Get: js/index.js'); 
    res.sendFile('LoginTemplate/js/index.js', {root: __dirname })
})


// Listner
app.listen(3001, function () {
  console.log('Example app listening on port 3001!')
})

score 0 · Answer 2 · answered Feb 21 '17 at 18:12

Everything looks good in your code and folder setup. From the URL you are posting (http://127.0.0.1:3001/css/style.css), I am guessing that the error lies in your server instance. Check the definition files and make sure that the server has permission to read css/style.css.

I have run into this problem when the file and folder do not have the right permissions. A quick check for this is running something similar to sudo chmod -R 0777 [path_to_your_project] (linux and Mac systems will use this command). This command gives full access to all users and guests to read, write and execute your files and is a quick way to verify whether the problem is user rights.

I have also run into this same problem when my web server is not correctly configured. In those cases, I had accidentally allowed the web server to share all files in the root folder (eg: /var/www ), but not any sub folders, so (using the example) the folder /var/www/images would be parsed by the web server and seen as an area that is protected. In this case, the Web Server has access, but it refuses to serve the files based on the configuration rules.

I hope one of these two fixes helps direct you down the right path to a solution.

Good luck!

Cant load css file

2 Answers2