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:

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/a irtable” 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.