I am trying to understand how to include jade and handlebar exactly as I am trying to add angular js to my server that is also using jade for serving other web pages.
I heard of consolidate.js and this is my app.js code:
var engines = require('consolidate');
var exphbs = require('express-handlebars');
var app = express();
app.engine('jade', engines.jade);
app.engine('handlebars', engines.handlebars);
app.set('view engine', 'handlebars');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon(path.join(__dirname, 'public', 'img/favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser(config.cookieSecret.secret));
app.use(express.static(path.join(__dirname, 'public')));
How do I get the view engine setup for both? Also, how do I add the following into my code without affecting other links:
// Application UI route
app.get('*', function(req, res) {
res.render('indexer');
});
app.get('/templates/*', function(req, res) {
res.render('../client/templates/' + req.params[0])
});
Related
I have web application which is developed using ejs + angularJs 1.0 and running in node server. Since these ejs + angular provides only static files, I want to make my app running in webserver. Currently the URL mapping is done in node app.js, hence if we load the URL it renders the html from the ejs. For more information, I have added node app.js configuration:
app.set('title', wsConfig.title);
app.use(bodyParser.json());
app.engine('.html', ejs.__express);
app.set('view engine', 'ejs');
app.use(express.static('./public'));
app.set('views', path.join(__dirname, 'public')); // Set the views path
app.use(function(req, res, next) {
if (req.url.substr(-1) == '/' && req.url.length > 1)
res.redirect(301, req.url.slice(0, -1));
else
next();
});
app.get('/', function(req, res) {
res.render('login', { title: wsConfig.title });
});
app.get('/home', function(req, res) {
res.render('index', { title: wsConfig.title });
});
Hence I need to build a dist folder with js and rendered ejs files instead using node server for rendering. So that I will deploy this dist directory in web server. I thought of using webpack to accomplish this. Please give our suggestions.
I was working on Angular app with routing (NodeJs as backend). Routing through pages works fine but when I try to reload page it gives 'cannot load path /home'. I browsed through and got to few solutions like THIS.
My code is
app.get('*', function (req, res) {
res.sendFile('mypath/index.html');
});
But this loads up blank page. Is there any way I can solve this issue?
This us how my server.js looks like
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var port = process.env.PORT || 8080; // set our port
var staticdir = process.env.NODE_ENV === 'production' ? 'dist.prod' : 'dist.dev'; // get static files dir
// get all data/stuff of the body (POST) parameters
app.use(bodyParser.json()); // parse application/json
//app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
//app.use(bodyParser.urlencoded({ extended: true })); // parse application/x-www-form-urlencoded
app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
app.use(express.static(__dirname + '/' + staticdir)); // set the static files location /public/img will be /img for users
// routes ==================================================
app.set('views', __dirname + '/app');
app.set('view engine', 'html');
require('./devServer/routes')(app); // configure our routes
// start app ===============================================
app.listen(port); // startup our app at http://localhost:8080
console.log('Starting sever on port ' + port); // shoutout to the user
exports = module.exports = app; // expose app
app.get('/', function (req, res) {
res.render('index', {
page: 'index'
}
});
then out this into your config,
app.set('views', 'directory where index.html is');
I am serving up angular pages from express. I cannot get prerender to serve up rendered pages for the products:
http://www.minilolo.com/?_escaped_fragment_=/products/Lolo-Pink
But other pages like this one are OK:
http://www.minilolo.com/?_escaped_fragment_=/products
I think I may need to add some express routes, but would like to know if I am on the right track. Thanks!
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.set('view engine', 'ejs');
app.use(require('prerender-node').set('prerenderToken', 'xyz123'));
/**
* Development Settings
*/
if (app.get('env') === 'development') {
// This will change in production since we'll be using the dist folder
app.use(express.static(path.join(__dirname, '../client')));
// This covers serving up the index page
app.use(express.static(path.join(__dirname, '../client/.tmp')));
app.use(express.static(path.join(__dirname, '../client/app')));
// Error Handling
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
/**
* Production Settings
*/
if (app.get('env') === 'production') {
// changes it to use the optimized version for production
app.use(express.static(path.join(__dirname, 'dist')));
// added to serve up products pages
app.use(function(req, res) {
// Use res.sendfile, as it streams instead of reading the file into memory.
res.sendfile(__dirname + '/dist/index.html');
});
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
}
module.exports = app;
EDIT: I have tracked down the issue to prerender converting '?_escaped_fragment_=' into '#!'. Angular then doesn't know which route to use unless I have $locationProvider.hashPrefix('!') in place (which I don't want to use). I dont want the # prefix if it can be helped.
2015-09-07T12:17:17.566Z got 200 in 12713ms for http://localhost:3000/#!/products
2015-09-07T12:17:18.773Z Timed out. Sending request with HTML on the page
2015-09-07T12:17:18.785Z got 200 in 12732ms for http://localhost:3000/#!/products
2015-09-07T12:19:04.589Z getting http://localhost:3000/#!/products
As explained on the following links:
https://github.com/prerender/prerender/issues/198
https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=en
The query from the search has '?_escaped_fragment_=' at the end of the path, rather than straight after the fqdn.
http://www.minilolo.com/?_escaped_fragment_=/products/Lolo-Pink <-- not this
http://www.minilolo.com/products/Lolo-Pink?_escaped_fragment_= <-- this!
I'm struggling to perform routing using Express in the ng-boilerplate structure.
I'd like to do it using HTML view files (as opposed to JADE).
Can anyone help provide examples of how to do this?
I keep getting Failed to lookup view xx errors when using app.get('/', function(req, res){
res.render('index');
});
Try to set your views directory:
var express = require('express');
var app = express();
app.configure(function() {
app.use(express.static(__dirname + '/public'));
app.set('views', __dirname + '/views'); // <=== Where your HTML view files are present
app.set('view engine', 'jade'); //Your view engine to be set here
});
For detailed information:
Express API
Related Questions and answers
I am trying to setup Express to work with Backbone and pushState, but I'm not sure how to handle the routing. I've tried adding a middleware function (based on https://gist.github.com/3402977) to handle any undefined routes by inserting the # into the url, but it seems like the middleware is never getting called:
app.configure(function(){
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('yadda yadda'));
app.use(express.session());
app.use(app.router);
// This should handle undefined routes.
app.use(function(err, req, res, next){
// Isn't getting called.
newUrl = req.protocol + '://' + req.get('Host') + '/#' + req.url;
res.redirect(newUrl);
});
app.use(express.static(path.join(__dirname, 'public')));
});
Currently, whenever I visit an route that I don't define in Express (http://localhost:3000/test/foo), it gives me a Could not GET /test/foo error. I would like it to redirect to http://localhost:3000/#/test/foo so that Backbone can handle the routing for permalinks and whatnot. What am I missing?
For future generations who land here:
The answer is that his middleware should be before the app.use(app.router); line.