Rewriting this blog in NodeJS + Express.

I decided to rewrite this PHP+Wordpress blog into a Node+Express+Mustache+Grunt app. Heres how it went.

This blog spent its first 2 years on WordPress. But after getting frustrated at the frameworks code quality and monkey-patching practices I decided I wanted a different route. One which was more performant but also easy to write with. I decided On Node+ExpressJs.

Setup an ExpressJs app:

I found it very easy to get started with a Node+ExpressJs app. You can find the details here.
Node+Express promote modularity, extensibility, clean code (with some help from JSHint) and performance.

Running on Apache:

It runs locally on any port you specify and can easily be used with Apache to ProxyPass onto whatever port Apache is running on. Thus allowing you to use it with Apache and any other web apps listening on port 80.
For example:

          ProxyPass http://localhost:3000/
          ProxyPassReverse http://localhost:3000/

WPAUTOP issue:

So once I had a basic app working I tried to connect directly to my MySql database directly. Using the npm ‘mysql’ module it was easy.
I discovered however that WordPress passes all Post database content through a special format method called wpautop which does a HECK-OF alot of formatting to special characters and line breaks and such.
I could have chosen to use a version somebody had ported in JS but decided to try something else entirely.

WP-API plugin to the rescue:

It was then I discovered a plugin which transformed my PHP+Wordpress app into a clean and pretty restful API (with hypermedia controls like any decent API should have). It can be found here.
After installing it you are able to hit feeds ‘/wp-json/posts/’ and a number of others which return JSON data. The content was all presented post-wpautop (wahooo) so all the formatting had been done. Perfect..

Turning APP into an API:

I decided to move my current blog from
www.mysite.com
to
api.mysite.com
Now I have a public facing API which I can use from ANY new application for my data and it includes everything I need, including pagination and filtering.

Image subdomain:

Thanks to earlier foresight I had already began hosting images on an
images.mysite.com.
So there was no work required to pull images from posts.

Present the data with a Mustache:

I am a firm believer in keeping “controllers” slim and views as logic-less as possible. So I chose to use ‘mustache’ as my view renderer. It can be easily incorporated using the NPM package.
Now anytime I render() it will use the Mustache engine.

Grunt if you like to be miserable:

I have used ‘SASS’ for the CSS and ‘nodemon’ for development so I do not have to continually restart my server after a file change. It can be found here.
With both these jobs I decided to invest in Grunt the Task Runner (found here). With Grunt I setup several other jobs which are all easy to run.

Dont be backwards:

So with my site now running 200% faster (thanks node) the only question was what to do with old URL’s. The new API meant I needed to include the post ID within the url, so ‘/1235/my-post/’.
Unlike my old site which did not need them i.e. ‘/my-post’.
I wound up having a MYSQL DataSource (as well as an API DataSource) which queries the ‘wp_posts’ table for the slug and returns the ID. The app than redirects them to the new URL which includes the ID. This lookup and redirect effectively mean that old URL’s are slower than the new ones. However with a 301 Google will remember them and so should not give them out for much longer.

Running forever:

As Node runs on a single thread it is prone to bringing down the entire app if there is a bad enough error.
Using a nifty npm module called Forever (found here) it will restart the thread for you even when it crashes. No problems.
Start it with:

  forever start index.js

New structure:

The new app structure looks like this (the empty view is used for things like sitemaps and robots.txt).

/app
  /datasources
    /api.js
    /mysql.js
  /presenters
    /home.js
    /post.js
  /public
    /css
    /imgs
    /javascript
  /views
    /empty.mustache
    /home.mustache
    /layout.mustache
    /post.mustache
  Gruntfile.js
  index.js
  package.json
  routes.js
  server.js

A final Promise

So with my new DataSources I needed a clean way to let the javascript run Asynchronous jobs (like an API call or MySql query) without it halting the entire apps processing. The brilliant NPM Module Q can solve that and works much like jQuery promises. For a nice guide on that see here.

Overall

So to sum up I have found it an absolute pleasure to work with this technology and feel I can really build more features with ease and pleasure without all that WordPress nonsense.

Leave a Reply