Saleor Storefront

Overview:

The Saleor Storefront is a GraphQL-powered, PWA, single-page application storefront for Saleor. It is a headless e-commerce storefront built with GraphQL, Apollo Client, React, Next.js, and Typescript. The storefront provides a seamless single-page application experience and includes integration with the Saleor GraphQL API. It also has offline mode capability and supports integration with the Braintree Payment Gateway.

Features:

• Headless e-commerce storefront built with GraphQL, Apollo Client, React, Next.js, and Typescript
• Offline mode (beta)
• Saleor GraphQL API integration
• Single-page application experience
• Braintree Payment Gateway integration

Installation:

To install the Saleor Storefront, follow these steps:

1. Ensure you have Node.js version 14.16 installed.
2. Make sure you have a running instance of Saleor.
3. Set the NEXT_PUBLIC_API_URI environment variable to point to the Saleor GraphQL API. If running Saleor locally with the default settings, the NEXT_PUBLIC_API_URI is set to http://localhost:8000/graphql/. To change it, either create a .env.local file and add it there or set an environment variable using the export command.
4. Clone the repository.
5. Enter the project directory.
6. Install the NPM dependencies.
7. Run the development server.
8. Access the storefront by going to http://localhost:3000.

To compile the app, you can use the following commands:

• To compile the app: npm run build
• To compile the app and export storefront to static HTML: npm run build && npm run export
• To compile the app and run it in production mode with Next.js server: npm run build && npm run start

If you want to run Cypress tests, make sure all dependencies (including Cypress) are installed by running the install command. Set the required environment variables for running the tests properly. If running the storefront from a Docker container, use the provided commands for running tests in headless or UI mode. If running tests against a local development environment, use the appropriate commands.

Summary:

The Saleor Storefront is a GraphQL-powered, PWA, single-page application storefront that provides a seamless shopping experience through its integration with the Saleor GraphQL API. It is built using modern web technologies like GraphQL, Apollo Client, React, Next.js, and Typescript. The storefront offers features such as offline mode, Braintree Payment Gateway integration, and is constantly evolving with updates and improvements. It serves as a demonstration of how Saleor can be used and handles different cases, but it is not ready to be used as a starter.