{"id":13455696,"url":"https://github.com/saleor/storefront","last_synced_at":"2025-06-28T11:08:32.574Z","repository":{"id":37084207,"uuid":"398326371","full_name":"saleor/storefront","owner":"saleor","description":"Saleor Storefront built with React 18, Next.js 14, App Router, TypeScript, GraphQL, and Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-06-23T19:38:39.000Z","size":22574,"stargazers_count":1214,"open_issues_count":29,"forks_count":683,"subscribers_count":34,"default_branch":"main","last_synced_at":"2025-06-27T11:13:56.319Z","etag":null,"topics":["cart","checkout","e-commerce","ecommerce","graphql","hacktoberfest","headless","nextjs","nextjs-commerce","nextjs-storefront","open-source","react","react-storefront","saleor","saleor-checkout","saleor-storefront","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://storefront.saleor.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saleor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-20T15:47:51.000Z","updated_at":"2025-06-27T04:55:05.000Z","dependencies_parsed_at":"2024-01-03T11:29:09.806Z","dependency_job_id":"9a6a5569-e52a-4be6-95e1-7728c7d0c39d","html_url":"https://github.com/saleor/storefront","commit_stats":null,"previous_names":["saleor/storefront","saleor/react-storefront"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/saleor/storefront","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fstorefront","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fstorefront/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fstorefront/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fstorefront/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saleor","download_url":"https://codeload.github.com/saleor/storefront/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fstorefront/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262419810,"owners_count":23308101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cart","checkout","e-commerce","ecommerce","graphql","hacktoberfest","headless","nextjs","nextjs-commerce","nextjs-storefront","open-source","react","react-storefront","saleor","saleor-checkout","saleor-storefront","tailwindcss","typescript"],"created_at":"2024-07-31T08:01:09.540Z","updated_at":"2025-06-28T11:08:32.568Z","avatar_url":"https://github.com/saleor.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","E Commerce"],"sub_categories":[],"readme":"[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsaleor%2Fstorefront\u0026env=NEXT_PUBLIC_SALEOR_API_URL\u0026envDescription=Full%20Saleor%20GraphQL%20endpoint%20URL%2C%20eg%3A%20https%3A%2F%2Fstorefront1.saleor.cloud%2Fgraphql%2F\u0026project-name=my-saleor-storefront\u0026repository-name=my-saleor-storefront\u0026demo-title=Saleor%20Next.js%20Storefront\u0026demo-description=Starter%20pack%20for%20building%20performant%20e-commerce%20experiences%20with%20Saleor.\u0026demo-url=https%3A%2F%2Fstorefront.saleor.io%2F\u0026demo-image=https%3A%2F%2Fstorefront-d5h86wzey-saleorcommerce.vercel.app%2Fopengraph-image.png%3F4db0ee8cf66e90af)\n[![Storefront Demo](https://img.shields.io/badge/VIEW%20DEMO-DFDFDF?style=for-the-badge)](https://storefront.saleor.io)\n\n![Nextjs Storefront](./public/screenshot.png)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eSaleor Next.js Storefront\u003c/h1\u003e\n  Starter pack for building performant e-commerce experiences with \u003ca href=\"https://github.com/saleor/saleor\"\u003eSaleor\u003c/a\u003e.\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://saleor.io/\"\u003eWebsite\u003c/a\u003e\n  \u003cspan\u003e • \u003c/span\u003e\n  \u003ca href=\"https://docs.saleor.io/docs/3.x\"\u003eDocs\u003c/a\u003e\n  \u003cspan\u003e • \u003c/span\u003e\n  \u003ca href=\"https://saleor.io/roadmap\"\u003eRoadmap\u003c/a\u003e\n  \u003cspan\u003e • \u003c/span\u003e\n  \u003ca href=\"https://twitter.com/getsaleor\"\u003eTwitter\u003c/a\u003e\n  \u003cspan\u003e • \u003c/span\u003e\n  \u003ca href=\"https://saleor.io/discord\"\u003eDiscord\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Storefront Roadmap](https://img.shields.io/badge/ROADMAP-EFEFEF?style=for-the-badge)](https://saleor.io/roadmap)\n[![Discord Badge](https://dcbadge.vercel.app/api/server/unUfh24R6d)](https://discord.gg/unUfh24R6d)\n\n\u003c/div\u003e\n\n\u003e [!TIP]\n\u003e Questions or issues? Check our [Discord](https://saleor.io/discord) channel for help.\n\n## Features\n\n- **Next.js 15**: File-based routing, React 19, Fast Refresh, Image Optimization and more.\n- **App Router**: Uses React Server Components, Data Cache, and async components.\n- **TypeScript**: Strongly typed codebase and GraphQL payloads with strict mode.\n- **GraphQL best practices**: Uses GraphQL Codegen and `TypedDocumentString` to reduce boilerplate and bundle size.\n- **Customizable CSS**: TailwindCSS can be extended or replaced with an alternative CSS solution.\n- **Tooling included**: Comes with ESLint, Prettier, Husky, Lint Staged, and Codegen preconfigured.\n\n**Global:**\n\n- Dynamic menu\n- Hamburger menu\n- SEO data\n\n**Checkout:**\n\n- Single page checkout (including login)\n- Portable to other frameworks (doesn't use Next.js components)\n- Adyen integration\n- Stripe integration\n- Customer address book\n- Vouchers and Gift Cards\n\n**Product catalog:**\n\n- Categories\n- Variant selection\n- Product attributes\n- Image optimization\n\n**My account:**\n\n- Order completion\n- Order details\n\n## Quickstart\n\n### 1. Create Saleor backend instance\n\nTo quickly get started with the backend, use a free developer account at [Saleor Cloud](https://cloud.saleor.io/?utm_source=storefront\u0026utm_medium=github).\n\nAlternatively you can [run Saleor locally using docker](https://docs.saleor.io/docs/3.x/setup/docker-compose?utm_source=storefront\u0026utm_medium=github).\n\n### 2. Clone storefront\n\n#### [Option 1] Using Comand line tools\n\nInstall or update to the latest version of the [Saleor CLI](https://docs.saleor.io/docs/3.x/cli) by running the following command:\n\n```bash\nnpm i -g @saleor/cli@latest\n```\n\nClone storefront, install dependencies, and connect with the provided Saleor instance hostname\n\n```bash\nsaleor storefront create --url https://{SALEOR_HOSTNAME}/graphql/\n```\n\n#### [Option 2] Manual install\n\nClone repository:\n\n```bash\ngit clone https://github.com/saleor/storefront.git\n```\n\nCopy environment variables from `.env.example` to `.env`:\n\n```bash\ncp .env.example .env\n```\n\nEdit `.env` and set `NEXT_PUBLIC_SALEOR_API_URL` to your Saleor GraphQL endpoint URL, e.g., `https://example.saleor.cloud/graphql/`.\n\nThen, [install `pnpm`](https://pnpm.io/installation) and run the following command to install all dependencies in the repo:\n\n```bash\npnpm i\n```\n\n## Payments\n\nCurrently, Saleor Storefront supports payments via the [Saleor Adyen App](https://docs.saleor.io/docs/3.x/developer/app-store/apps/adyen). To install and configure the payment app go to the \"Apps\" section in the Saleor Dashboard (App Store is only available in Saleor Cloud).\n\n\u003e WARNING:\n\u003e To configure the Adyen App, you must have an account with [Adyen](https://www.adyen.com/).\n\n## Development\n\nTo start the development server, run the following:\n\n```bash\npnpm dev\n```\n\nThe app is now running at `http://localhost:3000`.\n\n\u003e NOTE:\n\u003e 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](https://nextjs.org/docs) (make sure you've selected \"Using App Router\" in the sidebar).\n\n#### GraphQL queries and mutations:\n\nAfter altering or creating new GraphQL queries in `gql` folder, you need to run the following command to generate types and javascript queries:\n\n```bash\npnpm run generate\n```\n\n### Preview content changes instantly (Draft Mode)\n\nVisit `http://{your-host}/api/draft` to enable cookies that disable caching to preview catalog and content changes instantly. [Learn more about the Draft Mode in Next.js docs.](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleor%2Fstorefront","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaleor%2Fstorefront","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleor%2Fstorefront/lists"}