Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:17Length:2.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Setting Up the Project

In this screen cast we are going to do the initial setup for our project. And to do this I will open up the terminal, I will cd to the desktop and I will make a directory and we will call it contacts and let's cd into contacts. Now I'm going to assume that you already have Node installed, and that you already have Bower installed. These are both pretty standard tools at this point, so I'm going to assume you know how to install these. If you don't have them installed, you can find Node at node.js.org, and Bower at bower.io. If you're not familiar with these tools, here's a quick introduction. No one allows us to run JavaScript on a server basically outside of a browser. And this is what we are going to use for our back end. Bower, is a package manager for front end packages, like Angular or Bootstrap, both of which we're going to be using in this screen cast series. Now Node itself comes with a package manager for back end packages and that is npm. So we use npm to manage our back end packages and Bower to manage our front end packages. So now that we have created our contacts directory, let's go ahead and install the necessary components. So for the server side we're going to use Express, which is a really great server side framework. If you're not familiar with Express, I recently did another course here on tuts+ about Express Framework version 4, and so you'll want to check that out if you haven't use Express before. So to install this let's do npm install express. That'll take a second, but once that is done we can move on to installing our front end packages. Now before we actually install any packages with Bower, let me show you my home directories.bowerrc file. This is the configuration file for bower. By default, Bower will put any packages that it downloads into a, I think it's the bower_components, or maybe it's just called components directory. I've changed that up and I wanna put all the bower packages that I use into a public/lib directory. Now, let's go ahead and do bower install angular, and this is how we can get our Angular library. And that was quick and easy, now let's do bower install bootstrap, and this is how we will get the Twitter bootstrap library. This will download both the necessary CSS, and the necessary JavaScript. All right, and finally, let's create a couple of folders that we're going to use along the way. I'm going to make a public/views directory, and this is where all of our Angular views will go. And then I am also going to make a public/source or src directory. And this is where all of our custom JavaScript is going to go. All right so if I go ahead and open up our project directory here, you can see we have our node modules directory with the express module that we installed for the server end. An then on the front end, we have a public folder. We have lib which includes the Angular and Bootstrap libraries that we installed. Bootstrap requires jQuery, so that was installed as well. And then we have the empty source and view directories which we'll use as things progress. Okay. So now that we have our project set up, we're ready to actually begin writing some code.

Back to the top