nodejs/express include local js file

Question

Here is my current folder structure

css
   app.css
js
  app.js
node-modules
index.html
node-server.js
package.json

The node-server is hosting index.html, but I can't figure out how to get the app.js and app.css files to get loaded.

index.html loads them with:

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

Here is the error message:

Failed to load resource: the server responded with a status of 404 (Not Found)
2http://localhost:3000/css/app.css Failed to load resource: the server 
responded with a status of 404 (Not Found)

I know i need to require or load module or something, just can't figure out what.

Thanks

Solution 1

Reason Node.Js does not server static content on it's own, routes has to defined for serving static content via Node.

Solution(Manual):

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

app.get('/index.html',function(req,res){
   res.sendFile(path.join(__dirname + '/index.html')); 
});

app.get('/css/app.css',function(req,res){
    res.sendFile(path.join(__dirname + '/css/app.css')); 
});

app.get('/js/app.js',function(req,res){
    res.sendFile(path.join(__dirname + '/js/app.js')); 
});

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

Better Solution:

Directory Structure:

public
 css
   app.css
 js
  app.js
 index.html

CODE:

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

// Express Middleware for serving static files
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

Solution 2

As Tomasz Kasperek pointed out, you need to let Express know that you intend to host these files in a static directory. This is technically called defining static middleware.

This should look something like:

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

// first parameter is the mount point, second is the location in the file system
app.use("/public", express.static(__dirname + "/public"));

It's super simple and I suggest you go the route of making some sort of public folder, rather than bothering to make specific files and folders static.

Then the files would simply be referenced like so from the root index.html:

<link href="public/css/reset.css" rel="stylesheet" type="text/css">

Hope this helps you!

Solution 3

I got it to work by using this syntax

app.use(express.static('public'));

Copy the css and js files under the 'public' directory and then add the reference in the index.html file

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

Comments

[wordsforthewise]

You have to make sure you include express as so: var express = require('express'); var app = express(); otherwise it will tell you express is not defined and you will want to punch babies.

[James Taylor]

I feel like that should be a given, but I've added it for completeness. Good catch!

[wordsforthewise]

It wasn't a given for me, the example I was referencing had me doing var app = require('express')() I think, and it was giving me grief.