Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences.

⚠️ This storefront is deprecated and may not work with the latest versions of Medusa. It's recommended to use the Next.js storefront instead.

1. Create a new Gatsby project

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

  # or

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

2. Install dependencies

  cd my-medusa-storefront
  yarn

3. Link to your backend

In the folder my-medusa-storefront you should have a .env.template file with the following content:

GATSBY_MEDUSA_BACKEND_URL=http://localhost:9000

Before you can start developing your site you first need to copy this file into a new file named .env.development.

mv .env.template .env.development

Per default your Medusa server should be running on localhost:9000, but if you have changed this you will then need to replace GATSBY_MEDUSA_BACKEND_URL with the URL of your Medusa server.

GATSBY_MEDUSA_BACKEND_URL=<link to your server>

4. Start development

You should now be able to start developing your site.

yarn start

5. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-medusa-starter directory in your code editor of choice and edit src/pages/index.jsx. Save your changes and the browser will update in real time!