Using Airtable as a Content Backend

By Gui Talarico

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

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.

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.
Create an Environment Variable with your API key in the Build & Deploy Settings

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

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.

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

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

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.

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. Also, let me know if you spot any typos — I am a terrible proofreader 🙈.