File Structure

Last updated 4 months ago

Understanding File Structure

Starting with a good folder structure, especially when working on large applications is very important for the developer experience,

Top-Level Directory Dtructure

.
├── api # Contains the fake backend Api mock data and config
├── assets # Contains app assets (images, icons and custom fonts file)
├── config # Dev tools configuration
├── docs # application documentation
└── src # Application main Source Code directory

Application File Structure

The starterKit use a pattern that group files by domain where all files corresponding to a business domain are in the same directory. Here is the example of SignIn page file structure:

.
├── ...
├── SignIn # Contains all files related to SignIn page UI and logic
│ ├── __tests__ # Unit tests and integration of the display the screen, its components and behavior
│ ├── behavior.js # Screen behavior (actions and action creators ans reducers)
│ ├── index.js # Export default screen component
│ ├── SignIn.js # Main screen UI component
│ ├── selectors.js # Selectors from Redux State
│ └── styles # Styles used for displaying this scree
└── ...

Test File Structure

The automated tests are placed in the tests directory of each screen / component.

Unit and integration tests are placed directly in the tests folder

Snapshots Jest tests (rendering tests of a screen / component against a snapshot) are placed in the snapshots subfolder