This was just a small POC showcasing the integration of different tools.
- Google sheet is used as a source of data.
- Google cloud platform is used to access google sheets data.
- Netlify is used to deploy front-end.
- Zapier is used to automate deployments whenever google sheet is updated.
Here’s the google sheet which has simple table of data
And the front-end looks like this
This removes the need of CMS and admin interfaces for tiny apps.
Admin can simply update data in his google sheet and it will trigger a new deployment of front-end app.
After the deployment the new data will reflect on refreshing the web page.
Here is the step by step procedure:
- Create a new project in GCP.
- Enable google sheets api.
- Add a service account to this project.
- Create credentials and get the private keys json.
- Share the sheet with the service account created in step 3 and grant edit access.
- Use any npm module which converts google-sheets to json format.
- I have used gatsby-source-google-sheets.
- Set config using private keys from step 4 to allow accessing data from that sheet.
- Create UI layout and put the fetched data at required places.
Source code is available here.
- Ayush 🙂