GatsbyReactE-commerceStarter

storefront-gatsby-starter — Gatsby Ecommerce Template

By vendurehq

A Vendure e-commerce storefront starter built with Gatsby, connecting to the Vendure Shop API via an environment variable; cart, checkout, search filtering, and account management remain on the to-do list.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

A Vendure storefront starter built with Gatsby, maintained by the official Vendure organization

02

Connects to the Vendure Shop API via the GATSBY_VENDURE_SHOP_API_URL environment variable, which can point to the demo service or a local service

03

Requires the backend to use bearer tokens; a local Vendure must configure apiOptions.tokenMethod as 'bearer' or ['bearer', 'cookie']

04

The README lists cart, checkout flow, search facet filtering, and customer account management as to-do features

05

MIT licensed, with a Netlify demo site and desktop and mobile homepage screenshots

Template Details

This is a storefront starter for Vendure that uses Gatsby as the front-end framework. The repository is maintained by the official Vendure organization and is MIT licensed. The project specifies the backend Shop API address through the environment variable GATSBY_VENDURE_SHOP_API_URL, which can point either to the official read-only demo service or to a locally running Vendure service. The README explicitly states that the storefront relies on bearer tokens, so a local Vendure service must set apiOptions.tokenMethod to 'bearer' or ['bearer', 'cookie'].

The project is currently at an early stage. The README's To do list includes four unfinished features: cart, checkout flow, search facet filtering, and customer account management, indicating that these core e-commerce capabilities are incomplete in the repository. The repository provides a Netlify demo site and includes desktop and mobile homepage screenshots.

The development workflow is: install dependencies, create .env.development and write the API address, then run npm run develop. The repository was last updated in 2022 and has a low star count. It is suitable as a starting point for understanding how Gatsby and Vendure work together, rather than as a complete store ready for production.

GatsbyE-commerceStarter

Is it right for your project?

Use Cases

  • Start a local Vendure service and connect it to this storefront to verify how Gatsby integrates with the Vendure Shop API
  • Use the official read-only demo API as the backend to quickly inspect the storefront's page structure and visual presentation
  • Use it as a starting point for secondary development, adding cart, checkout, search filtering, or account management features on top of the existing code
  • Learn how a Gatsby project configures an external e-commerce API address through environment variables

Suitable For

  • Developers who want to understand how Gatsby and Vendure work together
  • Teams that need to extend e-commerce features on their own based on MIT-licensed code
  • Developers planning to set up a local Vendure service with a matching front-end storefront

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Run npm install to install dependencies

  2. 2

    Create a .env.development file and write GATSBY_VENDURE_SHOP_API_URL, which can be set to https://readonlydemo.vendure.io/shop-api or a local address such as http://localhost:3000/shop-api

  3. 3

    If using a local Vendure service, set apiOptions.tokenMethod to 'bearer' or ['bearer', 'cookie']; this storefront relies on bearer tokens

  4. 4

    Run npm run develop to start the development environment

  5. 5

    The cart, checkout, search filtering, and account management features listed in the README are not yet implemented; check the current code status before use

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • The code of this version may be used, modified, used commercially, and distributed for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • You must configure the environment variable GATSBY_VENDURE_SHOP_API_URL to point to the Vendure Shop API; the default example points to the official read-only demo service, which is read-only and cannot be used for real transactions.
  • When using a local Vendure service, the backend apiOptions.tokenMethod must be set to 'bearer' or ['bearer','cookie']; this storefront relies on bearer tokens, otherwise it cannot connect properly.
  • Cart, checkout flow, search facet filtering, and customer account management are all on the to-do list and not yet implemented, so it cannot be used as a complete production-ready e-commerce storefront.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's MIT license alone cannot be used to judge them.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

GATSBY_VENDURE_SHOP_API_URL=https://readonlydemo.vendure.io/shop-api

Original README

If using local Vendure server, ensure you have `apiOptions.tokenMethod` set to `'bearer'` or `['bearer', 'cookie']` - this storefront requires bearer tokens.

Original README

* Cart * Checkout flow * Search facet filters * Customer account management

Original README
https://github.com/vendurehq/storefront-gatsby-starter/blob/master/LICENSEhttps://github.com/vendurehq/storefront-gatsby-starter/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 73 / 100
Technologies
Gatsby · React
Website type
E-commerce · Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2022-04-15
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Gatsby as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: fdaf2ae69ee295059a24a8d60de012456fd2c15f9e43fc8170b241b1262ba8b5

2026-10-02T07:36:52.616Z

Source file / repository
# Vendure Gatsby Storefront Starter

A storefront for [Vendure](https://www.vendure.io/) built with [Gatsby](https://www.gatsbyjs.com/).

## To do:

* Cart
* Checkout flow
* Search facet filters
* Customer account management

**Contributions welcome!**

## Development

1. `npm install`
2. Create an `.env.development` file defining the following environment variables:
   ```
   GATSBY_VENDURE_SHOP_API_URL=https://readonlydemo.vendure.io/shop-api
   # or
   GATSBY_VENDURE_SHOP_API_URL=http://localhost:3000/shop-api
   ```
3. If using local Vendure server, ensure you have `apiOptions.tokenMethod` set to `'bearer'` or `['bearer', 'cookie']` - this storefront requires bearer tokens.
4. `npm run develop`
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

gatsby-starter-gcn

gatsby-starter-gcn

A Gatsby starter for building static blogs with Contentful and Netlify.

Gatsby · Blog

gatsby-starter-morning-dew

gatsby-starter-morning-dew

A Gatsby and React blog starter/theme that uses Markdown or MDX for posts, supports multilingual content, dark mode, tag grouping, PWA, and Disqus comments, and is MIT licensed.

Gatsby · Blog

starter-gatsby-blog

starter-gatsby-blog

A community-maintained Gatsby blog starter for Contentful, with a simple content model, npm run setup import, Sync API support, and gatsby-plugin-image. Suitable for quickly building a CMS-driven static blog or learning Gatsby and Headless CMS integration.

Gatsby · 社区

automatic-gatsbyjs-app-landing-page

automatic-gatsbyjs-app-landing-page

A GatsbyJS template for iOS app landing pages, ported from Emil Baehr's Automatic App Landing Page. Configure content in site-config.js without writing HTML or CSS, upload video previews or screenshots, and deploy via Netlify or build for GitHub Pages.

Gatsby · Tool Site

gatsby-starter-cv

gatsby-starter-cv

A Gatsby and React starter for building a responsive personal digital resume. It includes sections for About, Skills, Job experiences, GitHub repositories, and Portfolio, with all personal data configured in data/siteConfig.js.

Gatsby · Starter

clay-theme

clay-theme

Clay is an image-centric Gatsby theme for publishers, portfolios, and photography blogs. It includes PWA support, a preconfigured Netlify/Decap CMS, PurgeCSS, Netlify deployment settings, and Netlify Forms.

Gatsby · Portfolio