/gatsby-starter-googlesheets

Primary LanguageCSSMIT LicenseMIT

Gatsby

Gatsby Starter Google Sheets

Kick off your project with this boilerplate. This starter ships with the main Gatsby configuration files along with the gatsby-source-google-spreadsheet you might need to get up and running blazing fast with the blazing fast app generator for React.

🚀 Quick start

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying the default starter.

    # create a new Gatsby site using the starter
gatsby new gatsby-site https://github.com/harshil1712/gatsby-starter-googlesheets

  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd gatsby-site/

  3. Open the source code and start editing!

    Before running the development server you will need to add credentials to the .env file.

    SPREADSHEET_ID=<YOUR_SPREADHEET_ID>
CLIENT_EMAIL=<SERVICE_ACCOUNT_EMAIL>
PRIVATE_KEY=<YOUR_PRIVATE_KEY>

    You can get the SPREADSHEET_ID from the URL of your sheet, https://docs.google.com/spreadsheets/d/<SPREADSHEET_ID>/edit#gid=12345. You will have to create a service account which will provide you with the service account email id and a private key. To know more about creating service account you can visit here. After creating a service account share your sheet with edit permission with the given email id.

    gatsby develop

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open the gatsby-site directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!