Introduction

No matter what language(s) you might be using right now, you're going to need to understand how to organize your project's file structure and navigate it. These structures are composed of folders (directories) that can hold a combination of files and other folders that may lead to other files and other folders, etc.

Why is this important to learn?

Knowing how to navigate your project's folder structure becomes more essential as they grow in size and complexity. Your files sometimes need to be able to import certain methods and libraries in order for your project to work as expected.

For this post, I'll be using Javascript.

Directories

In order to work with the files and folders in a given project, you need to establish a working directory so that you can work directory with your projects files and folders.

Most operating systems have a root directory, which is the origin or parent directory of all other directories. They can be found in the absolute path. The root directory for Windows is C:\. MacOS is /.

One of the direct descendants of the root directory is the home directory which contains the names one or more users for a given machine. Those users each have a desktop which itself contains a combo of files and folders.

If you have a project folder called book-finder-app (and it's saved to the Desktop), you'd want to change the working directory to that folder.

cd Desktop/book-finder-app

Say we created a new folder named projects, saved it to the Desktop, and then moved book-finder-app to the projects folder. The path to the book-finder-finder-app would look like this:

cd Desktop/projects/book-finder-app

When set up this way, we can no longer go straight from the Desktop to the book finder app. We have to travel through the project directory to get to the book-finder-app.

There are different ways of defining the path to a given directory

Absolute Path

The absolute path is essentially the full path that leads to the working directory, usually starting from a place like C:\ or /Users/, depending on which operating system you're using.

Here is a helpful visualization of an absolute path in tree-form (including the root directory):

Here's what the absolute path to a project looks like on MacOS:

/Users/user/Desktop/projects/weather-app

Relative Path

The relative path is written in the context that the "root directory" is whatever is the current, or working, directory.

The relative path uses a dot-notation (. and ..) refer either to a file in the current directory or a directory one level outside the current directory.

For example, if my current working directory is weather-app, then

Book-bag Example

This example was inspired by this wonderful article on freeCodeCamp's news section and made this diagram to better visualize what a folder structure actually looks like.

I'm going to use a simple analogy of a book-bag to illustrate how a file system would work.

PathsDirectories (1).jpg

Assuming /bookbag is the current working directory, we have two subdirectories: /pencilBox and /binder. Let's change directories and work from the science notebook in /noteBooks:

cd binder/notebooks/science

Assuming some of my science notes pertain to physics and I need to use some function to solve a problem. However, the function I need belongs in the notes in the /math notebook. Since our working directory is now /bookBag/binder/notesBooks/science, we could import the function from the /math notebook's notes.js using the relative path:

import thisFunction from '../math/notes.js'

Now we're able to use a function from another directory in our current working directory. Pretty cool!

Conclusion

When I first started learning to program, I avoided the terminal and command line like the plague. After all, it's just a screen with text and that's it. But while it may seem mundane, knowing just a bit about how your operating system's file system works will take you far in the pursuit of becoming a great developer.