This demo uses a Netlify Function as a proxy for the Airtable API. I was inspired to build this after discovering Airtable's API Proxy Demo built with Ruby. I wanted an even simpler way to obfuscate the Airtable API Key on a front-end app, so I built this demo.
I bootstrapped the project with Create React App.
Well, I wanted a dead simple way to use the Airtable API on a client facing React app, but not expose the Airtable API key. A server can act as the middleman (a.k.a proxy) to communicate with the API and your frontend. The server holds the key in an environment variable so it's not exposed to the front-end.
You could setup an instance on Heroku, like Airtable did in their Ruby demo, or setup a Digital Ocean droplet with a Node server, or you could use a Netlify Function! Which is what this demo is all about.
This demo is meant to be used with this Art Gallery template. I recommend adding that template to your own Airtable account and playing around with it.
If you want to use this for a different base, then you'll need to change some configurations in the lambda proxy function and the React app.
The easiest way to get started is to deploy to Netlify! Click the button below.
You'll be prompted for your Airtable API Key and the Airtable Base ID.
Your Airtable API Key can be found at https://airtable.com/account (scroll down to <> API)
The Airtable Base ID can be found at https://airtable.com/api. Select the base that you want to use. Each base has it's own API associated with it, so you'll need this ID. After you click on the base, the ID is in the URL, like this:
https://airtable.com/THIS_IS_YOUR_AIRTABLE_BASE_ID__COPY_ME/api/docs
To install this locally, first clone this repo and install the dependencies
git clone git@github.com:jappareti/netlify-airtable-api-proxy.git
yarn installOr use npm install if you don't have yarn installed.
Create your own .env file with your API key and Airtable Base ID
cp .env.example .envOpen http://localhost:3000 to view it in the browser.
Try toggling the On Display? checkboxes and watch them update in your Airtable base!