Project folder structure

Akash — Mon, 19 Oct 2020 01:33:00 +0000

There are so many ways to create a project folder structure.
You can find many examples of it with a quick search. Different structures solve different use cases. One that seems best to me may not seem adequate to someone else. But at the end of the day, the best folder structure is the one which suits your team’s use-case.

I am going to share the folder structure which we use in our organisation.

- dist
- node_modules
- src
    - assets
    - js
      - app
        - App.jsx
      - modules
      - index.js
    - styles
    - index.html
- webpack
- package.json
- package-lock.json

dist is the location where final production-build code is present. Files under it should not be changed under any circumstances. This folder along with its content is automatically generated by webpack (or some other bundler you are using). This folder is also included the .gitignore so that no one commits this folder to git.
node_modules is the directory where all kinds of dependency packages are being stored. Whenever you run npm install , npm creates this folder. Same as diet there is no need to change the content of any file in this directory.
package.json contains information regarding our project and all the packages used in out project.
Whenever we do npm install, npm searches for package-lock.json (yarn.lock if you are using yarn) to install the dependencies. This file contains a json of all dependencies. This also contains all dependencies for the packages being used in the project. Ex. Suppose we are using a package called A. A may contain B and C as it’s dependencies. package- lock.json has all the information regarding packages and its corresponding dependencies.

Coming to the main part, all logics (or codes) are written in src folder. It contains:

assets
js
styles

As the names imply, assets and styles contains images and css files respectively. The files may vary according to what you are going to use in the project. styles can contain css/scss/sass or combination of those. Same goes for assets.

js directory is further divided into app and modules .

app directory contains all common components, constants, app context or services.

- app
    - components
    - constants
    - context
    - routes
    - services

Same folder structure is followed for each module. Each module can have its own context i.e. Any component has access to app level context and its module level context.

Forem: Akash

Project folder structure