↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

saleor-alt-storefront

eCommerce TypeScript

Alt Storefront

This project aims to provide a more customizable storefront for the Saleor
e-commerce platform. It’s based on Ant Design and Umi in order to make it easy to extend and
customize, and also to reduce the complexity of the codebase. This project is still in its
infancy, but you’re welcome to experiment with it and give feedback and suggestions.

Features

  • Clean minimalistic design, responsive layout
  • Easy theming and customization using LESS variables
  • Configure home page layout by stacking preset sections
  • Integration with MeiliSearch to provide blazing fast search suggestions
  • Support for the brand new Google Ecommerce analytics (GA4)
  • Good performance, small build chunks… Be sure to check out our demo
  • Multi-language support, PWA superpowers, SEO, and more

Stack

To simplify development and to allow for easy customization, we’ve chosen
the following tools.

  • ✨ Ant Design as UI framework
  • 🔥 UmiJS as app framework
  • 🛠 ReactJS as underlying UI technology
  • 🪂 Typescript for safety
  • 🚀 Apollo as GraphQL client
  • 🌊 DvaJS (based on redux) as a supporting data framework

Getting Started

Follow the Getting Started guide on the wiki.
Here are the commands for running and building the project.
Install dependencies

$ yarn

Start the dev server

$ yarn start

Build app bundle. Note that Chrome browser is required.

$ yarn build

Configuration

Refer to the Configuration page on the wiki.

Customization

Refer to Theming and Customizing the Home Page on the wiki.

Translating

All visible UI strings are set up in locale files to enable easy translation of the UI to different languages. Currently, only English and French (Google Translate quality) are available. Other languages will be slowly added after reaching a stable version. When that time comes, we’ll likely need your help with the translations 😉

Development Guide

We’re fans of yarn. We recommend it over npm as it will allow you to have the exact same dependencies as specified in our lock file.
Generate GraphQL types for typescript whenever you modify a GraphQL query or mutation.

$ yarn codegen

Run unit tests to make sure things are in working order.

$ yarn test

Run end-to-end (e2e) tests to make sure the pages are working properly. This requires you to have the Chrome browser installed on your machine.

$ yarn test-e2e

What We’re Working On

Head over to the Projects tab to see what tasks are being planned or worked on. Feel free to join the discussions on specific issues to help us cater to different use cases, or just to share ideas.

Contributing

Like our work? There are several ways you can contribute. You could help tackle some of our issues if you’re a developer. Issues labeled “good first issue” are a good place to start. Be sure to check the current tasks to see if someone’s already working on it before making a PR.
You could also help us by playing with the app and reporting bugs to us, or making suggestions for improvements. Just create an issue.

License

MIT Licensed. We provide no guarantees and take no liabilities. If you’re cool with that, you may use this project, modify it, share it, use commercially, etc. Read the fine details in the LICENSE file.

Getting Help

We haven’t quite set up channels for this yet. Hang in there. For the time being, you may open an issue for help requests and we’ll do our best to respond to them on time.

Support Us

Give us stars, talk about us, …or just send us cat pictures over here in our Nuclear Cat Reactor. They motivate us.



↑