DEV Community

Discussion on: What was your win this week?

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Just put the "finishing" (Is anything ever truly finished?) touches on a Gridsome starter I've been working on!

Site Preview: gridsomeairtable.netlify.com/

Repo:

GitHub logo 12vanblart / gridsome-airtable-starter

A Gridsome starter leveraging Airtable with a minimalist design.

Netlify Status

Airtable starter for Gridsome

This starter is meant to act as a starting point/example for connecting Gridsome with Airtable.

Note: This Starter utilizes Moment.js for date/times and can be removed from the Event files if not needed (and removed with yarn remove moment)

Install Gridsome CLI tool (if you dont' have it already)

npm install --global @gridsome/cli

Create a Gridsome project

  1. gridsome create my-gridsome-site https://github.com/12vanblart/gridsome-airtable-starter.git to install this starter
  2. cd my-gridsome-site to open the folder
  3. gridsome develop to start a local dev server at http://localhost:8080
  4. Happy coding 🎉💻

Configure your Airtable connection

Inside your gridsome.config.js file, you'll see the following:

// gridsome.config.js //
module.exports = {
  siteName: 'Site Name'
  plugins: [
    {
      use: '@gridsome/source-airtable'
      options: {
        // Add these to a .env file
        // Details on finding these values can be found at:
        // https://gridsome.org/plugins/@gridsome/source-airtable