Wagtail on Heroku with an Angular(2) front-end


Recently I made the effort to get a free instance of Django wagtail up on Heroku as a backend to a Angular(2) application hosted on GIthub pages. I just wanted to discuss the technologies used here and my experiences with them without getting into too much detail. The front-end can be viewed at https://pure-zero.github.io/codershorizon-frontend/ , the back-end code https://github.com/pure-zero/codershorizon/ and the front-end code https://github.com/pure-zero/codershorizon-frontend. Here goes!

Wagtail

Wagtail is an open source CMS built on top of Django, it takes a lot of queues from the Silverstripe CMS structure, eg more developer focused than say Drupal (yuck!). The thing that wagtail has over Silverstripes current iteration is its mobile admin interface, which can actually be used.

Just starting out in wagtail I used it in a regular templated fashion this was very easy to pick up and I got bored quite quickly, so I decided to look into the API module that wagtail provides and get that working together with angular.

The Wagtail API can be installed easily you just need to follow this guide.

It is built on the Django REST framework so if you have used it before it should be a piece of cake, if not probably just a slightly larger piece of cake. The basic concept is you just run GET request on the endpoint you specified and it will give you some base data you then find what element you want from there and you can get to the detail view for the element, which will include all the fields you need. One thing I did notice while playing with this is they don’t seem to support POSTs as of yet, or at least they don’t mention it in the API docs.

Angular (2)

After the experience I have with Angular, it’s next iteration was a no brainer for me. I wanted to host a static website on Github and connect that up to a free instance of wagtail hosted somewhere, you know the cheap man’s web app implementation. What I did for this site is nothing special a few components making calls to a service that will send a get request to the Wagtail API and coming back with some data. I started the project using ng-cli and deployed it to Github with the same tool, one caveat of deploying an Angular application to Github is that Github won’t load the app if it can’t find the URL you are going to, so routing won’t work the same way it usually does with one page apps, if you load it up going through all the correct links then it will work, but if you just use a link that goes to a specific route you will get a 404 error. The workaround for this though is to make a 404.html file that is a symlink to your index.html file.

Deploying to Heroku


As always it’s deploying to the platform where most of the problems lie.

There are few guides out there to help get you up and running on Heroku:

After you get all that down all should be good and you wagtail instance will be running on Heroku. Then all you will need to do is hook up your GitHub Pages instance to the URL Heroku made for you and you will have a free, slow to startup website! Good job.

Cheers,
Kartika.