MyCompassSpins MyCompassSpins - 15 days ago 6
AngularJS Question

Prerender.io Not Working in Production

I'm trying to get my MEAN stack app set up for proper SEO, using the prerender.io middleware. Locally, everything is working great. In production, nada.The app is hosted on OpenShift. I'm using environment variables for the preRenderToken and preRenderServiceUrl (the service URL is only for dev, and points to another local node server).

In

/server/config/local.env.js
:

(function()
{
'use strict';

module.exports = Env();

function Env()
{
var IEnvironmentVariables = {

// Prerender.io
PRERENDER_SERVICE_URL: 'http://localhost:3000/',
PRERENDER_TOKEN: 'my prerender.io token',
};

return IEnvironmentVariables;
}

})();


In
/server/config/environment/index.js
:

// Prerender.io
// I've definitely got both of these set locally and the token set on OpenShift
prerenderServiceUrl: process.env.PRERENDER_SERVICE_URL || process.env.OPENSHIFT_PRERENDER_SERVICE_URL || 'http://localhost:3000/',
prerenderToken: process.env.PRERENDER_TOKEN || process.env.OPENSHIFT_PRERENDER_TOKEN || 'prerender-token'


The document head contains the following
meta
tags:

<meta name="fragment" content="!">
<meta name="description" content="{{description}}">
<meta name="keywords" content="{{keywords}}">


These bound expressions are set on Angular's
$rootScope
like this:

(function()
{
'use strict';

angular.module('myApp')

.run(['$rootScope', '$state', Run]);

function Run($rootScope, $state)
{
$rootScope.$on('$stateChangeSuccess', function (event, current, previous)
{

// Meta tags
$rootScope.description = $state.current.description || 'default-description';
$rootScope.keywords = $state.current.keywords ?
$state.current.keywords
.toString()
.split(',')
.join(' ') : 'default-keywords
});

}

})();


Finally, in each
$state
configuration, something like this:

(function()
{
'use strict';

angular.module('myApp')

.config(['$stateProvider', Config]);

function Config($stateProvider)
{
$stateProvider

.state('main', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'vm',
description: 'my site description',
keywords: ['array', 'of', 'keywords']
});
}

})();


Visiting
http://localhost:9000/?_escaped_fragment=
(or any other site pages with that query string) produces the pre-rendered page, with the proper values in the meta tags. In production, I'm able to visit
http://www.dancakes.com/?_escaped_fragment=
but the page is not pre-rendered (that is the actual site URL if you want to verify).

I've toyed around with placing the
app.use(prerender . . .)
statements in different positions, and each time I end up with something that works locally, and either partly or not at all in production.

YOU YOU
Answer

So, it seems that you need underscore after fragment ?_escaped_fragment_=