Gatsby Starter

Chord's Gatsby starter is fully functional Gatsby ecommerce site, powered by the Chord API and Contentful. The GitHub repo includes pages, templates, components, and GraphQL queries that work out of the box, but are fully editable so you can build something beautiful!

Here are some common CLI commands that you'll use to work with the starter:

Starting a development server

yarn start

This command starts the development server. By default, your site will be available at http://localhost:8000, but if that port is already in use, you'll be prompted to choose another port. Hot reload is automatically enabled.

Running tests

yarn test             # runs all tests
yarn test:watch       # runs all tests in watch mode

This starter uses Jest and react-testing-library to test React components.

You can run yarn test:watch as you're working on your tests to have the tests re-run automatically as you're editing them.

Building the production site

yarn build

This command will compile the site and get it ready for deployment. It will result in a directory called public that contains your entire static site.

Previewing the production site

yarn serve

You can run this command to serve the production site you've generated with npm run serve, usually for local testing.

Clearing your local cache

yarn clean

You might try this command if your local project seems to have issues around not getting the correct content. It wipes out your local cache.

Product Merchant Feed

This starter generates a product RSS feed that should be compatible with Google Merchant and Facebook Ads. To get your products to show across Google, including Shopping Ads, you must upload a product feed to your Google Merchant Center. We will not cover configuring Google Merchant Center in this documentation. However, here is a few useful things to know about the feed:

• The product feed is generated automatically every time the site is built (via npm run build or yarn build).
• The product feed can be found in your default build folder, under products.rss.
  • Example: ./public/products.rss
• The feed is also being served at the root of your web site (example: http://localhost/products.rss).
• The feed is built using a local plugin located at ./plugins/gatsby-plugin-products-feed, which is configured in ./gatsby-config.js.
• This plugin offers default feed options, and being a local plugin, it can be extended to suit your needs.
• Please refer to the plugin's documentation located at ./plugins/gatsby-plugin-products-feed/README.md for more details.
• Additionally, the documentation covering all Google Product data attributes can be found here.