Directory Structure

A high-level overview of how files are organized in Scandi

When creating an app for the first time, the folder structure of the application will look as follows:

📁  my-app
├── 📄  README.md
├── 📄  composer.json
├── 📁  i18n
├── 📁  magento
|  ├── 📁  etc
|  |  └── 📄  view.xml
|  ├── 📄  registration.php
|  └── 📄  theme.xml
├── 📁  node_modules
├── 📄  package.json
├── 📁  public
├── 📁  src
└── 📄  yarn.lock

There publicand src folders are empty. Do not panic! You will use them to create overrides. The application should compile with them being empty!

ScandiPWA theme src structure

ScandiPWA 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
├── 📁  type # a PropType declarations
├── 📁  util # all utility functions
├── 📄  index.js # application entrypoint
└── 📄  service-worker.js # service worker entrypoint

More information about the structure and contents of these folders:

Building Blocks

CMA (Create Magento App) structure

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.