Getting data from Airtable using Netlify Functions

Creating a Netlify function that fetches records from Airtable

I created a simple Netlify function which fetches a list of Records from my Airtable API:

const Airtable = require('airtable')
const base = new Airtable({ apiKey: process.env.AT_API_KEY }).base(process.env.AT_BASE)

exports.handler = function (event, context, callback) {
  const allRecords = []
  base(process.env.AT_TABLE)
    .select({
      maxRecords: 100,
      view: 'Grid view'
    })
    .eachPage(
      function page (records, fetchNextPage) {
        records.forEach(function (record) {
          allRecords.push(record._rawJson)
        })
        fetchNextPage()
      },
      function done (err) {
        if (err) {
          callback(err)
        } else {
          const body = JSON.stringify({ records: allRecords })
          const response = {
            statusCode: 200,
            body: body,
            headers: {
              'content-type': 'application/json',
              'cache-control': 'Cache-Control: max-age=300, public'
            }
          }
          callback(null, response)
        }
      }
    )
}

To be able to use the function locally, I run netlify dev so that the function can be tested locally.

Building the layout with Spectre.css

For the user interface, I wanted to try something else than Boostrap. I decided to try out Spectre, a lightweight CSS framework that was rather interesting back when I first worked on this experiment.

Bundling the app with Parcel

While my goto bundler is Webpack, I wanted to try out Parcel. Parcel seemed extremely fast and easy to use.

Shipping the app to Netlify

As usual, I'm hosting this experiment on Netlify.

[dev]
  framework = "parcel"
  command = "npm run dev"
[build]
  publish = "dist"
  command = "npm run build"