Serving html and javascript through structured Express app

Question

I am currently playing with Express and attempting to solve (what I believe should be) a trivial problem.

I've got the following directory structure:

   |-config
   |---config.js
   |---routes.js
   |-server.js
   |-scripts
   |---controllers
   |------controllers.js
   |---directives
   |---filters
   |---services
   |---templates
   |---app.js
   |-views
   |---index.html

My server.js

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

require('./config/config.js')(app);
require('./config/routes.js')(app);

app.listen(7777);

My config.js

module.exports = function(app){
    app.set('views', __dirname + '../views');
    app.engine('html', require('ejs').renderFile);
}

My routes.js

module.exports = function(app, express){

    app.get('/', function(reg, res){
        res.render('index.html')
    })

    app.use(function(err, req, res, next){
        console.error(err.stack);
        res.send(500, 'Something broke!');
    });
}

And finally my index.html

<html lang="en">
<head>
    <title></title>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js'>
    </script>
</head>
<body>
    Hello World!!!
</body>
</html>

When I visit localhost:7000/

I get

Error: Failed to lookup view "index.html"
    at Function.app.render (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/application.js:494:17)
    at ServerResponse.res.render (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/response.js:756:7)
    at /Users/abe/github/leap-motion-signature-recognition/config/routes.js:7:13
    at callbacks (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/router/index.js:161:37)
    at param (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/router/index.js:135:11)
    at pass (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/router/index.js:142:5)
    at Router._dispatch (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/router/index.js:170:5)
    at Object.router (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/router/index.js:33:10)
    at next (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/node_modules/connect/lib/proto.js:190:15)
    at Object.expressInit [as handle] (/Users/abe/github/leap-motion-signature-recognition/node_modules/express/lib/middleware.js:30:5)

Why is that? Shouldn't the __dirName set have hooked views\index.html?

Secondly, I am planning to use this server to back an Angular JS app with many javascript files. What is the Express answer to the Rails asset pipeline? How can I include entire directories painlessly, without explicit population of script tags, and, if at all possible with deploy time minification?

Change __dirname + '../views' to __dirname + '/../views'. — mak
– mak, Commented Aug 5, 2013 at 10:40
You can serve static files from a directory with the static middleware. — mak
– mak, Commented Aug 5, 2013 at 10:42
You can use the exprses-uglify middleware to minify your javascript files. — mak
– mak, Commented Aug 5, 2013 at 10:43
Thank you for your fantastic amount of help. If your write it up, I'll accept and upvote — Abraham P
– Abraham P, Commented Aug 6, 2013 at 8:03

mak · Accepted Answer · 2013-08-06 09:20:50Z

2

__dirname has no trailing slash, so you should change __dirname + '../views' to __dirname + '/../views'.

You can serve static files from a directory with the static middleware:

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

express-uglify can minify your javascript files:

var expressUglify = require('express-uglify');
app.use(expressUglify.middleware({ src: __dirname + '/scripts' }));

answered Aug 6, 2013 at 9:20

mak

13.4k5 gold badges43 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

Serving html and javascript through structured Express app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related