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 (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:
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.