When creating an app for the first time, the folder structure of the application will look as follows:
📁 my-app
├── 📄 README.md
├── 📄 composer.json # scandipwa dependencies
├── 📁 i18n # translations file
├── 📁 magento # magento related config
| ├── 📁 etc
| | └── 📄 view.xml
| ├── 📄 registration.php
| └── 📄 theme.xml
├── 📁 node_modules # npm dependencies are installed here
├── 📄 package.json # main config file
├── 📁 public
├── 📁 src # where you can put your code
└── 📄 yarn.lock
<aside>
➡️ The public and src folders are empty. Do not panic! You will use them to create overrides. The application should compile with them being empty!
</aside>
src structureScandiPWA theme (aka. your parent theme) has the same root folder structure, but much more files in the src folder. They are structured as follows:
📁 src
├── 📁 component # a place for all components
├── 📁 query # a place for GraphQL queries
├── 📁 route # a place for all root pages
├── 📁 store # a Redux store declarations
├── 📁 style # defines certain global styles
├── 📁 type # a PropType declaroations
├── 📁 util # all utility functions
├── 📄 index.js # application entrypoint
└── 📄 service-worker.js # service worker entrypoint
More information about the structure and contents of these folders:
util DirectorySome util directories, such as Address, Cart, Currency, Menu, Price, and Product, facilitate working with certain kinds of data. Others define commonly-needed functionality:
<aside>
➡️ The util directory in ScandiPWA contains various utility functions that don't belong in the other categories
</aside>
eFor example, the util directory of the ScandiPWA parent theme:
util directory |
Purpose |
|---|---|
| Auth | Responsible for user authentication |
| BrowserDatabase | Convenience methods for accessing the browser's local storage with a simpler API |
| CSS | CSS manipulation. E.g. a utility for setting a CSS variable. This is useful if you want to be able to dynamically edit theme colors from the admin panel. |
| Extensions | Implements a part of the plugin mechanism |
| FormPortalCollector | Works with form data |
| History | Exports a history object using the history library. |
| Media | Utility for working with media URLs |
| Mobile | Functions that help determine the browser device, and whether it is a mobile device. |
| Polyfill | Defines polyfills. Currently includes the smoothscroll polyfill |
| Promise | Implements a cancelable promise |
| Query | Defines tools to work with GraphQL queries |
| Request | Defines tools to work with Requests |
| Url | Tools to work with URLs and parse them. |
style directory<aside> ✅ While each component may have its own style, some styles are globally defined
</aside>
ScandiPWA defines certain global styles. These are defined in SCSS in the style directory, which contains 3 subdirectories, as well as a file that imports all the styles from them.
abstract
The abstract subdirectory includes SCSS definitions that do not directly affect any element. Instead, they define utilities such as media selectors (_media.scss), SCSS variable declarations (_variables.scss) and some generic styles that could be used to style an element (_loader.scss, _button.scss).
base
This directory defines the base styles for various HTML elements, such as tables, links, buttons and lists. In _breakpoints.scss, it defines classes that can be added to elements to easily hide them on some devices (mobile/tablet/desktop)
cms
This directory contains styles for defining the look of various content inserted through a content management system (typically Magento CMS). Currently, it styles various promotion blocks, as well as sliders.
CMA structure is similar to the default Magento folder structure, but with a package.json file in the root directory. For more details, refer to the official CMA guide.
<aside>
✅ When overriding the theme or creating plugins, you are allowed to override util files to add functionality, or to create your own.
</aside>