Creating an Angular App with Headless WordPress For the Backend
Personal Projects are All About Growth
As an avid fan of boardgames, but not quite as avid as my friends, I decided to create something they can use to wax lyrical about our shared hobby. It was also a great chance to start working with a JS framework I had been interested in for a while - Angular.
As it was a personal project, the scope was virtually unlimited while the funding was minimal. As such, the site is currently hosted for free on a shared server with very limited resources, meaning it does not take advantage of some of the important features of creating successful Angular apps, such as Angular Universal for server-side rendering. However, the app still functions well, albeit a bit slow.
What is Games Playbook?
Games Playbook is a place to find board game strategy guides, reviews, news, and anything else related to mastering different games. To provide the dynamic functionality expected of an Angular app, I had to extend the functionality of WordPress.
This included:
- Extending the WordPress REST API to include more information about each post.
- Adding custom taxonomies to provide an easier way for users to browse by post category, games, or genre.
- Providing the ability to search taxonomies within taxonomies - e.g. looking for 'Terra Mystica' posts within the 'Strategy' category - and returning the results via the API.
- Ensuring the theme and plugins were not loaded when accessing the API to speed up calls, and caching results.
- Paring down the WP backend for ease of use with my collaborators.
Creating the Angular Frontend
Once the API was set up and working fully, consuming the data in Angular is a breeze. Simply setting up a service to fetch the data using the core HttpClient and having the necessary components subscribe to it provides everything you need. This project did not need multiple components reusing the same data, but proper structure is important. Healthy parent-child relationships to share the data across multiple components would be a vital step to ensure the speed of the site.
The most involved step was making sure the routing was working correctly. While using the RouterModule in Angular is well documented, I did have some trouble ensuring a user could reach an intended page using the full URL (e.g. /cockroach-poker/winning-with-the-worst-hand). While navigating to the page worked perfectly, refreshing or going there directly did not work with Angular Routing, and I did not want to use the hash strategy, which would include a '#' in every url.
Getting the Angular Routing to Play Nice
The solution was to use the .htaccess file to rewrite all URLs to index.html and allow the internal routing module to handle the components. This meant we could keep the HTML5 state links without the ugly hash path strategy solution.
RewriteEngine on
# Ignore files and directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Everything else to the app itself
RewriteRule ^ index.html [L]
apache
What more is there to do?
As previously mentioned, once the site is on proper hosting we can institute server-side rendering which will help search engines (everything except Google!) that do not render JS index the site properly. This is an important feature for good SEO. Another SEO-friendly step to take is to dynamically generate a sitemap for the available posts, games, and genres. This will most easily be done in WordPress as a CRON job, but could also be done as part of the Angular app once we have proper hosting.
The rest is all down to playing lots of board games and writing about them!
Angular App for WordPress
If you are looking for a web app for your WordPress site, WooCommerce store, or need help sorting out an Angular app, we can help. From front to back, we have it covered.
If you are interested in any custom work for your WordPress environment, get in touch or learn more about our Nottingham WordPress services.