CODEWITHSUNDEEP
angularjsnode.jsexpress
michael-mammut
michael-mammut

Reputation: 2783

How to use an external js-File in Nodejs, ExpressJS

I started today with NodeJS, ExpressJS, Android, to create a little Webapplication. And I faced a problem an it holds me the whole day!

ENV:

Server: NodeJS, ExpressJS

Client: HTML,Angular, CSS

I try to load the CSS and the JavaScript file from the node_modules folder. But it doesn't work. It works just with the online sources

works 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../public/javascript/test.js"></script>

doesn't work

<script type="text/javascript" src="../public/javascript/test.js"></script>

The server write all the time a 404 Error

enter image description here

I've tried with absolut and relativ path. I've tried also with serveral sugesstions from other stackoverflow posts. without a result.

The Servercode was created by Eclipse IDE with 'Express JS Project'

app.js

    var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')

    ,pageX = require('./routes/pageX');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/pageX', function(req,res){
    console.log("TEST - PageX");
    res.send(pageX.pageX(req, res));
});
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Michael

Upvotes: 2

Views: 5184

Answers (2)

Kent Aguilar
Kent Aguilar

Reputation: 5338

Try using this one. Worked on my end.

var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/public/js'));

Upvotes: 0

ahirata
ahirata

Reputation: 156

According to the docs, when using this:

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

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

So, to load your test.js you should use:

<script type="text/javascript" src="/javascript/test.js"></script>

Also, it means that you should have a public directory under __dirname.

If I understood you correctly and from what you said you've tried so far, you are running node from inside the node_modules and you have the following directory structure:

app-root-directory/
    public/
    node_modules/

I'm quite new to node as well and I believe you're not supposed to be running from inside node_modules. But if you are then path.join(__dirname, 'public') is not what you want as it will point to public inside node_modules.

So you also have to change the root directory of express.static to ../public:

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

Upvotes: 3

Related Questions