Building Blocks

Learn about the structure of the ScandiPWA codebase

The ScandiPWA theme is separated into several subdirectories with specific responsibilities. This organization is enforced to ensure that the codebase is consistent and easy to navigate.

• component: contains definitions of reusable React components defined throughout the theme

pageComponents

• query: defines a helper class for each GraphQl query that the theme needs

pageGraphQL Queries

• route: like component, but each route is added to the router, ensuring that it appears as a page in the SPA.

pageRoutes

• store: defines the global state of the application using Redux stores

pageRedux Stores

• style: sets the global styles of the application with SCSS

pageGlobal Styles

• type: declares JavaScript data structure types using PropTypes

pageType Checking

• util: utility classes, functions and constants that do not fall in the other categories

pageThe Util Directory

When extending the theme, it is very strongly encouraged to maintain the same structure. Refrain from adding new directories or nesting directories too deeply.