The Offbeat Appetite

Tech stack overview:

• Sanity as Headless CMS (Studio repo)
• Next.js as Static Site Generator
• Netlify as Static Site Hosting

🛠 Setup

• install node glolbally
• install yarn glolbally
• set up Sanity, Netlify and Google Analytics
• copy .env.example and rename it to env. Add the correct values for the env variables.
• add the same env variables to Netlify and Travis
• yarn install

📝 Main scripts

yarn dev

Starts the application in development mode (hot-code reloading, error reporting, etc)

yarn data

Pulls data from Sanity (make sure you added env variables both into a .env and into your Netlify project)

yarn static

Builds the app in production mode and exports it as static site ready to be hosted on Netlify.

yarn serve:static

Serves the static site. The application should be compiled with yarn static first.

yarn test

Runs Jest (eslint, unit, intergration). If executed by CI, it will track code coverage. Otherwise, it will start in watch mode.

yarn validate

Performs all types of tests (including static testing) and finally attempts to build the project. Useful for CI

yarn analyze

Builds the app and opens 2 graphs in the browser showing the app's bundle composition.

⚖️ Staging vs Production deploys

The staging and production sites are hosted on Netlify and are both static sites. Both projects are deployed via a CI/CD pipeline triggered by new commits to the master branch on this repo.

There are a few differences between the staging and production site environments:

Feature (via env variables)	Dev (local)	Staging	Production
Google Analytics	staging	staging	prod
Subscribe Form	enabled	disabled	enabled
Sanity Token for drafts	Yes	Yes	No
Canonical URL	prod	staging	prod
Recaptcha	always pass	staging	prod

Furthermore, the staging site is preventing robots from indexing its contents.

👻 Contributors

• Marco Ciampini, developer
• Marie Claire Tonna, site owner