Front-end Folder Structure Guidelines

Current suggestion for folder structure is as such:

public

• Contains static files such as index.html, js library files, images, & other assets

src

• Contains the source code for the project.

src/pages

• Contains the page components.

• Each component can layout component as top wrapper based on current active route.

• I usually use ‘pages’ but I have seen some codebases use ‘containers’.

src/components

• Contains reusable components

src/features

• Contains the Redux-Toolkit logic.

src/shared

• Contains shared utils, etc.

src/tests

• Contains the tests.

src/pages/*ComponentName*/ComponentName.js

• Contains the logic for the main component container

src/pages/*ComponentName*/*SubComponentName*/SubComponentName.js

• Contains the logic for any component specific to the parent component

Here’s an example of the current dst-seedcalc folder structure:

According to the CRA Redux template (cra-template-redux/template at master · reduxjs/cra-template-redux), they would have it so that the features folder would have the component relating to the feature in the feature folder. I prefer to keep my components away from Redux logic, but I’m open to the idea.