How Paths and Directories Work
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.
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.
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:
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
There are different ways of defining the path to a given directory
The absolute path is essentially the full path that leads to the working directory, usually starting from a place like
/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:
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 (
..) 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
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.
/bookbag is the current working directory, we have two subdirectories:
/binder. Let's change directories and work from the
science notebook in
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
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!
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.
[Explain computer files, folders, and directories (video)] (youtube.com/watch?v=hUW5MEKDtMM)
Files and Directories (documentation)
File Directories Explained by Getting Dressed in the Morning (article)
HTML FIle Paths (documentation)