A razor view engine for nodejs.
https://github.com/nufyoot/kally-razor
I have tried something like this.. but no luck.
var razor = kallyrazor({
root: __dirname + '/views/',
layout: 'shared/layout.html'
});
app.engine('html', function (path, options, fn) {
fn(null, razor.render(path, options));
});
Worked for me. Did you include the view engine?
app.set('view engine', 'cshtml');
Note: I chose the use the cshtml extentionm just for vanity.. (And also in Sublime if that is your editor the razor syntax highlighter, https://github.com/joseph-turner/Razor)
Full code:
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var KallyRazor = require('kally-razor');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'cshtml'); // NOTE THE VIEW ENGINE
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// Setup KallyRazor
var razor = KallyRazor({
root: __dirname + '/views/',
layout: '/shared/layout.cshtml'
});
app.engine('cshtml', function (path, options, fn) {
fn(null, razor.render(path, options));
});
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
Related
New to Node.js.
I'm using the VS2015 Express 3 template. How can I write my routing to:
Have a page at "/"
Have a a catch all route that responds with the home page "/"
Doesn't interfere with JS and CSS files
I.e., I tried the following, but then the JS and CSS files in the public directory respond with 404 don't render or execute. I thought that the static files code would handle it, but it does not. It works until I add the block with "*".
var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
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('*', function (req, res) {
res.send('/', 404);
});
http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});
The solution, as suggested by jfriend00, is to add the following line below app.get('/', routes.index):
app.use(routes.index);
Hi I am trying display the message : respond with a resource from routes folder/user.js
exports.list = function (req, res) {
res.send("respond with a resource");
};
But I am getting an error 404 in command prompt.And in url
localhost:8080\user where the response is sent I get the message:
Cannot GET /user
my app.js has code:
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
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('/users', user.list);
http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});
The example I am working on is from https://www.youtube.com/watch?v=czmulJ9NBP0. and time is at 1.37.41
Your route is named /users not /user. So try navigating to /users in your browser instead and it should work.
I've been playing around with node using jetbrains webstorm IDE. Last night I was trying to setup nib and bootstrap-stylus. However I always get an error that nib or bootstrap cant be found in the import tags.
#import 'nib'
or
#import 'bootstrap'
however if i use
#import '../../node_modules/bootstrap-stylus/lib/bootstrap'
everything works as expected. I don't think this is the right way? there must be some way to tell stylus where to look for imports?
my app.js looks like this
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var nib = require('nib');
var bootstrap = require('bootstrap-stylus');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
function compile(str, path) {
return stylus(str)
.set('filename', path)
.set('compress', true)
.use(nib());
}
app.use(stylus.middleware({
src: path.join(__dirname, 'public')
, compile: compile
}));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});
Thanks!
It should be as simple as rewriting your compile() function as follows:
function compile(str, path) {
return stylus(str)
.set('filename', path)
.set('compress', true)
.use(nib())
.use(bootstrap()); // each plugin has to be loaded
}
More information about plugin usage and stylus can be found here: https://gist.github.com/jenius/8263065
And in the official documentation: http://learnboost.github.io/stylus/docs/js.html#usefn
I want to run Express 3.3.x with its default implementation.
Express uses its routes module, so what I have to do, if JS and CSS is accessible by any view in any route?
/**
* Module dependencies.
*/
var express = require('express');
var http = require('http');
var path = require('path');
var piler = require('piler');
var mongoose = require('mongoose');
var config = require('./config');
var app = exports.app = express();
var js = piler.createJSManager();
var css = piler.createCSSManager();
var srv = require('http').createServer(app);
// all environments
js.bind(app,srv);
css.bind(app,srv);
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
js.addUrl("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js");
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
/**
* Routes
*/
var routes = require('./routes');
app.get('/', routes.index);
srv.listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
In the example of piler:
app.get("/", function(req, res){
res.render("index.jade", {
layout: false,
js: js.renderTags(),
css: css.renderTags()
});
});
This works. But I have
app.get('/', routes.index);
So what I have to do, that js.renderTags() works in every view?
If you are trying to pass variables to render, you can use res.locals
app.use(function(req,res,next){
res.locals.layout= false;
res.locals.js= js.renderTags();
res.locals.css= css.renderTags();
next();
});
Use this before your router but don't overwrite your locals (res.locals={...})
I get this error:
500 Error: ENOENT, open 'C:\Users\Gilbert\WebstormProjects\games\views\layout.hbs
but my project has no reference to this file. when trying to render a simple test page with HBS, I used a pregenerated express app that created a layout.jshtml file but deleated this file.
app.js:
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
routes/index.js:
/*
* GET home page.
*/
exports.index = function(req, res){
res.render('hi.hbs', { title: 'Express' });
};
views/hi.hbs:
<h1>IT WORKS</h1>
With HBS you must manually disable need for a layout with layout:false this should be done in the view options to make it app global.