Render all Jade files in large Express application using folder structure? - angularjs

Question

How can I configure Express to render all Jade files regardless of path? The application I'm on is large with a very complex structure. I'm successfully serving static files however I need many of them to be rendered. We are using Jade for all files needing markup.
I'm worried that the pattern below will force me to create a route alias for every folder that has a Jade file... which would be bad. I would like to tell Express to simply render everything with a .jade extension... OR... allow me to create a route PREFIX for the root that would cause a Render operation instead of Static.
client
app
services
modules
moduleA
itemA
itemAList.jade
itemAList.js
itemADetails.jade
itemADetails.js
itemB
itemBList.jade
itemBList.js
itemBDetails.jade
itemBDetails.js
moduleB
itemC
itemCList.jade
itemCList.js
itemCDetails.jade
itemCDetails.js
itemD
itemDList.jade
itemDList.js
itemDDetails.jade
itemDDetails.js
assets
js
css
server
config
views
Routes.Config.js
module.exports = function(app){
app.get('/*', function(req, res){
res.render('../../client/' + req.params[0]);
});
app.get('/', function(req, res){
res.render('../../client/index', {});
})
}
Express.Config.js
[snip]
app.use(express.static(path.join(constants.rootPath, '/client')));

Answer 1

I would use a Grunt file watcher to kick off a compile any time your .jade files are created or saved. By using the Gruntfile.js below, you can issue the command grunt watch and have this automagically occur in the background:
module.exports = function(grunt){
grunt.initConfig({
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [{
cwd: "client/app/templates",
src: "**/*.jade",
dest: "client/app/modules",
ext: ".html",
expand: true
}]
}
},
watch: {
html: {
files: 'client/app/templates/**/*.jade',
tasks: ['jade'],
options: {
atBegin: true,
interrupt: true
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-jade");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask('default', ['jade']);
}
Now, this assumes that you will create a "templates" folder parallel to the "modules" folder and put all of your .jade files there in the structure you want. You may then add your controllers and other .js files to the modules folder structure as normal.
I'm not sure how Grunt will behave with the source and destination both pointing to the same folder. However, if you REALLY want to keep your .jade and .html files in the same folder, or if you don't want to create a "templates" structure, you SHOULD be able to simply change the cwd variable to point to the "modules" folder:
files: [{
cwd: "client/app/modules", // templates folder removed
src: "**/*.jade",
dest: "client/app/modules",
ext: ".html",
expand: true
}]
NOTE:
Sounds like you've misunderstood some of the fundamentals. From what I'm learning, within a typical MEAN application, there is generally a folder structure that is meant to be purely static. In your example, this would be your "client" folder. By specifying special routes, you individually decide how every other case is handled. The example above is meant to accomplish what I think you're asking while still maintaining the purpose of the "static" area.
UPDATE: Don't use same folder!
I went back and tried using the same folder for the source and destination. This caused Grunt to hang without any way to break out of it. This hang does NOT occur when they are different. So, use the file as-is with the "templates" folder.