Project Structure

Overview

When working on a project, it is important to have a clear project structure. Although the importance of having a project structure may seem insignificant when working on a small project, programmers and engineers will often collaborate with each other to write thousands of lines of code. It would be pure chaos if there were no defined project structure to keep all of your code organized. On top of this, troubleshooting issues and implementing new features would be a nightmare.

Model-View-Controller (MVC)

MVC is a software design pattern used to divide all related program logic into three core logical components: the Model, View, and Controller. The Controller is used to control what View is displayed while using the Model to provide data for the View to render.

This guide will be using this project structure to guide you towards creating a small to medium-sized project. As your project grows larger, you will want to modify and personalize your project to fit your needs.

The project structure that you will be using is shown below:

    |-- project-name              # Root Directory
        |-- src/                  # Application Programming Interfaces
        |   |-- api/              # API Endpoints (URIs)
        |   |   |-- routes/       # API Endpoints (URIs)
        |   |--app.js             # Entry Point File (Express Application)
        |-- node_modules/         # Downloaded Libraries
        |-- .eslintrc.js          # Linting Rules 
        |-- .prettierrc.js        # Code Formatting Rules
        |-- package.json          # Metadata and Package List
        |-- package-lock.json     # Version Number for Dependencies
        |-- server.js             # Server File

Create a Subfolder

Before we get started, you will want to create a folder where you will store your new express project. This folder is called the root folder (also known as root directory or root). In this section, you will be creating the subfolder structure for your project. Folders created inside of the root folder are called subfolders.

Go ahead and up your project in Visual Studio Code.

1. Create a src folder in the root directory:

   mkdir src

Create Nested Subfolders

After you have created your first subfolder in the project, you will add more folders inside the src folder. The newly created folders are called nested subfolders. The newly created folders are called nested subfolders. The source (src) folder will contain all of the files needed to build your project.

1. Navigate into the src folder created above:

   cd src

2. Create an apifolder inside src:

   mkdir api

3. Navigate into the api folder create above:

   cd api

4. Create a routes folder to house all your api endpoints:

   mkdir routes

   Medium to Large Projects

   Here is an example of a medium to larger scaled project. You can choose what kinds of folders will be required for your personalized project.

   |-- project-name
       |-- node_modules/
       |-- public/
       |   |-- images/
       |   |-- js/
       |   |-- styles/
       |-- src/
       |   |-- api/
       |   |   |-- controllers/
       |   |   |-- middleware/
       |   |   |-- routes/
       |   |-- config/
       |   |-- db/
       |   |-- models/
       |   |-- services/
       |   |-- utils/
       |   |-- views/
       |   |-- app.js
       |-- .eslintrc.js
       |-- .prettierrc.js
       |-- package.json
       |-- package-lock.json
   

   Test Subfolder Recommendation

   Another folder that we highly recommend creating is a test subfolder. As your projects get bigger, you will find that testing your applications will make it easier to maintain your code. Although it is not always necessary for smaller projects, it is considered good practice to use test suites to test your application.

Conclusion

By the end of this section, you will have successfully learned the following:

• Why project structure is important.
• How to organize the subfolders.
• How to organize nested subfolders.

Congratulations! 🎉 You can go ahead and click on the link below to learn more about how to configure your project:

Configuration