Lesson Weekend

Now that our command line is ready to go, and we have our starter kit downloaded, we can begin installing and initializing the core components of our project. This next lesson will walk through initializing several tools our project will use.

Project Dependencies

Consider the following analogy: Imagine you're about to build a wooden box. At the very least you'll need wood, a saw to cut wood into appropriate sizes and shapes, and a hammer and nails to join the wood together. Most of us probably wouldn't create our own saw, hammer, and nails from scratch, right? We could, sure...but those tools are pretty easy to find here in Portland, so we'd likely rely on existing, pre-made versions, right?

Like our analogous hammer, nails, and saw, there are also a wide variety of pre-made tools we can use in our coding projects. We call these dependencies, because our code depends on them. There's a huge variety of different tools like these available. They can do anything from make our websites look nicer, to create complex servers and environments.

We could write our own code to do everything from scratch, sure; just like we could create our own saws, hammers, and nails. But we can complete projects much faster if we rely upon basic pre-made tools, or dependencies. This isn't considered "cheating" or a "shortcut" either. Almost all major, professional websites and pieces of software use dependencies too.

Our project will also use several pre-made dependencies. Let's address how to install these outside tools into our project together.

Managing Dependencies with npm

One of the most common tools for retrieving, installing, and managing a project's dependencies is called npm. This stands for Node Package Manager. Like the name suggests, this utility simply manages and organizes our dependencies.

Installing npm on Your Computer

To get npm in our project, we first need to install Node on our computer. (npm is part of a larger program called Node). To do this, you'll:

  • Visit the Node Downloads Page. Here, select Windows Installer or Macintosh Installer depending on your operating system.

  • This will prompt a file to begin downloading. Once the download is complete, click in the file to run it.

  • This will open an installer. You can select all default settings to install the program. (But, of course, if you'd like it to install in a specific location, you're welcome to tweak the installation settings to your liking!)

  • Next, we'll need to confirm our installation was successful. Return to your command line (the Terminal application for Mac, or Git Bash for Windows). Type the following text directly into the command line, and hit Enter:

node -v

This command asks the computer what version of Node it has. If it responds with any numerical value (such as 6.11.0), it means you've successfully installed Node.

If you receive anything other than a numerical response, ask one of the Epicodus instructors or a fellow workshop attendee to take a look.

Navigating with the Command Line

Now that we've successfully installed Node (which includes the npm utility we'll use in our project), we need to enable npm in our project directory. (the act-w-api-workshop-project-master 'starter kit' you downloaded earlier). This will allow us to use npm to gather and manage those dependencies!

To do this, we first need to navigate to our project directory using the command line. Let's walk through the process together.

When we first prompted you to download the starter kit, we recommended placing this folder in your Desktop for easy access. Do this now, if you haven't already. It'll make following along instructions much easier!

Is your Terminal (or Git Bash, for Windows users) program still open? If not, go ahead and open it. Type the following into the command line prompt, and press enter:

ls

The command line will respond with something that looks pretty familiar! Something kiiiiiinda like the example below (your response will almost guaranteedly differ from example. That's normal):

Public                     Work Stuff
Applications        Library         
Desktop             Movies          
Documents       Music           
Downloads       Pictures

Can you put your finger on why this content seems so familiar? It's a list of the directories (ie: folders) on your own computer! But instead of accessing them through the graphical user interface (like Finder or Windows Explorer) we're accessing them through the command line.

ls stands for list. This command instructs the computer to list all the directories in our current location. (Rad, right? It almost feels like hacking, even if all we're doing is looking at our own folders.)

Now, we actually want to change locations. In our command line, we want to travel from our current location to the act-w-api-workshop-project-master folder that contains our starter kit. We can do this by using yet another command: cd. cd stands for "change directory".

Remember, we placed our starter kit on our Desktop. So, we can enter the following command in our command prompt to navigate from our current location, to the desktop:

cd Desktop

Next, let's run the ls command again:

ls

The command line should respond with a list of all directories and files on your Desktop. It should differ from the list we received when we first ran ls. This is because we're now in a new location!

One of the items in this list should read act-w-api-workshop-project-master. That's our starter kit! Let's run the cd command one more time to navigate from our Desktop into that starter kit folder. Like this:

cd act-w-api-workshop-project-master

Excellent! Just to confirm, let's run ls one more time:

ls

You should see the following. This is the contents of our starter kit, so this means you're in the correct location! Gulpfile.js css img index.html js

Once here, type in the following command, and press Enter:

atom .

This should prompt our Atom text opener to open up all the files and folders of our project. It should look something like this:

starter-kit-in-atom

Go ahead and keep both the Terminal window you navigated to the project directory in, and Atom window with your project open! We'll use them both throughout the rest our workshop.

Note: If the atom . command returns an error, try opening Atom, and selecting File > Add Project Folder and selecting the act-w-api-workshop-project-master folder you've just downloaded. This will produce the same end result as the atom . command. :)

Initializing npm

Now that we're located within our project, we can run commands that will enable our npm utility. Remember, npm is our package manager. It will help us install and manage outside dependencies.

We can initialize npm in our project with the following command:

npm init

The command line will respond with a series of questions about your project. Simply hit Enter for each question to accept the default values.

After running this command and completing each of npm's questions, we should notice a brand new file called package.json has automatically been added to our project directory.

This is known as our project manifest. That may sound fancy and complex, but it's actually fairly straightforward: This is just a big list of all the outside dependencies we've installed in our project. That's it!

Great work so far! We've already learned a lot, and we haven't even started writing code yet! In the next lesson we'll introduce the dependencies we'll use in our project, discuss what each does, and walk through installing them.