Easily creating a backend for static sites with Airtable

  1. Can we use Airtables RESTful api as a backend, with only frontend? If this is viable, we could develop our site in React — for instance — and directly call any apis in Airtable. This would be a very quick way to build prototypes and MVPs.

The mission

  • It will use only html, javascript and css (scss compiled to css)
  • We are adding it to a Jekyll blog - this one, where this article was written. The same code should work in any other SSG -hugo, ghost, etc. - or platform - plain website, Wordpress. Anywhere that can serve html.
These are the results we are looking for

Subscribe to newsletter: the backend

Creating a new base

A new base, or table, for our data

Adding columns and its types

  • email: Obviously we need to store this
  • Created: A type of column that Airtable populates for us with the time the record was created
  • Notes: This field is not strictly necessary, but we might want it to store extra information. In this case I commented on the fact that the first email is me, and not a subscriber.
The basic information we need for an email subscriber
just select an existing base to generate an api.
The autogenerated api docs

How to get the base id

  • base id , included in the api already.
  • api key

How to get the base id

  • We need to replace the values in airtable_base = 'YOUR_BASE_ID' with our base’s id. You can find it in the url of the generatd rest api, or in any of the example calls:
https://airtable.com/YOUR_BASE_ID/api/docs#curl/table:email_subscribers:create

How to get our api key

Clicking on the asterisks shows the key

Subscribe to newsletter: the frontend

a simple — but insecure — implementation

Html and javascript in susbcribe_to_newsletter.html

Why this is a bad idea

This dialog is the only thing between our data and our foes

How to solve it

Airtable Roles and permissions

  • Owner/Creator
  • Editor
  • Commenter
  • Read-only
Permissions for base access are often not granular enough for direct api usage

The solution

  • GET Lists information in the table. We do not want to enable this or anybody could list the users that have subscribed to our newsletter.
  • POST Creates new records. This is the only one we want to enable for our mission today.
  • PATCH This is A PATCH request will only update the fields you specify, leaving the rest as they were.
  • PUT This is used to update, deleting anything we are not updating. From the Airtable docs:
A PUT request will perform a destructive update and clear all unspecified cell values.
  • limit the accepted http verbs/methods to only POST
  • Hide the name of base and api key

Proxying the requests

  • We are going to send the requests to a server -not to airtable -.
  • That server will query Airtable in the following way:
  • Only the POST method will be allowed - thus, only appending records.
  • base id and api key will be secret, since the server's source code is not public.
  • We will use these values to make a request to Airtable’s api and return to the user.

Option 1: Serverless proxyiing

Option 2: own server, with django

The url we will accept and the view it will use
  • We need to replace the values in airtable_base = 'YOUR_BASE_ID' with our base’s id. You can find it in the url of the generatd rest api, or in any of the example calls:
https://airtable.com/YOUR_BASE_ID/api/docs#curl/table:email_subscribers:create
  • We will also need to set the name of our base (table) here. We chose email_subscribers for ours, as we saw before.
# the name of your table
airtable_table = 'email_subscribers'
  • Finally, we replace the api key for our secret api key:
headers = {
"Authorization": 'Bearer YOUR_API_KEY',
"Content-Type": 'application/json'
}
Clicking on the asterisks shows the key
  • If the server is running in a different domain, we need to add the csrf_exempt annotation of the view’s method. For example, your site is hosted at https://mejuto.co and the server serving the django requests is not under this domain. In my case, it is at https://findthepodcast.com, so you will see my requests will point to https://findthepodcast.com/api/mejutoco/newsletter/

Modified frontend (secure)

Demo

Here is the final result

Network tab

  • Name of base id
  • secret api key

Checking the url

The url that we call

Checking the request parameters

We only send the email to add it to our subscribers

Cherry on top: email notification

When a user subscribes, we will receive an email

Other uses

  • A poll to our audience
  • Any kind of form asking for input (Submitting images, documents, text)
  • Managing attendance, supplies, calendars.
  • As a readonly api to show data managed in Airtable.

Limitations

--

--

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