Shopware PWA
Read more:
... or visit directly documenation page to see what we offer as a next toolkit to work with:
#shopware-frontends & #shopware-pwa channel)
The only Official Modern Frontend with Progressive Web App features for Shopware 6.
Stay connected
Supported versions of Shopware 6
| Shopware PWA version | Shopware 6 version |
|---|---|
 |
 &  |
 |
 &  |
Documentation
See the official documentation to get started.
You can find there: fundamentials, concepts, migration guides, cookbook, troubleshooting and many many more.
About Shopware:
Shopware 6 is the next generation of open-source eCommerce software based on bleeding-edge technologies powered by Symfony and Vue.js. Focused on an API-first approach, Shopware provides more flexibility and less complexity.
PS: Check StorefrontUI - our UI library for eCommerce.
See it in action
|
Try out our open demo and if you like it first give us some star on Github ★ and then contact us on #shopware-pwa channel @ Vue Storefront Official Discord or via [email protected]. This demo site is connected to Shopware 6. |
Video demo
Join the community on Discord
If you have any questions or ideas feel free to join our discord: https://discord.vuestorefront.io
Quickstart
Before you start testing it locally, try it out on CodeSandbox (including shopware-pwa CLI commands in embedded terminal)
Usage
Create a directory for your project and enter it
mkdir my-shopware-pwa
cd ./my-shopware-pwainitialize project inside the directory
npx @shopware-pwa/cli initIt will ask for the address to your shopware instance, access token, and admin credentials to load plugins. Only the first two are required to start the instance, and default settings will point to our demo instance. Then you can just begin local development by typing:
yarn devYour application will be available on http://localhost:3000.
Now you have complete ShopwarePWA project running locally.
Running on custom Shopware instance
You can simply invoke once again shopware-pwa init and pass data to your custom instance.
Another way of doing this:
- edit file
shopware-pwa.config.jsinside the root of the newly created project - fill it with your data, current example:
module.exports = {
shopwareEndpoint: "https://shopware6-demo.vuestorefront.io",
shopwareAccessToken: "SWSCVJJET0RQAXFNBMTDZTV1OQ",
};- run again
npx @shopware-pwa/cli init(to refresh plugins from instance) and thenyarn dev
Read full instruction in CHEATSHEET.md file.
Running with plugins
If you already have some Shopware PWA plugins installed (like HelloCody plugin example), then you can generate plugin files
npx @shopware-pwa/cli initor, for CLI installed globally
shopware-pwa initWill ask you for username and password for shopware instance, to load installed plugins.
Development and contribution
When you create fork and clone repo, just type yarn start to install node dependencies and run the post-install script that builds and links packages, it also creates a test-project in root catalogue, which is ignored by git. Now, you're ready to develop. You can watch the compilation process by running yarn dev or yarn dev:<package-name>to specify the package that you will be working on. It also builds all necessary packages and
Please, remember to always during development have opened terminal with yarn test --watch command fired.
To see the project, go to ./test-project and run yarn dev. The project will be available in your browser at http://localhost:3000.
You can test changes directly in ignored test-project directory or make changes inside packages (for example default-theme).
A more advanced development guide will be available soon.
Introduction to Shopware-PWA
What is Shopware-PWA?
It is a product, that will allow Shopware users to quickly set up a headless storefront for Shopware 6 eCommerce systems. It will provide all the PWA benefits like app-like experience, on-mobile-installation, service worker caching and more. Shopware-PWA by default will is equipped with a ready-to-go theme built on StorefrontUI.
It is a native integration dedicated for Shopware 6, which means all the Shopware developers will not have to learn new approaches and naming conventions. The goal of the product is to keep the entry threshold as low as possible to make further implementations fast and straightforward. The product will be compatible with the Shopware 6 Plugins Ecosystem.
Tech stack
- Vue Storefront
- Shopware-6-Client based on Axios
- StorefrontUI
- VueJS
- TypeScript
- Jest
- TypeDoc
- VuePress
What is Shopware-6-Client Library?
This is one of the critical components in Shopware-PWA architecture. It is a separate package built for TypeScript community to allow them to work with Shopware 6 API. It provides all the methods to work with SalesChannel-API of Shopware 6. Shopware-PWA uses that package for communication with Shopware backend.
What is StorefrontUI?
It is an excellent design system for the UI layer of your eCommerce systems. Storefront UI is an independent, Vue.js-based, the library of UI components for developers, designers, and agencies striving to build fabulous storefronts.
Read more: https://www.storefrontui.io/.
Caching approach
In Vue Storefront 1, we provided full offline support.
In Shopware-PWA we will go for a service worker caching. That means the product will use Shopware 6 logic through API instead of recreating all of the business logic in the frontend layer.
However, service workers will allow you to browse the catalogue offline.
Software engineering standards
Before starting the implementation of Shopware-PWA, we’ve made an in-depth analysis of all our previous experience, that we earned during the implement of Vue Storefront 1. After gathering all the lessons learnt, we decided to build a tech-driven high-quality product, that will meet the business needs.
Style Guide
We follow official VueJS coding standards - https://vuejs.org/v2/style-guide/.
We also setup Prettier (https://prettier.io/) on git pre-commit hook to automatically format all the code before pushing it to the remote repository. This way, we make sure that all the code’s been written using the same standards. It makes the process of learning the codebase of the product much easier and smoother for all the new developers.
Coding standards
DO
Designing
- Always start working on a task by designing a view (define goals → state → actions).
- Every team member must accept "API interface".
Coding
- Follow official Vue.js style guide https://vuejs.org/v2/style-guide/
- Use Prettier locally.
- Run Linter before commit.
- Always change data by mutations.
- Log interactions with cache as this are hard to debug.
- Use Chrome debugger. Do not leave thousands of console.log().
- Use async awaits instead of promises.
Testing
- Write tests in Jest.
- Create one test file per method.
Tools
- Use Axios for handling HTTP requests.
- Experiment with Live Share for pair programming.
Code review
- At least one core team member must do a code review
Environment
- Always fix failing builds in CI as the top priority.
Committing
- Self-CR before commit. Do not assume others will check your dirty work.
- Delete pointless console.log() before commit.
- Adjust to commit message criteria to auto-generate changelog.
DO NOT
- Do not keep tokens in Vuex.
- Do not use EventBus.
- Do not make direct calls to UI from Vuex.
- Do not create callbacks hell. Do not overuse promises.
Definition of Ready
User Stories
- Simplified User Story format to describe the issue is used - e.g., I want to
<goal>So that<reason>. - Epic (label) is assigned (the epic provides team members with background information and additional business value).
- Acceptance criteria are listed.
- Dependencies are identified, and no external dependencies would block the item from being completed (e.g. missing decision/information/implementation from other departments/development teams or missing tools).
- The user story is small enough to be completed in one sprint.
- The team knows what to do and do not see any blocking points.
Bugs
- The current behaviour is explained.
- Steps to reproduce are explained.
- The expected behaviour is defined.
- If possible, screenshot or gif is provided.
Definition of Done
User Story
- All acceptance criteria are fulfilled.
- Code does not destroy build.
- All unit tests pass.
- Code meets our Coding standards.
- QA verifies the user story.
- The user story is tested on the newest browsers and newest-1 versions.
- At least minimal documentation is created.
Bugs
- Regression unit test is created.
Pipeline & Continuous integration / delivery / deployment
We use CircleCI for continuous integration tool. In the pipeline, we run a few necessary checks, and we check if the unit tests coverage did not decrease and we rebuild the application to verify if the new code does not break up the build.
Test coverage
In the early stages of the development, we decided to keep 100% of unit tests code coverage. That means you will not be surprised by the changed behaviour of the methods in your storefront product. If you break it, you will be notified by the tests.
In the next phases of development, we will make the following decisions associated with testing. We will probably cover critical paths with end2end testing.
Right now, for testing, we use the Jest framework - https://jestjs.io/.
Versioning
Versioning of Shopware-PWA is not dependent on Shopware 6 versioning. We will stick to semantic versioning. As we build the package - all the packages for Shopware 7 (and so on) will have separate versioning.
Change log
We experimentally use conventional commit messages to generate the changelog automatically. https://www.conventionalcommits.org
Checklists
Performance QA Checklist
- Bundle size verified with
webpack-bundle-analyzer. - Size lower than 300 kB for JS loaded immediately.
- Everything that may exceed 300 KB must be lazy-loaded.