Gatsby + Netlify Configuration
The core of this application is the Gatsby environment. We tie together the Sanity and Shopify aspects in our web/ directory. We're using Netlify functions to handle the Shopify accounts as well as running our Shopify Sync function that injects data from Shopify into our Sanity instance.
If you choose to not use Netlify you'll need to configure something yourself or using your own comparable method. The core of this application runs on netlify dev enabling us to use Netlify environment variables. In order to get up and running you need to set the following variables up in your netlify instance:
- SANITY_API_TOKEN
- SANITY_DATASET
- SANITY_PROJECT_ID
- SHOPIFY_GRAPHQL_URL
- SHOPIFY_TOKEN
- SHOPIFY_API_KEY
- SHOPIFY_API_PASSWORD
For those of you not familiar with the Shopify aspect, you'll need to create a private app in your Shopify backend.
Running Netlify Functions locally
We use a proxy in our gatsby-config that allows us to run our lambda functions locally via netlify dev. This allows us to set up webhooks (in the Shopify guide example) that can talk to our local machine. I recommend doing this with ngrok:
- npm install ngrok -g
- ngrok [:PORT] http
- Point Shopify webhook to the above url + /.netlify/functions/shopify-sync
Gatsby + Typescript
Our Gatsby environment is Typed, for anyone not familiar with this I recommend reading up on Typescript, it essentially calls for knowing/handling data in a way that prevents as many breaking changes, and makes our code easier to read and less prone to breaking.
Theming + Magic Tricks
We include a SASS library called magic-tricks in the base theme, this is something with utility classing + basic grid support for flex, inline, and css grid. Totally optional and should be easy enough to remove. The repo also has POSTCSS support which is what it was originally built with.