The Crystallize Gatsby Boilerplate is an open-source, MIT-licensed starter project for launching a headless ecommerce frontend with Gatsby and React, powered by the Crystallize platform's GraphQL-based product information management (PIM) and ecommerce APIs.
What is the Crystallize Gatsby Boilerplate?
The Crystallize Gatsby Boilerplate is a minimal frontend skeleton maintained by Crystallize for building ecommerce experiences with Gatsby and React. It consumes product and content data from Crystallize's headless ecommerce and PIM service through GraphQL, and outputs a static React storefront that can be deployed to Vercel or Netlify. The repository is a subtree split of the CrystallizeAPI/boilerplates monorepo, so bug reports and contributions are handled in the main repository.
Key Features
- Headless ecommerce architecture — Uses Crystallize's GraphQL PIM and ecommerce backend as the data source for all product and content data.
- Gatsby + React frontend — Built with Gatsby for static site generation and React for UI components, positioned as a starting point for fast, rich ecommerce experiences.
- Bootstrapped via Crystallize CLI — One command,
npx @crystallize/cli my-project, walks you through specifying your tenant, choosing the Gatsby.js + React template, and optionally adding Netlify. - Local development server —
npm run devoryarn devstarts a development server at http://localhost:8000. - Structured page templates — The
src/page-templatesdirectory holds the entry pages connected to query results defined ingatsby-node.js. - Documented deployment paths — Includes step-by-step instructions for deploying with Vercel Now (run
now) or linking a Netlify project to your Git repository and pushing to master. - Open source and MIT licensed — Free to use, modify, and extend, with the source code hosted in the Crystallize boilerplates repository.
Who should use the Crystallize Gatsby Boilerplate?
Developers who want a bare-bones Gatsby storefront rather than a full-featured theme should use this boilerplate as the starting point for a Crystallize-backed ecommerce project. It is also suited for teams already using Crystallize as their headless commerce and PIM backend who need a lightweight React frontend, and for developers learning how to wire Gatsby to a GraphQL commerce API.
Use cases
- Ecommerce developers: scaffold a new Crystallize-powered storefront with the CLI, then customize the React components and page templates to match your design.
- Content-driven store owners: use the structured PIM engine to create rich product storytelling pages, which the boilerplate links to via Gatsby page queries.
- Developers evaluating headless commerce: spin up a local Gatsby project connected to a Crystallize tenant to test catalog structure and GraphQL queries before committing to a full build.
How does the Crystallize Gatsby Boilerplate work?
Run npx @crystallize/cli my-project with Node 8 or newer, answer the prompts to specify your tenant and select the Gatsby.js + React template, then start the dev server with npm run dev or yarn dev. The project's src/page-templates folder contains page components that map to GraphQL query results defined in gatsby-node.js. For production, deploy by running now for Vercel or connecting the repository to Netlify.
FAQ
Is the Crystallize Gatsby Boilerplate free?
Yes. The boilerplate is open source and MIT licensed, so you can use it for commercial projects without licensing fees, and you can modify it freely. The Crystallize service itself has its own pricing, which is separate from this starter.
What are the requirements to run it?
You need Node.js version 8 or higher, and a Crystallize tenant to connect to. The CLI command npx @crystallize/cli my-project handles scaffolding, and the dev server runs at http://localhost:8000.
Does the boilerplate include a styling framework?
The readme does not list a styling system. It describes itself as the bare minimum skeleton, focusing on the Gatsby + React frontend and the Crystallize backend integration.
Where can I report issues?
Because this is a subtree split, issues and contributions should be directed to the main repository at https://github.com/CrystallizeAPI/boilerplates.
