How to structure your dev. files

Tolu Adesina
2 min readJun 15, 2019

--

More like how I structure my JavaScript project — a structure I think can help you.

A project I worked on.

This post is for any level engineer but especially for beginners like myself. It is good practice to learn how to structure your code into folders right from the early stages of your career, so it doesn’t become something too difficult to learn and put into practice later.

The above structure is what I came up with for my projects after much reading, experimenting with patterns and coding. I created it to make the folder system in my projects neat, and readable.

That being said, I will explain the uses of some folder and what should be inside them and then I will make reference to the structure I have above. I must say, it has worked well for me so far.

It is in no way a standard so feel free to use this as a basis to create your own style, you don’t have to do it as is, and if you like it, you are more than welcome to use as is 😁.

Base Folder (/)

Every other folder is here, also the entry point for your project. The app.js / index.js, .gitignore, package.json files are always at this level.

Basically, you add any root level configuration files here.

/__tests__

This is the folder where all the tests go, you can decide to just save the test files in here directly or you can even go one more level, create a folder for a suite of tests and then add the relevant test files into the folder.

For me it is advisable to place specific tests in groups (folders). For instance, above you will see I have books and users folder under __tests__ folder. You might have noticed the pattern if you look down at the src folder.

You can decide to do without the double underscored before and after tests (__), it’s something I picked up from jests naming convention.

/database

The name says it all, it is the folder that holds my database file — C’est fini.

/helper

This is the folder I keep functions or any script created to help my overall work flow, or system.

/src

This is the folder where all the major work is done, it contains sub folders where necessary and also files of major function (classes) in my project. The index.js / app.js files just require or import the files from this folder and then export. Almost nothing else happens in the index.js / app.js.

Please feel free to add more content to this via private note, we will discuss it and then add to the write up, you will surely be referenced and that way we all learn some more.

Thank you for your time. Happy Hacking! 😁

--

--