Saleor Storefront built with React 18, Next.js 14, App Router, TypeScript, GraphQL, and Tailwind CSS.
The Saleor Storefront is a Next.js app that provides a powerful and customizable e-commerce solution. It offers various features such as file-based routing, React 18 support, Fast Refresh, image optimization, and more. It also includes tools like ESLint, Prettier, Husky, Lint Staged, and Codegen preconfigured for easy development. The storefront can be easily integrated with payment providers like Adyen and Stripe, and supports features like customer address book, vouchers and gift cards, and product catalog management. The Storefront is built on a strongly typed codebase using TypeScript and follows GraphQL best practices.
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 install -g saleor-cli
Learn more about Saleor CLI.
Set up your local storefront development environment by running the following command with the --url parameter. It will create a clone, install dependencies, and connect with the provided Saleor instance.
saleor storefront create --url [Saleor GraphQL endpoint URL]
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. Please note that an account with Adyen is required for configuration.
Please clone the repository and copy .env.example to .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 repository:
pnpm install
To start the development server, run the following command:
pnpm run dev
The app will be running at http://localhost:3000.
Please note that Saleor Storefront is a Next.js app. If you are not familiar with Next.js, it is recommended to read the Next.js documentation, specifically the “Using App Router” section.
After altering or creating new GraphQL queries in the gql folder, you need to run the following command to generate types and javascript queries:
pnpm run codegen
To preview content changes instantly in Draft Mode, visit http://{your-host}/api/draft to enable cookies that disable caching. This allows you to preview catalog and content changes instantly. More information about Draft Mode can be found in the Next.js documentation.
The Saleor Storefront is a powerful e-commerce solution built with Next.js. It offers a wide range of features, including file-based routing, React 18 support, image optimization, and customizable CSS. With its TypeScript-based codebase and GraphQL best practices, it provides a robust and efficient development experience. The storefront can be easily installed and configured using the Saleor CLI and offers integration with popular payment providers like Adyen and Stripe. It also includes features for managing a product catalog, customer address book, vouchers and gift cards, and more. Overall, the Saleor Storefront is a comprehensive and flexible solution for building modern e-commerce websites.