How to Do Projects with the Intershop PWA 1.0 and Themes

Johannes Metzner Blog, Code Sharing

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.

Initialization

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

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 *.scss files you need to adapt and fit the reference in your themes style.scss.
  • 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 src/styles.

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.

How to Do Projects with the Intershop PWA 1.0 and Themes
Tagged on: