Storefront

This guide will help you set up a Saleor storefront in your local environment.

The storefront is a Next.js application. However, the Checkout page can be extracted from any React application as it is designed to be a standalone component.

1

Install project

Clone repo and install dependencies

git clone https://github.com/saleor/storefront.git saleor-storefront
cd saleor-storefront
pnpm i

2

Copy variables

Copy environment variables from .env.example to .env:

cp .env.example .env

3

Add backend URL

Use a free developer account at Saleor Cloud to start quickly with the backend. Alternatively, you can run Saleor locally using Docker.

.env

# Add backend address
# Make sure to add slash at the end:
NEXT_PUBLIC_SALEOR_API_URL=https://{your_domain}.saleor.cloud/graphql/

# Local example
# NEXT_PUBLIC_SALEOR_API_URL=http://localhost:8000/graphql/

4

Run project

Run the development server.

pnpm run dev

5

Edit a product

1. Find any product page in the storefront
2. Go to the dashboard of your Saleor instance and change that product information, such as name, price, or description.
3. Refresh the product page in the storefront; notice that information has not changed due to Next.js caching.
4. Visit http://{your-host}/api/draft (e.g. http://localhost:3000/api/draft) to see the changes. This endpoint bypasses the cache by setting a special next.js cookie.

6

Edit a query

1. In src/graphql folder, find a query you want to edit. For example add field isAvailable to ProductDetails.graphql.
2. Generate types and queries by running the following command:

This would update types and queries for the new field, which we will use in the next step.

pnpm run generate

7

Update product page

1. Open src/app/[channel]/[main]/Products/[slug].tsx file.
2. You will be able now to render the newly added field isAvailable in the product page. Notice that the new field can be autocompleted by Typescript.

src/app/[channel]/[main]/Products/[slug].tsx

export default async function Page(){
    // ...
    const isAvailable = data.product.isAvailable;
    // ...
}

Next steps:

Follow API guide to learn how to interact with the Saleor API.