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:
1
πŸ“ my-app
2
β”œβ”€β”€ πŸ“„ README.md
3
β”œβ”€β”€ πŸ“„ composer.json
4
β”œβ”€β”€ πŸ“ i18n
5
β”œβ”€β”€ πŸ“ magento
6
| β”œβ”€β”€ πŸ“ etc
7
| | └── πŸ“„ view.xml
8
| β”œβ”€β”€ πŸ“„ registration.php
9
| └── πŸ“„ theme.xml
10
β”œβ”€β”€ πŸ“ node_modules
11
β”œβ”€β”€ πŸ“„ package.json
12
β”œβ”€β”€ πŸ“ public
13
β”œβ”€β”€ πŸ“ src
14
└── πŸ“„ yarn.lock
Copied!
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:
1
πŸ“ src
2
β”œβ”€β”€ πŸ“ component # a place for all components
3
β”œβ”€β”€ πŸ“ query # a place for GraphQL queries
4
β”œβ”€β”€ πŸ“ route # a place for all root pages
5
β”œβ”€β”€ πŸ“ store # a Redux store declarations
6
β”œβ”€β”€ πŸ“ type # a PropType declarations
7
β”œβ”€β”€ πŸ“ util # all utility functions
8
β”œβ”€β”€ πŸ“„ index.js # application entrypoint
9
└── πŸ“„ service-worker.js # service worker entrypoint
Copied!
More information about the structure and contents of these folders:

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.
Last modified 8mo ago