Creating a serverless web app with Airtable, Glitch, Node.js, Surge.sh & Ember.js

Ben Orozco
Sep 19, 2016 · 4 min read
Image for post
Image for post

TL;DR;

In this post I show how I built a serverless CMS/Blog system based entirely on free and modern PaaS services such as Airtable, Glitch (formerly Gomix, Hyperdev) & Surge.sh.

The end result is:

You can visit it at: http://caring-eggs.surge.sh/

And check out the source code:

Ok, tell me more…

Lately I’ve been thinking how server code is becoming less and less relevant each day, and how everything you needed to code back in the day is now offered as a cloud service at your disposal, such as:

Image for post
Image for post

The remaining parts of your app, the ones that make you “unique”, can be written in isolated & scalable modules in any language and/or framework of choice, which nowadays can be also easily deployed. Such easy-to-deploy, lego-like blocks of functionality can be achieved with modern services such as AWS Lambda, Zeit Now or, what concerns us today, Glitch.

Since I’ve been messing around with these ideas for a while, I decided to see how doable it really was by making a PoC:

A Markdown Blog system, à la Canvas or Medium, with Airtable as Database/CMS

PaaS Architecture

Database/CMS

Image for post
Image for post
https://airtable.com

Alternatives: Fieldbook (see my related post) , Firebase Realtime, etc…

Node.js Proxy/Auth Backend

Image for post
Image for post
https://glitch.com

Alternatives: Heroku, Zeit Now, Parse, Aerobatic, AWS Lambda, etc…

Ember.js SPA Frontend

Image for post
Image for post
https://surge.sh

Alternatives: Zeit Now, Aerobatic, Firebase Hosting, Pagefront, AWS S3, Github Pages, etc…

Designing the Database Structure

Posts table

Image for post
Image for post
https://airtable.com/shrwpGUmpyeRtvpfT

Authors table

Image for post
Image for post
https://airtable.com/shradskAUbxUeUPhf

Comments table

Image for post
Image for post
https://airtable.com/shriWy0K1HdG8qTs9

Crafting a nice client with Ember.js

Image for post
Image for post

I won’t enter into much details here, but I prototyped a blog app with Ember.js, using my own ember-airtable data adapter addon. If you like to learn more make sure to check out my post about it.

I chose Ember.js since it’s the framework we’re currently using at work (Nimbo X), but you can use whatever framework/library you like, say React, Angular, Vue, etc…

Image for post
Image for post

At this point Ember Data’s Adapter is pointing directly to the Airtable API URL while exposing the secret API token to the browser, which is clearly not an ideal situation.

To overcome this issue I decided to pull a trick up the sleeve…

Setting up an HTTP Proxy

Storing credentials in a server is a good idea to keep them private. Also interesting are the possibilities of this architecture, as we can provide other kind of functionalities at this layer, such as Auth (albeit our experiment might become less serverless), but that’s material for a future post.

First I decided to avoid reinventing the wheel and use http-proxy-middleware to redirect request to my Airtable API. The code snippet to accomplish it is:

Source Code Repo: https://github.com/benoror/proxy_blog_xt014_d

Deploying the thingy…

Image for post
Image for post

Deploying an app into Glitch is a breeze, as you can import the code from a Git repository, or edit it directly in the browser:

Image for post
Image for post

Storing secrets

With Glitch you can set .env file with the API secrets, visible only to you:

Image for post
Image for post

Now we can change our Ember adapter accordingly:

Image for post
Image for post

Surge.sh

As usual business, deploying to Surge.sh is a piece of cake. We can see the application running immediately afterwards:

Image for post
Image for post

End Result

Production Deploy

http://caring-eggs.surge.sh/

Image for post
Image for post

Airtable as a CMS

https://airtable.com/shrCOSd1PWB1mDFzG

Image for post
Image for post

The Backlog by Ecaresoft

Sharing our journey: from software development to company…

Thanks to Jorge Camargo

Ben Orozco

Written by

Healthtech Hacker — Full Stack Dev — Open Source & Crypto Enthusiast — CTO 🌳 @HealthTreeNet — Previously @ecaresoft & @Nimbo_X

The Backlog by Ecaresoft

Sharing our journey: from software development to company culture and productivity hacks.

Ben Orozco

Written by

Healthtech Hacker — Full Stack Dev — Open Source & Crypto Enthusiast — CTO 🌳 @HealthTreeNet — Previously @ecaresoft & @Nimbo_X

The Backlog by Ecaresoft

Sharing our journey: from software development to company culture and productivity hacks.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store