How I used Google Drive and Firebase to give my static site a CMS
I released recently a new way to manage website content using Google Drive. Admins can edit and add content to a Google Spreadsheet, and then push the spreadsheet’s content to their site’s API endpoint. My Google Spreadsheet template can be found at drivecms.xyz, as can documentation explaining how it all works.
The Spreadsheet template lets you push content to an API, but what if you wanted to populate a site without needing to create an endpoint capable of handling the data you’re sending its way? For example, what if you required the content to power an Angular SPA or a static HTML page?
Enter Firebase. Firebase is a cloud Mongo database, that very easily (and cheaply — free for most use cases!) lets you send and store data in a secure manner. This is how I combined drivecms.xyz with Firebase to create a CMS for my personal site, mxbry.com.
The following describes how to populate a Firebase database with a PUT request from an instance of the Google Drive CMS
Setting up the Spreadsheet template
To start using the Google Drive CMS you need a copy of the core template, which contains the App Scripts that add publishing options to the Google Spreadsheet.
The easiest way to do this is using the wizard on the front page of drivecms.xyz or by duplicating the master yourself, direct from Google Drive.
Once you have a copy of the spreadsheet in your own Google Drive, customise the CMS tab with column headings that reflect the needs of your site. Here’s a look at my column headings for mxbry.com:
My site is a collection of projects tied to categories (different languages I work in). This is reflected in my Google Spreadsheet, with each project having a title, a deck (short description), slug, list of categories, and more. categories in the above example is a good one to note. The field type has been set as list. Then a comma delimited list of programming languages. When published this is broken in to an array and sent through to our API. Talking of which…
Setting up Firebase
I’m not going to walk through the sign-up process for Firebase in too onerous detail. Sign-up for an account and start a new app from the dashboard. This should give you a URL for your Firebase instance. It will probably look something like:
Securing the Firebase
Before we leave Firebase, let’s talk security. As constructed by default any HTTP request to your new Firebase URL will be able to add, delete, and read data from your database. That’s not ideal!
We’re going to use an authorization token generated in Firebase to secure the connection between our Google Drive CMS and database. Once implemented the only way to modify your database will be by applications or users with access to that token. So, you know, don’t share it.
Firstly, select Security & Rules from the left hand side of the Firebase dashboard. Rules like the following are sufficiently strict to secure our database:
{
“rules”: {
“.read”: true,
“.write”: false
}
}Secondly, you’ll need to generate that access token I mentioned earlier. Select Secrets from the left hand side of the Firebase dashboard and generate an access token. Copy that token.
Linking the CMS to Firebase
The Google Drive Spreadsheet we added to our Drive earlier is yearning to send its data somewhere, so lets give it our Firebase URL as an endpoint. That can be done on the settings tab of the Spreadsheet.
Before we do this, we need to add two things. First off, we need to make a collection in our database. A parent for all of the content we’re about to send its way. For example, let’s call it posts. Each row in our CMS tab will become an item under our posts collection. You don’t need to set anything up on Firebase, the collection will be created when we first send data. Our endpoint now looks something like…
https://myapp.firebaseio.com/posts.json
Next we add to the URL our access token. This can be sent as a URL parameter on our Firebase URL.
https://myapp.firebaseio.com/posts.json?auth=SDwkjasbpy893248slkaAW
Add this URL to our endpoint setting in your Google Drive CMS template:
Sending our Content
One last setting to change. Right at the bottom of our settings tab, there will be a setting for requestMethod. Change this value from POST to PUT. What we doing is a wholesale replace of all objects in our posts collection, and not incrementally adding to them.
Let’s give it a go! At the top of the Spreadsheet there should be a menu option Google Drive CMS. From this select Publish and if all goes well your spreadsheet’s content (assuming you’ve added few rows underneath the headers we set previously) will be populating your Firebase database.
Accessing our Content
Firebase will be full of our content now, but you still need to access it an display it on our site. I’m not going to go indepth on the hows of that here. Firebase maintain loads of great libraries like AngularFire, a JavaScript SDK and ReactFire. There is always Firebase’s REST API to go and fetch the data as JSON for the uber simple.
Bonus!
What’s neat about the Google Drive CMS template is that it lets you use Google Docs in place of a rich text editor. If you fill a cell within your CMS tab with a link to a Google Doc, its content will be converted to HTML and sent through as part of the API call Firebase receives.
