Folder Structure in a Client-Oriented Web Project

Introduction

Folder structure is one of the first issues that you will need to solve when you start a new client-oriented web project. In order to help maintainability of client-oriented web applications, it is crucial to organize your folders in a way that it will be easy to find your way in the project. As projects become more and more complex, that might help the developer’s orientation.

Folder Structure Options

There are lot of way to organize your folder structure but in my opinion the two main options are:

1. By file types

2. By logical modules

In small projects/SPAs you might take the first approach since it is more convenient and you don’t have a lot of files in the application. 
In medium to big projects/SPAs the second choice is preferable IMHO.

How to Organize the Folders by File Types?

The file types structure is really straight forward. In this option, every file type gets its own folder. For example, if you are using AngularJS, you will place all the controllers in a controllers folder, all your services in a services folder and so on. As I wrote, in a small project it will be easy to locate the files you are searching by their types.

The following figure shows how the folder structure for the AngularJS example might look like:

How to Organize the Folders by Logical Modules?

In order to organize your folder structure by logical modules, first identify the logical modules in your client-side. Examples to logical modules can be search, cart, album and so on. Once you divide your client-side to logical modules, you can start building the folders structure.

In order to explain how you create the folder structure I’ll use the AngularJS example again. Under the app folder, create a folder with the name of a logical module. In each module folder create the following folders:

  • controllers
  • directives
  • filters
  • services
  • views

If there are general purpose objects which relate to more than one logical module, create a common folder and place all these components in that folder. In the common folder you should keep the division you used in each logical module. All the libraries that are used in the application should be stored under app/libs or app/vendor. My suggestion is to divided them to folders with the library name.

The following figure shows how the suggested folder structure might look like:

Summary

You can apply any method to organize your client oriented web project as long as you feel comfortable with it and all your teammate feel the same. In this post I suggested two common ways to get started with a client-oriented web project folder structure.

Show your support

Clapping shows how much you appreciated Gil Fink’s story.