Frontend Directory Structure - TISTATechnologies/caseflow GitHub Wiki

File Structure Principles

  • Every component gets its own file(s)
    Except in very limited cases, a given file shouldn't contain more than one component
  • All files related to a given component go in a single folder
    It is common to have multiple files (tests, styles, reducers, stories, etc) that pertain to a given component; these should all be grouped into a single folder matching the component name
  • Group components by module/section
    A flat file structure (e.g. putting everything into a single /components folder) can quickly get cumbersome. Instead, it is helpful to group components by module/function.

Example

└── client
    ├── app
    │   ├── index.js
    │   └── <app_name>
    │       ├── index.js
    │       ├── routes.js
    │       ├── constants.js
    │       ├── reducers.js
    │       ├── components
    │       │   ├── index.js
    │       │   ├── Component1.js
    │       │   └── Component2
    │       │       ├── Component2.js
    │       │       ├── Component2.stories.js
    │       │       ├── Component2.test.js
    │       │       └── Component2.module.scss
    │       └── module1
    │           └── moduleSpecificRoutes.js
    │           └── page1
    │               ├── Page1ContainerComponent.js
    │               ├── routes.js
    │               ├── reducers.js
    │               ├── actions.js
    │               ├── constants.js
    │               └── Page1SpecificPresentationComponent1
    │                   └── Page1SpecificPresentationComponent1.js
    │                   └── Page1SpecificPresentationComponent1.module.scss
    ├── components
    ├── utils
    └── constants
⚠️ **GitHub.com Fallback** ⚠️