medusa-store/docs/content/starters/gatsby-medusa-starter.md

Quickstart: Gatsby Storefront

This document guides you to install and set up the Gatsby Storefront for your Medusa Server.

Prerequisites

This document assumes you already have a Medusa server installed. If you don’t, please follow the Quickstart guide for the Medusa server to learn how to do it.

You should also have the Gatsby CLI installed:

npm install gatsby-cli -g

Installation

1. Create a new Gatsby project using the Medusa starter template:

gatsby new my-medusa-storefront https://github.com/medusajs/gatsby-starter-medusa

2. Change to the newly created directory my-medusa-storefront and rename the template environment variable file to use environment variables in development:

mv .env.template .env.development

3. Make sure the Medusa server is running, then run the local Gatsby server:

npm run start

Your Gatsby storefront is now running at localhost:8000!

Development Notes

Customization

To customize the components, pages, and UI of your Gatsby storefront, just edit files under the src directory.

Data Refresh

The Gatsby storefront uses the gatsby-source-medusa plugin to source data from your Medusa server. This data includes products, collections, and regions, and as a result, you can query this data in the storefront starter using GraphQL queries. You can also explore the data in your store on localhost:8000/___graphql.

Because of this, you must rebuild the site every time you update any of this data for it to be reflected in your storefront. We will soon be releasing a new version of the plugin which adds incremental builds, which will improve build times.

Change Port

By default, the Gatsby storefront runs on port 8000.

To change the port, change the develop command in package.json to the following:

"scripts": {
    //other scripts
    "develop": "gatsby develop --port=<PORT>"
}

Make sure to replace <PORT> with the port number you want the storefront to run on. For example, 3000.

Then, on your server, update the environment variable STORE_CORS to the URL with the new port:

STORE_CORS=http://localhost:<PORT>

:::info

For more details about the Store CORS configuration, check out the Configure your Server documentation.

:::

Development Resources

If you’re not familiar with Gatsby, you can learn more about it through the following resources:

• Documentation
• Plugin Library
• Cheat Sheet

Storefront Features

The Gatsby storefront comes with a lot of features out of the box including:

• View all products and manage your cart.

  

• Customer authentication.

  

• Full checkout workflow.

  

• Request swaps and returns using a customer’s order ID and Email.

  

What’s Next 🚀

• Check the Storefront API reference for a full list of REST APIs to use on your storefront.
• Learn how to deploy the Gatsby storefront on Netlify.
• Learn how to add Stripe as a payment provider.