Storefront

Clone repo and install dependencies

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

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

cp .env.example .env

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

# 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/

Run the development server.

pnpm run dev

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.

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

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.

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