React Storefront

Live demo / Explore and run the code in CodeSandbox

React Storefront is an open-source frontend e-commerce platform from the Saleor team.

• Next.js
• TypeScript
• GraphQL with Apollo Client
• Tailwind CSS

Motivation

modern & fast: Project is focusing on best practices for e-commerce, like: SSR & ISR, image optimization.

easily customizable: TailwindCSS can be easily extended and tweaked, or completely changed to your favorite css solution.

works out-of-the-box: Pre configured tools for DX.

Setup

Please note: this project use the pnpm package manager. To install it, run:

npm install -g pnpm

Install dependencies:

pnpm i

Start the dev server:

npm run dev

Storefront can be now accessed at http://localhost:3001/.

Development

All Apollo hooks are generated by GraphQL Code Generator based on queries located at ./graphql directory.

If you modify GraphQL files and would like to update the hooks, run:

npm run generate

Script will start the GraphQL Code Generator in the watch mode, so changes in the queries will be automatically updated.

Configuration

The .env file contains environment variables used by the application. You can override them by creating .env.local file.

Read more

Debugging using VS Code

The repository contains ready to use VS Code debugger configuration (.vscode/launch.json).

Start server in debug mode

npm run debug

Add breakpoints, and start debugging session in your editor.

VS Code GraphQL Extension

GraphQL extension for VSCode adds syntax highlighting, validation, and language features like go to definition, hover information and autocompletion for graphql projects. This extension also works with queries annotated with gql tag.

VS Marketplace link