The purpose of this document is to give a clear idea to contributors as to how the project filing structure is, and to respond to questions like: Where should I place this kind file? Where is this kind of file?

Backend

Our backend is structured in 3 main part, the models, routes and controllers. All under the src folder. So they are very self explanatory. If I wanted to add a new “sensor” functionality I would probably have 3 files I’d want to add, a model where I define the data structure for the sensor. A controller, where I would define functionality like CRUD or more complex functionality if needed and a route file where I define the HTTP method of the request, the matching route and what controllers or middleware are called.

We also have a middleware folder for functionality that is common to routes.

In short:

src/
  controllers/
    farmController.js
    fieldController.js
    sensorController.js
  models/
    farmModel.js
    fieldModel.js
    sensorModel.js
  routes/
    farmRoute.js
    fieldRoute.js
    sensorRoute.js
  middleware/
    acl/
      authorization.js
      ownership.js

Frontend

For the frontend we can define 3 main parts of the app:

Component Views (Or “Pure” components) which hold no logic and take care of how the view lays out and rendering their props.

Container Components which hold logic, connect to the redux store, dispatch actions and render the Pure components with the required props. Within the container components folders we will also hold sagas, actions and reducers in case there are any of those that relate to that particular component logic.

Finally we have stories, which are tests of our Component views that are rendered through Storybook, a story can import both, pure or container components. In the case of testing isolated views, the most likely scenario is you will be importing pure components, however, when rendering complete flows, you might use container components to test user interactions with the store or view changes on events.

So, the frontend structure should look like this

src/
  Components/ (whis is PURE components or views)
    ExampleComponent/
      ExampleComponent.js
      ExampleComponent.test.js
    ExampleComponent2/
      ExampleComponent2.js
      ExampleComponent2.test.js
  Containers/
    ExampleComponent/
      ExampleComponent.js
      ExampleComponent.test.js
      saga.js
      reducer.js
      actions.js
      constants.js (where action names are)
    ExampleComponent2/ (no saga or reducer example)
      ExampleComponent2.js
      ExampleComponent2.test.js
  stories/
    ExampleComponent/
      ExampleComponent.stories.js

This is by no means written in stone, and there is flexibility around folder structure, if for example, there are a lot of related components, they might belong in a common folder under Components. However, we are enforcing this rules :

Pure Components → Component Folder
Logic Components → Container Folder
Stories → Stories Folder

Litefarm

File Structure

Backend

Frontend