wangzb87 / react-storefront

An open-source storefront in React.js with Next.js. Built for Headless Commerce, using a modern stack with TypeScript, GraphQL, Apollo, and Tailwind CSS.

Next.js Storefront

Next.js Storefront: Your open-source frontend starter pack for building performant e-commerce experiences with Saleor.

Saleor Checkout: Extensible Next.js checkout application and payment integrations powered by Saleor API.

🏠 Website • 📚 Docs • 📰 Blog • 🐦 Twitter

▶️ Demo • 🔎 Explore Code

Motivation

🏎️ modern & fast: The project utilizes all the best practices for e-commerce, like SSR, ISR, and image optimization.

💳 integrated payments: Reduce the purchase friction by taking advantage of integrations with modern payment providers such as Adyen, Mollie or Stripe.

🛠️ easily customizable: TailwindCSS can be easily extended and tweaked, or completely replaced with your favorite CSS solution.

👌 works out-of-the-box: Pre-configured tools built with DX in mind.

Stack

• Next.js
• TypeScript
• GraphQL with Apollo Client
• Tailwind CSS
• Turborepo
• Saleor Checkout

Quickstart

Supercharge your development with our CLI tool and free developer account at Saleor Cloud. To download and install Saleor CLI, run the following command:

npm i -g @saleor/cli

Learn more about Saleor CLI

Set up your local storefront development environment by running the storefront create command with --demo attribute. It will create a fresh clone, install dependencies and create a Saleor instance in the Saleor Cloud. The backend will be set to the newly created Cloud instance.

saleor storefront create --demo

You can also spawn your local storefront development environment without using the --demo attribute. It will create a fresh clone and install dependencies. The default configuration uses the master staging environment of the Saleor Cloud as a backend.

saleor storefront create

---

Development

First install pnpm (an alternative to npm, focused on performance) globally:

npm install -g pnpm@7.11.0

Note

react-storefront requires version 7.11.0 of pnpm to run properly, using newer versions won't work

Note You might also consider using proto for managing your pnpm and node versions across different projects. This repository has a configuration for proto.

Then install dependencies:

pnpm i

To start the servers, run:

pnpm dev

The command will boot up 4 applications running on different ports.

Read more about development in docs/development.md.

If you have any issues with setting up the app please refer to our FAQ

Payment gateways

Saleor App Checkout supports three configurable payment gateways:

For further information, please go to docs/payment/index.md.

Deployment

Read Vercel deployment guide in docs/vercel.md

FAQ

Read FAQ in docs/faq.md