For everyone who might not be aware of this, we have a nice little Dev Community running monthly online meetups. In October Stefan Hauke talked about how to do projects with the Intershop PWA 1.0. This blog article will briefly highlight the key takeaways of that session.
When initially setting up an Intershop PWA-based project, it is not advisable to clone the complete GitHub repository of the Intershop PWA. All that is initially needed is the
master branch that includes the released versions of the PWA. This can be achieved with the following Git command:
git clone --single-branch --branch master --origin intershop https://github.com/intershop/intershop-pwa.git project-pwa
Based on this initial version of the Intershop PWA (the latest release), any project customization can be started. Add a theme for your customization with the following command:
$ node schematics/customization/add --default myproject setting prefix for new components to "custom" setting theme as default for targets
We use the term theme to describe decoupled customization of the standard PWA solution. This is not only limited to colors and shapes (UI) but can also be used for logic (TypeScript) and markup (HTML).
After that we recommend to use the prefix
custom additionally for every new component to identify customized components more easily.
$ ng generate component shared/components/basket/custom-basket-display CREATE src/app/shared/components/basket/custom-basket-display/custom-basket-display.component.ts (275 bytes) ...
Overriding Out-Of-The-Box Artifacts
You can use the
override schematic to introduce custom theme overrides:
Styling changes of existing components should be done by adding overrides in the custom theme folder under
src/styles/themes. To do so, you have several alternatives:
- You can copy only the
*.scssfiles you need to adapt and fit the reference in your themes
- You can start your styling changes by copying the complete set of standard styles to your themes folder right from the start and do all the changes there.
- You can come up with your own preferred way for styling adaptions.
Just putting a brand override file next to the original file in the
src/styles folder will not lead to the expected results. You must not change relevant information in the global style files under
Import Changes from New PWA Release
Importing changes of new releases is done with Git tooling. If you stick to the guidelines in the Customization Guide, the process of updating should run without major problems. You have two options to choose from:
- Range Cherry Pick of New Release Commits
- Rebase Commits of New Release
It really depends on your personal taste which approach to choose here. One person refrains from using “git rebase” (because you might need to force push) the other finds it very useful. Anyhow, all the approaches have one thing in common: git will be cherry picking all “PWA standard” commits. This always means dealing with conflicts that arise but you never lose the commit context.