🏎️ Next.js 13: File-based routing, React 18, Fast Refresh, Image Optimization and more.
🔥 App Router: Uses React Server Components, Data Cache, and async components.
🟦 TypeScript: Strongly typed codebase and GraphQL payloads with strict mode.
🦄 GraphQL best practices: Uses GraphQL Codegen and TypedDocumentString
to reduce boilerplate and bundle size.
🛠️ Customizable CSS: TailwindCSS can be extended or replaced with an alternative CSS solution.
👌 Tooling included: Comes with ESLint, Prettier, Husky, Lint Staged, and Codegen preconfigured.
Important
To quickly get started with the backend, use a free developer account at Saleor Cloud.
Install the latest version of the Saleor CLI by running the following command:
npm i -g @saleor/cli@latest
Set up your local storefront development environment by running the storefront create
command with --url
parameter. It will create a clone, install dependencies, and connect with the provided Saleor instance.
saleor storefront create --url https://{your_cloud_instance}.saleor.cloud
Note
The minimum required version of Saleor CLI is 1.36.0
.
Currently, Saleor Storefront supports payments via the Saleor Adyen App. To install and configure the payment app go to the "Apps" section in the Saleor Dashboard (App Store is only available in Saleor Cloud).
Warning
To configure the Adyen App, you must have an account with Adyen.
Note
Saleor Stripe App integration is a work in progress.
Clone and repo and copy .env.example
to .env
:
cp .env.example .env
Edit .env.local
and set NEXT_PUBLIC_SALEOR_API_URL
to your Saleor GraphQL endpoint URL, e.g., https://example.saleor.cloud/graphql/
.
Then, install pnpm
and run the following command to install all dependencies in the repo:
pnpm i
To start the development server, run the following:
pnpm dev
The app is now running at http://localhost:3000
.
Note
Saleor Storefront is a Next.js app. In case you are not familiar with Next.js, we recommend you to read the Next.js documentation (make sure you've selected "Using App Router" in the sidebar).