Geek Answers Handbook

Creating an AngularJS app and Parse Web App using Prerender

I am trying to run the AngularJS and Parse app for Google and Facebook and even prerender-parse I was not able to get it working. I tried using tips from this Parse Developers thread to enable HTML5 mode. Nothing will work using the Facebook or Google Fetch Bot URL debugger. Can anyone share the full step-by-step setup that they used and currently works?

+1
source share
2 answers

After some help from the Prerender.io team, we will take a look at the steps that led to successful crawling with Google and Google crawlers. Remember that this AngularJS application runs on Parse.com

  • add $locationProvider.hashPrefix("!") to your .config in your main module (I do not use HTML5Mode, because it causes problems when manually entering URLs).

  • add prerender-parse to the TOP of your cloud /app.js and implement prerender-parse according to the instructions found here

    var express = require('express'); var app = express(); var parseAdaptor = require('cloud/prerender-parse.js'); app.use(require('cloud/prerenderio.js').setAdaptor(parseAdaptor(Parse)).set('prerenderToken','YOUR_PARSE_TOKEN'));

  • add <meta name="fragment" content="!" /> <meta name="fragment" content="!" /> in the <head> your index.html

Bonus - dynamic metadata from child controllers for scanners:

B1. Add an event controller to the main application if you do not already have one.

 <html lang="en" ng-app="roommi" ng-controller="MainCtrl">` .controller('MainCtrl', ['$rootScope', '$scope', '$state', '$stateParams', function($rootScope, $scope, $state, $stateParams) { $scope.$on('metaUpdate', function(event, metadata) { $scope.metadata = metadata; }); }

B3 In the child controller, set your metadata object and call the $emit function to pass the event to MainCtrl.

$scope.$emit('metaUpdate', metadata);

B4. Now you can add all the metadata to your head in index.html

 <meta property="og:url" content="{{metadata.url}}"/> <meta property="og:title" content="{{metadata.title}}"/> <meta property="og:image" content="{{metadata.image}}"/> <meta property="og:description" content="{{metadata.desc}}"/>`

B4. One caveat is that this method does not control cache synchronization using prerender.io. Thus, only basic queries and data manipulations can be performed before the totality of the metadata object. If someone finds out a good way to handle deadlines, let me know. I tried the window.prerenderReady method provided by prerender.io, but it did not work in several configurations that I tried.

+1
source

If I remember correctly, my three obstacles to doing this work were:

a) Doing the work $ locationProvider.html5Mode (true)

b) DO NOT use a hash prefix (for example, "#", "#!")

c) Creating nginx will correctly parse the "escaped fragment".

I believe that all of this was well reflected on the Prerender website. If memory serves, their founder also personally responds to emails and provides assistance.

0
source

More articles:


All Articles