Best Practice for Component Directory Structure: Flat vs. Nested for Utilities and Example Data?

Squiz Matrix Support
1

Hi everyone,

I’m looking for some clarification on the recommended directory structure for deploying DXP components in Squiz. Is it best practice to keep all files (such as the manifest, main.js, and utility files like html.js and xss.js) in a flat structure at the top level?

Or is it common to place certain files in subfolders, for example, having a utils directory for utility scripts and an example-data directory for files like example.data.json to keep the main directory more organized?

In other words, I’m curious whether the standard practice is to have a single-level directory for all component files or if it is preferable to use nested folders for utilities and example data.

Thanks in advance for your insights!

2

The Squiz Github puts utilities into a dxp/utils subfolder and all the components under src/component-service subfolder

Really, it’s up to you what works best for your platform - making sure your utility files are accessible and can be easily imported into your component files. For ours, we have components/ and utils/ both in the root of the site for now. We might do a little re-organizing, after we can clear out more items related to legacy Matrix components.

For example data, we keep that per component:

component/
├── data/
│   └── example.data.json
├── templates/
│   ├── template1.js
│   ├── template2.js
│   └── template3.js
├── preview.html
├── main.js
├── manifest.json
└── README.md
1 Like