Our development team at Knowledge Anywhere created a cutting edge Single Page Application (SPA) using AngularJS and ASP.Net running on IIS web server. Before releasing we needed to find a way to get our site indexed by all search engines as well as enable social bots, like Twitter and Facebook, to get the data they needed when sharing. After some Googling, we found the amazing GitHub project by Steve Morin titled Angular-SEO. The gist of his solution is to use a headless browser to render and return the request for JavaScript driven page to a flat, non-JavaScript, just HTML page.

After reading through Steve’s instructions is was clear that we were still going to need to figure out how to get this to all run in a IIS environment as his instructions are for Nginx. We also wanted the ability to run PhantomJS as as a service and found a neat application by Nick Rozanski called SrvStart which will run virtually any program as a Windows service.


We’ve supplied the following instructions on how to solve this challenge:

Updating the PhantomJS Server

We opted to not use the header meta tag, as we found it was not needed for our implementation. We did have to modify the line below to because were are not using #! in our URLs. Lines 47-48 were change as follows:

Original

+ request.url.slice(1,request.url.indexOf(’?’))

+ ‘#!’ + decodeURIComponent(route);

New

+ request.url.slice(1, request.url.indexOf(’?’) == -1 ? request.url.length + 1 : request.url.indexOf(’?’))
+ (typeof route == ‘undefined’ ? ‘’ : ‘#’ + decodeURIComponent(route));

Setup PhantomJS server to run as a service.
Next we created a folder on the c: drive of the server named phantomjs and copied the following files to it:

● angular-seo-server.js
● phantomjs.exe

Create a configuration file (phanotmjs.ini) and save it to the c:phantom folder. SrvStart will use this file to launch the application. You can read the full details on all the configuration options on SrvStart’s page, however we are only going to use the ‘startup’ (the only option truly required) command which specifies the program to launch and ‘shutdown_method’ which tells SrvStart how to close the program when the respective service is stopped.

Our configuration file:

[phantomjs]
startup=C:phantomjs.exe—disk-cache=no c:angular-seo-server.js 8099 [http://www.yoursite.com]
shutdown_method=winmessage
You will need to change “http://www.yoursite.com” to be the URL of your site. The 8099 can be changed to any free port you would like the Phantomjs server to run on.
Install SrvStart on your server and make sure the path to the program is in your environment variables.
Use the built in Windows “sc” command to add a new Windows Service. Run the following from the command prompt (note – there is a space after each equal sign, this is required):
C:SC CREATE phantomjs DisplayName= “phantomjs” binPath= “c:phantomjssrvstart.exe phantomjs -c c:phantomjsphantomjs.ini” start= auto

C:sc description phantomjs “Angular SEO”

Check Windows Services to make sure the phantomjs service is running. If not, then start it.
To insure the PhantomJS server is always running you can create a Scheduled task which stops and starts the service at an interval you see fit. Our scheduled task runs a batch file containing the following commands:

  • net stop phantomjs
  • net start phantomjs

Configuring IIS to use PhantomJS server:
In order to get the bots to use the PhantomJS server, IIS needs a reverse proxy setup as well as URL Rewrite module to redirect bot traffic to use the reverse proxy. Before setting up the reverse proxy, you will need to add Application Request Routing 3.0 to IIS and enable the Proxy.

1. Start > Run > Web Platform Installer
2. Search for Application Request Routing 3.0
3. Click Add for Application Request Routing 3.0
4. Click Install
5. Start > Run > inetmgr
6. Click on the main server branch
7. In the main window, under IIS, double click Application Request Routing Cache
8. On the righthand side under Actions click Server Proxy Settings
9. Check the checkbox Enable proxy
10. Leave all other default settings
11. On the righthand side under Actions click Apply
The URL Rewrite module will also need to be installed in IIS and the following rule added to the web.config. You will need to change the port number to the one you chose during setup of the PhantomJS server.

Testing setup:
You can test the above setup by using curl and running the following command replacing route with a valid route, and the port number with the one you chose:
c:curl “http://localhost:8888/?_escaped_fragment_=/route
You can also pipe the results into a file like this:
c:curl “http://localhost:8888/?_escaped_fragment_=/your/route”> curltest.html
Test end to end using curl
c:curl “http://localhost:8888/?_escaped_fragment_=/your/route”

If all goes well you should see all of the rendered html and not the Angularjs includes like you would if you did a view source on your site.

Sign up to receive industry tips, trends, & insights