CODEWITHSUNDEEP
angularjsexpressprerenderexpress-generator
user1074891
user1074891

Reputation: 289

Prerender not serving up products

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

Upvotes: 0

Views: 242

Answers (1)

user1074891
user1074891

Reputation: 289

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!

Upvotes: 1

Related Questions