Using Airtable as a Content Backend

Jun 7 · 5 min read

This article describes how you can use Airtable and Netlify Functions as a datastore for a serverless Vue Application

Airtable is one of the most flexible tools I know for creating quick relational datasets. It is the perfect combination between the flexibility of Google Sheet and the integrity of relational database, all with an intuitive and enjoyable interface.

You can use Airtable for variety of uses, including: task management, project management, and many more. Checkout these templates for more examples.

Conveniently, Airtable also has an API that can be used to read and create records. While I have used its API to fetch data from python applications, this time I wanted to go further — could I use an Airtable Base content database for a serverless web app?

Airtable Templates

AecStartups.com

A few weeks ago I launched AecStartups.com, a simple Vue web application to publish a list I had of interesting Startups in the AEC industry (Architecture, Engineering and Construction).

Airtable Entries Dataset

At first, all entries were stored in a yaml file within the source code. To add new entries, one would need to open a PR against the repository. This worked reasonably well, but made it difficult for non-developers to contribute.

The solution I developed was to host all entries in an Airtable so new entries could be added by filling out an Airtable form. It would also make it easier to add new columns and manage the available tags.

To render the page, all I would have to do is fetch the entries using the Airtable API.

The problem I encountered here is a common one — calling the API requires an Api Key, and since Airtable doesn’t support custom keys with limited permissions, I would have to expose my personal API key which has full access to all my bases. Not a good idea.

A common solution is to have a proxy backend server store the key and make the API calls. This would be trivial if the website had a dedicated backend, but I wanted to keep this project simple and have it hosted on Netlify with no server to maintain.

Netlify Lambda Functions to the Rescue!

As if Netlify wasn’t amazing enough, they now also offer free Lambda functions. Their setup makes it trivial to deploy simple Node functions.

You can read more details on their documentation, but the basic flow is the following:

  1. Configure your Airtable API Key on Netlify

2. Create a function to access the API key, call the Airtable API, and return the records

3. Use netlify-lambda to build and deploy the function

4. Call the function from the web app to fetch the records and render the page

The details of setting up a Vue app are beyond the scope of this article, but if you are not familiar with the setup just checkout the vue-cli documentation.

1. Set the API Key on Netlify

Create an Environment Variable with your API key in the Build & Deploy Settings

2. Creating a Netlify Function

Netlify has a nice library of community-made functions available here. This made it easier to create my own. Note how the function retrieves the Api Key from the Netlify environment on line 6.

Now we will configure the netlify.toml to specify where the built function will live, and command to run during the build process.

Netlify Config

3. Configure Netlify to Build the Function

This part was a bit confusing at first, although it’s very well documented . We will modify the build command to build both the app and the function together. This was easily achieved by modifying the yarn build and use run-p library to call both commands:

packages.json

With these settings in place, Netlify will now build both the Vue application and lambda function.

4. Use the Lambda Function to Fetch Airtable Data

To call the function and retrieve records, we create a small service using axios.

Note: all Netlify functions are served on .netlify/functions endpoint regardless of where they are store

This service calls "/.netlify/fuctions/airtable” to fetch the Airtable Records

Running a Local Development Server

To run our app locally, we will need to configure the dev server to proxy the function calls a local lambda server.

$ yarn serve
# Runs `vue-cli-service serve` - see packages.json above
# App will be served on localhost:8080

Now let’s use netlify-lambda to serve the function locally, and then use vue.config.js to route calls to the lambda server:

$ yarn serve:lambda
# Runs `netlify-lambda serve lambda` - see packages.json
# Serves the functions on localhost:9000

Finally, we will configure the our dev server so that request sent to localhost:8080/.netlify/functions/airtable are routed to the local lambda server on localhost:9000/airtable

Vue Dev Server Proxy Configuration

Conclusion

While using Airtable as a database might not be a good idea for high traffic or mission critical applications, it is definitely a viable option for quickly getting a project up and running without the overhead of maintaining a dedicated backend server and database deployment.

The full source code is available in the Aec Startups repository on github.


Update: Airtable API Rate Limit

Some users have correctly pointed out that the public Airtable API has a limit of 5 requests per second, per Api key). While this might be a problem for some uses, it can be problematic for a website with with moderate to high traffic.

Luckily, there is an easy solution for this — you can add a proxy cache or CDN service between your function and the Airtable API to cache the requests.

Below is is the basic setup to use AWS Cloudfront as a proxy. The full configuration is available in this issue.

  1. Create an AWS Cloudfront Distribution
  2. Configure the Distribution’s origin to point to your Base:

3. Modify the distribution behavior to pass through query params and headers.

Whitelist: authorization, x-airtable-application-id, x-api-version

Query String Forwarding: Forward all, cache based on all

4. Modify your lambda to use the Cloudfront url instead of Airtable’s:

// airtable.js
...
Airtable.configure({
endPoint: "https://d2j5hchu5g3uxq.cloudfront.net",
...

PS: This is my very first tutorial so if you have any suggestions to improve it please leave a comment below or hit me up on twitter.

Gui Talarico

Written by

I am an an architect-turned-developer who loves Python, Javascript, and Go, in that exact order.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade