---
title: Gatsby Starter
slug: oms/gatsby-starter
docTags: 
createdAt: 2022-11-08T14:21:27.000Z
---

Chord's Gatsby starter is fully functional Gatsby ecommerce site, powered by the Chord API and Contentful. [The GitHub repo](https://github.com/chordcommerce/gatsby-starter-performance) 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 

:::CodeblockTabs
yarn

```shell
yarn start
```

npm

```shell
npm start
```
:::

This command starts the development server. By default, your site will be available at [http://localhost:8000](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 

:::CodeblockTabs
yarn

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

npm

```shell
npm test             # runs all tests
npm run test:watch   # runs all tests in watch mode
```
:::

This starter uses [Jest](https://jestjs.io/) and [react-testing-library](https://github.com/testing-library/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 

:::CodeblockTabs
yarn

```shell
yarn build
```

npm

```shell
npm run 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 

:::CodeblockTabs
yarn

```shell
yarn serve
```

npm

```shell
npm run 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 

:::CodeblockTabs
yarn

```shell
yarn clean
```

npm

```shell
npm run 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](https://www.google.com/retail/solutions/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](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](https://support.google.com/merchants/topic/6324338?hl=en\&ref_topic=7294998).