Matoy Matoy - 20 days ago 6
Node.js Question

Node js how to use "node_modules" library instead of "src =<cdn>"

I know that this is a recurrent question but I failed to see an answer that I completly understood.

I am using at my node js app, in my index.html some cdn adresses.

i.e. :

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>


but I also have this folder in my
node_modules
directory.. so I don't really need to use the cdn. I can just use the file from my node_modules directory.

problem is how?
right now I have this:

app.use(express.static(path.join(__dirname, '/')));


in my server.js file.

but that is not the path to my node mudles folder (which is under the same root path as my index.html).

I tried to write something like:

app.use('/scripts', express.static(__dirname + '/node_modules/'));


and in my index.html to write something like:

<script src="scripts/angular-ui-router/angular-ui-router.min.js"></script>


but the application didn't even started when I got to localhost:3000
beacuse I got this error:

Error: ENOENT, stat ...... at Error (native)


my questions are:
1. what do I need to write in my server.js instead of
app.use(express.static(path.join(__dirname, '/')));


2.what do I need to write in my index.html file instead of:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>





this is the message I am getting when simply adding:

app.use('/scripts', express.static(path.join(__dirname,
'node_modules')));


error:

Error: ENOENT, stat 'C:\<path_to_my_project>\server_modules\index.html'
at Error (native)


I don't know why it looks for the file there... I do have a folder named "server_modules" but this is not where my index.html is located...
this is my files structure

- my_project
- - server.js
- - index.html
- - node_modules
- - server_modules


this is my server.js

// ---------------- define third Party dependencies)
var express = require('express');
var app = express();
var http = require('http').Server(app);
var path = require('path');
var assert = require('assert');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var jwt = require('jsonwebtoken');
var expressJwt = require('express-jwt');




// ---------------- config the app
app.use(bodyParser.urlencoded({
extended: true
}));

app.use(bodyParser.json());

app.use('/scripts', express.static(path.join(__dirname,
'node_modules')));


// ---------------- define the server handlers (internal dependencies)
var dbHandler = require('./server_modules/dbHandler.js');
var httpRequesetHandler = require('./server_modules/httpRequesetHandler.js').getHttpRequestHandler(dbHandler, app,jwt,expressJwt);
var io = require('./server_modules/socketHandler.js').listen(http, dbHandler);

// ---------------- start the server
http.listen((process.env.PORT || 3000), function () {
dbHandler.get_random_room();
console.log('listening on *:3000 ' + __dirname);
});


also: I am using angular for routing on my single page app

thanks

Answer

Not sure why you're getting the error you're getting. I was able to do what you asked successfully. My steps:

  1. npm install --save angular-ui-router
  2. In my index.hml I wrote: <script src='/scripts/angular-ui-router/release/angular-ui-router.min.js' type='text/javascript'></script>
  3. In server.js I added: app.use('/scripts', express.static(path.join(__dirname, 'node_modules')));

Ran it, no problems.

Looking at your code, it looks like you're pointing to a file path that shouldn't exist based on the angular-ui module structure. You also should watch your path syntax in the html file, 'scripts/whatever' is not the same as '/scripts/whatever'.

** EDIT **

If you want to serve static files out of more than one location, you simply declare the middleware multiple times, for example:

// serve files in /public directory from the root of the site, e.g. http://example.com/index.html would serve the file /public/index.html
app.use(express.static(path.join(__dirname, 'public')));

// also serve files in /node_modules from /scripts.  So /node_modules/angular-ui-router/release/angular-ui-router.js would be found at /scripts/angular-ui-router/release/angular-ui-router.js
app.use('/scripts', express.static(path.join(__dirname,'node_modules')));