JavaScript App Folder Structure - spinningideas/resources GitHub Wiki

Below are thoughts on structuring folders for non-trivial JavaScript Applications

High Level Repository

If your project only has a front end or only has a back end then you do not need folders at top level separating the two otherwise it can be good practice to create two top level folders, one for "client" or front end apps, and one for "server" or backend APIs that your front end needs to call to.

ApplicationArchitecture-MediumLevel-SPA

Client

Here is non-framework specific structure

  • components - contains code in form of components for given framework in use that are referenced by page components
  • pages - contains components that are routed to that act as controllers to present views via referenced child components
  • public - contains assets such as images and css
  • routes - contains routing rules to translate requests by browser to page components
  • services - contains code to communicate with backend services (either internal or external REST APIs)

React

https://github.com/spinningideas/resources/wiki/React-JS-Folder-Structure

Server

  • routes - handles enabling routes that map to given manager methods and enabling authentication
  • managers - contains entity or model managers that handle mapping and using models and repositories to interact with db, also contain/encapsulate business logic
  • models - contains POJO Plain Old JavaScript Object with conditional attribution depending on use of ORM
  • repositories - contains code to interact with db
  • database - contains code to connect to db

Node

Other Approaches