Since the MEAN stack can be used to build all sorts of applications that vary in size and complexity, it is also possible to handle the project structure in various ways. The decision is often directly related to the estimated complexity of your application. Here are the two main project structures – horizontal and vertical.

Horizontal folder structure

A horizontal project structure is based on the division of folders and files by their functional role rather than by the feature they implement, which means that all the application files are placed inside a main application folder that contains an MVC folder structure. This also means that there is a single controllers folder that contains all of the application controllers, a single models folder that contains all of the application models, and so on. An example of the horizontal application structure is as follows:

Let’s review the folder structure:

  • The app folder is where you keep your Express application logic and is divided into the following folders that represent a separation of functionality to comply with the MVC pattern: 
    • The controllers folder is where you keep your Express application controllers
    • The models folder is where you keep your Express application models
    • The routes folder is where you keep your Express application routing middleware
    • The views folder is where you keep your Express application views
  • The config folder is where you keep your Express application configuration files. In time you’ll add more modules to your application and each module will be configured in a dedicated JavaScript file, which is placed inside this folder. Currently, it contains several files and folders, which are as follows: 
    • The env folder is where you’ll keep your Express application environment configuration files
    • The config.js file is where you’ll configure your Express application
    • The express.js file is where you’ll initialize your Express application
  • The public folder is where you keep your static client-side files and is divided into the following folders that represent a separation of functionality to comply with the MVC pattern: 
    • The config folder is where you keep your AngularJS application configuration files
    • The controllers folder is where you keep your AngularJS application controllers
    • The css folder is where you keep your CSS files
    • The directives folder is where you keep your AngularJS application directives
    • The filters folder is where you keep your AngularJS application filters
    • The img folder is where you keep your image files
    • The views folder is where you keep your AngularJS application views
    • The application.js file is where you initialize your AngularJS application
  • The package.json file is the metadata file that helps you to organize your application dependencies.
  • The server.js file is the main file of your Node.js application, and it will load the express.js file as a module to bootstrap your Express application.

As you can see, the horizontal folder structure is very useful for small projects where the number of features is limited, and so files can be conveniently placed inside folders that represent their general roles. Nevertheless, to handle large projects, where you’ll have many files that handle certain features, it might be too simplistic. In that case, each folder could be overloaded with too many files, and you’ll get lost in the chaos. A better approach would be to use a vertical folder structure. 

Vertical folder structure

A vertical project structure is based on the division of folders and files by the feature they implement, which means each feature has its own autonomous folder that contains an MVC folder structure. An example of the vertical application structure is as follows:

As you can see, each feature has its own application-like folder structure. In this example, we have the core feature folder that contains the main application files and the feature folder that include the feature’s files. An example feature would be a user management feature that includes the authentication and authorization logic. To understand this better, let’s review a single feature’s folder structure:

  • The server folder is where you keep your feature’s server logic and is divided into the following folders that represent a separation of functionality to comply with the MVC pattern: The controllers folder is where you keep your feature’s Express controllers
  • The models folder is where you keep your feature’s Express models
  • The routes folder is where you keep your feature’s Express routing middleware
  • The views folder is where you keep your feature’s Express views
  • The config folder is where you keep your feature’s server configuration files 
    • The env folder is where you keep your feature’s environment server configuration files
    • The feature.server.config.js file is where you configure your feature

• The client folder is where you keep your feature client-side files and is divided into the following folders that represent a separation of functionality to comply with the MVC pattern: 

  • The config folder is where you keep your feature’s AngularJS configuration files
  • The controllers folder is where you keep your feature’s AngularJS controllers
  • The css folder is where you keep your feature’s CSS files
  • The components folder is where you keep your Vue app files
  • The filters folder is where you keep your feature’s AngularJS filters
  • The img folder is where you keep your feature’s image files
  • The views folder is where you keep your feature’s AngularJS views
  • The feature1.client.module.js file is where you initialize your feature’s AngularJS module

As you can see, the vertical folder structure is very useful for large projects where the number of features is unlimited and each feature includes a substantial amount of files. It will allow large teams to work together and maintain each feature separately, and it can also be useful to share features between different applications. 

File-naming Conventions

While developing your application, you’ll soon notice that you end up with many files with the same name. The reason is that MEAN applications often have a parallel MVC structure for both the Express and AngularJS components. To understand this issue, take a look at a common vertical feature’s folder structure: 

As you can see, enforcing the folder structure helps you understand each file’s functionality, but it will also cause several files to have the same name. This is because an application’s feature is usually implemented using several JavaScript files, each having a different role. This issue can cause some confusion for the development team, so to solve this, you’ll need to use some sort of a naming convention.

The simplest solution would be to add each file’s functional role to the file name, so a feature controller file will be named feature.controller.js, a feature model file will be named feature.model.js, and so on. However, things get even more complicated when you consider the fact that MEAN applications use JavaScript MVC files for both the Express and AngularJS applications. This means that you’ll often have two files with the same name; for instance, a feature.controller.js file might be an Express controller or an AngularJS controller.

To solve this issue, it is also recommended that you extend files names with their execution destination. A simple approach would be to name our Express controller feature.server. controller.js and our AngularJS controller feature.client.controller.js. This might seem like overkill at first, but you’ll soon discover that it’s quite helpful to quickly identify the role and execution destination of your application files.