Read css/js files with nodejs and express

Question

I'm a real noob when it comes to nodejs, jsut started this a couple of days ago. I can't figure out why my js and css files aren't applied. There are no 404 errors so that doesn't seem to be it. I'm trying to read the files using express. I'm getting these console errors in dev tools:

GamblerScript.js:1 Uncaught SyntaxError: Unexpected token <

jquery-2.2.0.min.js:1 Uncaught SyntaxError: Unexpected token <

localhost/:5 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/css/Stylesheet.css".

(index):9 Uncaught ReferenceError: Run is not defined

Is there any one who can see what i'm doing wrong?

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
var express = require('express');
var app = express();

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

fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8080);
});

<html lang="en">
<head>
    <title>Dices</title>
    <link rel="stylesheet" href="/css/Stylesheet.css">
    <script src="/js/GamblerScript.js"></script>
    <script src="/js/jquery-2.2.0.min.js"></script>
</head>
<body onload="Run();">
<div id="spinboxcontainer">
    <div class="spinbox">
        <span class="spinspan">Dices</span>
    </div>
<div id="container">
    <div id="spinner1" class="spinner">
        <div id="D1.1" class="one">1</div>
        <div id="D1.2" class="two">2</div>
        <div id="D1.3" class="three">3</div>
        <div id="D1.4" class="four">4</div>
        <div id="D1.5" class="five">5</div>
        <div id="D1.6" class="six">6</div>
    </div>
</div>
<div id=container2>
    <div id="spinner2" class="spinner">
        <div id="D2.1" class="one">6</div>
        <div id="D2.2" class="two">5</div>
        <div id="D2.3" class="three">4</div>
        <div id="D2.4" class="four">3</div>
        <div id="D2.5" class="five">2</div>
        <div id="D2.6" class="six">1</div>
    </div>
</div>
</div>
</body>
</html>

function Run(){
    alert('Welcome');
var clickNumber = 1; 
document.getElementById('spinner1').addEventListener("click", function(){
        alert('Your click is number ' + clickNumber + '!');
        document.body.className -= ' WhiteBackground';
        clickNumber = clickNumber + 1;
});

document.getElementById('spinner2').addEventListener("click", function(){
        alert('Your click is number ' + clickNumber + '!');
        document.body.className += ' WhiteBackground';
        clickNumber = clickNumber + 1;
});
};

We can't see any Run() method. Try posting GamblerScript.js. — weirdpanda
– weirdpanda, Commented Feb 20, 2016 at 12:47
Sure added it. Didn't think it was relevant to the question so that's why i didn't post it at first. — Simon Brynskog
– Simon Brynskog, Commented Feb 20, 2016 at 12:57

Vlad Ankudinov · Accepted Answer · 2016-02-20 14:27:45Z

3

You messing up different approaches. If you use express there is no need to http.createServer and manually read your static files with fs.readFile. For simple static server just simplify your main file like this

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080, function() {console.log('server listening on port 8080...')})

The error you've got is because whenever the browser asks server for script files like jquery and GamblerScript your custom http server sends your index.html file back and browser tryes execute it like javascript.

answered Feb 20, 2016 at 14:27

Vlad Ankudinov

2,0561 gold badge16 silver badges24 bronze badges

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

Comments

McMath · Accepted Answer · 2016-02-20 14:52:01Z

There are a few things you are doing wrong.

In the bottom half of your code, in the callback passed to fs.readFile(), you create a Node server to handle all requests. The emphasized words are key here: you are creating a server using only Node's built-in features, which you shouldn't need to do when using Express; and the server handles all requests, not just those to your index.html file, as I think you intended. So, when the requests for your CSS and JavaScript come in, you are sending index.html as a response. This won't do.

Luckily, the solution is simpler than the original problem. Just do this:

'use strict';

const path = require('path');
const express = require('express');
const app = express();

// This just lets you set an alternate port with an environment variable,
// if you want.
const PORT = process.env.PORT || 8080;

// Set your static folder before any request handlers.
app.use(express.static(path.resolve(__dirname, 'public')));

// Handles request to root only.
app.get('/', (req, res) => {

  // If you needed to modify the status code and content type, you would do so
  // using the Express API, like so. However, this isn't necessary here; Express
  // handles this automatically.
  res.status(200);
  res.type('text/html');

  // Use sendFile(absPath) rather than sendfile(path), which is deprecated.
  res.sendFile(path.resolve(__dirname, 'index.html'));
});

// Call the listen() method on your app rather than using Node's http module.
app.listen(PORT, (err) => {
  if (err) throw err;
  else console.log(`Listening on port ${PORT}`);
});

Collectives™ on Stack Overflow

Read css/js files with nodejs and express

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related