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

You must add in your express app something like `app.use(express.static('css'));` and then refer to it in html with `href="/app.css"` but it would be better to put `js` and `css` folder into `public` folder and then add this to your express app code: `app.use(express.static('public'));` — Tomasz Kasperek, Mar 30 '15 at 22:28
wow, duh! I forgot about that part @TomaszKasperek. Thank you. — NorCalKnockOut, Mar 30 '15 at 22:31

score 19 · Answer 1 · answered Mar 16 '16 at 16:10

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);

score 9 · Answer 2 · edited May 23 '17 at 10:27

9

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!

edited May 23 '17 at 10:27

Community

1
1

answered Mar 30 '15 at 23:02

James Taylor

6,158
8
48
74

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. – wordsforthewise Mar 16 '16 at 08:15
I feel like that should be a given, but I've added it for completeness. Good catch! – James Taylor Mar 16 '16 at 15:28
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. – wordsforthewise Mar 16 '16 at 20:26

score 3 · Answer 3 · answered Jun 24 '19 at 15:31

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">

answered Jun 24 '19 at 15:31

ajup

330
2
12

score -1 · Answer 4 · answered Jan 25 '21 at 16:18

//we are in ./utils/dbHelper.js, here we have some helper functions
function connect() {
  // connect do db...
}

function closeConnection() {
  // close connection to DB...
}

//let's export this function to show them to the world outside
module.exports = {
  connect(),
  closeConnection()
};

// now we are in ./main.js and we want use helper functions from dbHelper.js
const DbHelper = require('./utils/dbHelper'); // import all file and name it DbHelper
DbHelper.connect(); // use function from './utils/dbHelper' using dot(.)

// or we can import only chosen function(s)
const {
  connect,
  closeConnection
} = require('./utils/dbHelper');
connect(); // use function from class without dot

nodejs/express include local js file

4 Answers4

Linked

Related