> Documentation index: [Saleor](/llms.txt) · [This section](/quickstart/llms.txt)
> Source: https://docs.saleor.io/quickstart/storefront

# Storefront

This guide will help you set up a [Saleor storefront](https://github.com/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

<a id="install-project"></a>

### Install project

Clone repo and install dependencies

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

2

<a id="copy-variables"></a>

### Copy variables

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

```bash
cp .env.example .env
```

3

<a id="add-backend-url"></a>

### Add backend URL

Use a [free test project](/quickstart/cloud.md#signup) at Saleor Cloud to start quickly with the backend. Alternatively, you can [run Saleor locally](/quickstart/running-locally.md) using Docker.

.env

```bash
# 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

<a id="run-project"></a>

### Run project

Run the development server.

```bash
pnpm run dev
```

5

<a id="edit-a-product"></a>

### 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](http://localhost:3000/api/draft)) to see the changes. This endpoint bypasses the cache by setting a [special next.js cookie](https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode).

6

<a id="edit-a-query"></a>

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

```bash
pnpm run generate
```

7

<a id="update-product-page"></a>

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

```jsx

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

<a id="next-steps"></a>

### Next steps:

Follow [API guide](/quickstart/api.md) to learn how to interact with the Saleor API.