Note: This project is a demonstration on how Saleor can be used. It’s not ready to be a starter but rather show how different cases can be handled and could be used as a recipe book. There will be breaking changes and the code is constantly evolving, so use at your own risk.
A GraphQL-powered, PWA, single-page application storefront for Saleor.
See the public demo of Saleor Storefront!
Or launch the demo on a free Heroku instance.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
To run the storefront, you have to set the
NEXT_PUBLIC_API_URI environment variable to point to the Saleor GraphQL API.
If you are running Saleor locally, with the default settings,
NEXT_PUBLIC_API_URI is set to:
To change it, either create a
.env.local file and add it there or set an env variable using
Clone the repository:
git clone https://github.com/mirumee/saleor-storefront.git
Enter the project directory:
To use the official stable release, checkout to a release tag:
$ git checkout 2.11.0
See the list of all releases here: https://github.com/mirumee/saleor-storefront/releases/
If you want to use the latest development version, checkout to the
$ git checkout master
Install NPM dependencies:
Run the development server:
http://localhost:3000 to access the storefront.
To compile the app run:
$ npm run build
To compile the app and export storefront to the static HTML run:
$ npm run build:export
To compile the app and run it in production mode with next server run:
$ npm run build:start
In order to enable Apollo Devtools in the production version, set the environmental variable
If you want to run Cypress tests, make sure that all dependencies (including
Cypress) are installed by running the install command.
Following environment variables are required to be set in order to be able to run tests properly:
API_URI- GraphQL API address.
STATIC_URL- static files destination url, eg. S3 bucket
CYPRESS_USER_NAME- username (email) for
CYPRESS_USER_PASSWORD- for the user mentioned above.
If you are running the Storefront from the perspective of
Docker container, then you can run tests using following commands:
Cypress UI mode:
If you want to run tests against your local development environment then use following commands:
Cypress UI mode:
All new components should follow Atomic Design Guidelines and be placed in
Files structure can be generated using
npm run generate
import Link from "next/link"and use new path you created in paths.ts (make sure to import it)
This project is licensed under the BSD-3-Clause License - see the LICENSE file for details