• Building a $1 serverless CMS
    (and mobile apps to navigate the content offline)

Nacho Coll

Enterprise Architect / AWS Evangelist
linkedin
  • back
  • DynamoDB Scale Strategies

Project Motivation

An International producer of personal hygiene solutions required to distribute marketing related notes among employees. After doing some good design work, the company marketing agency easy-to-go proposal was to export the Adobe Illustrator designs to PDF format and distribute the files (some way) to Android devices, iOS devices, and PCs.
At this point, the marketing agency contacted me to validate the technical aspects. My recommendation was to use a Content Management System (CMS) and convert Adobe Designs to HTML, not PDF (especially considering that PDF files look fine in personal computers but no so good on mobiles). In fact, HTML is more "readable" by mobiles than PDF files, and using a CMS will also allow easy content updates.
The bad news was that customer requirements included offline access scenarios and HTML pages are usually "served" on the Internet and need a network connection. Luckily, I'm used to offline scenarios, and my final proposal was to:
  • use a Content Management System to manage the marketing content, building an easy-to-sync-content architecture,
  • build the iOS/Android/Windows applications to navigate the content in an offline scenario.

Part I. $1 Serverless CMS

Planning to use a CMS system for this project had to take into account the overall system maintenance cost (you can't go a hight-cost solution after planning to simply use PDF files). So I decided to write a low-cost CMS system from scratch using just a couple of S3 buckets, some Lambda routines, and 3 DynamoDB tables (I love AWS) taking care of content synchronization requirements.

AWS total monthly billing was just 1.38 USD for the initial content creation.
From the user perspective, this CMS solution is quite simple and works by using HTML mustaches logic:
								// MUSTACHE example
<div>{{{COLUM_1}}}</div>

Content creators can then easily build every content page by just selecting an HTML template and filling all the mustaches.

Simple to use and cheap ^_^.

Part II. Building the apps to navigate the content offline

Using the designed serverless CMS architecture a customer can easily create and distribute content by simply asking users to open a browser session. However, the customer also required offline access to content and unfortunately, that needs a full-content synchronization process on the mobiles.

Opportunely, we design the system thinking on data synchronization and once the architecture is clear, the code is not too complicated:
We basically need to create some S3 site synchronization routines and take care of setting the appropriate "base" tag on HTML files.
								
[...] 

// get file from S3 bucket
TransferUtilityOpenStreamRequest request = new TransferUtilityOpenStreamRequest()
{ BucketName = _AWSS3BUCKET, Key = FileName }; 

[...]

// replace HTML base tag with local directory.
content = ReplaceHTMLBaseTag(content, "base href='file://'" + directoryPath); 

[...]
								
								
For building the apps (Windows, Android, iOS) I used (for the first time) Xamarin, and I'm happy with that decision. Most of the code is related to S3 content synchronization, and the same code worked fine on every platform.
That's all folks!