Using Airtable as a Content BackendGui TalaricoBlockedUnblockFollowFollowingJun 6This article describes how you can use Airtable and Netlify Functions as a datastore for a serverless Vue ApplicationAirtable 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 TemplatesAecStartups.
comA 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 DatasetAt 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:Configure your Airtable API Key on Netlify2.
Create a function to access the API key, call the Airtable API, and return the records3.
Use netlify-lambda to build and deploy the function4.
Call the function from the web app to fetch the records and render the pageThe 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.
Set the API Key on NetlifyCreate an Environment Variable with your API key in the Build & Deploy Settings2.
Creating a Netlify FunctionNetlify 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.
Configure Netlify to Build the FunctionThis 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.
jsonWith these settings in place, Netlify will now build both the Vue application and lambda function.
Use the Lambda Function to Fetch Airtable DataTo 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 storeThis service calls "/.
netlify/fuctions/airtable” to fetch the Airtable RecordsRunning a Local Development ServerTo 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:8080Now let’s use netlify-lambda to serve the function locally, and then use vue.
js to route calls to the lambda server:$ yarn serve:lambda# Runs `netlify-lambda serve lambda` – see packages.
json# Serves the functions on localhost:9000Finally, 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/airtableVue Dev Server Proxy ConfigurationConclusionWhile 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 ????.