Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours
  • Overview
  • Transcript

7.1 Bower and NPM Workflow

Package managers are an easy way to save on time. Using the Add-on Package Manager, we can install packages from the command line. Being able to install packages and other scripts from the command line, allows us to automate and speed up our work flow. In this lesson, we're gonna create a simple static node server that serves up an HTML file. We can use the node package manager and bower with an atom, because term two gives us access to the console. We'll open up term two, and we'll start by creating our folder structure as well as the files we need. The first file we need will be the server, so we'll touch server.js. Then we'll make our public folder. This is where our index.html file will go, so we'll cd into it. Then we'll create our index.html file. We'll also cd out. With npm we need a packet.json file. To create the package.json file, we'll use npm init. This will take us through a set of options. We can just hit enter and use all the defaults. With our package.json created, we'll install Express, and Express will allow us to easily create a node server. Using --save will allow us to save Express to our package.json file. Now that Express has been installed, we'll open server.js, and we'll start creating our HTTP server. If you're new to node, all of this might be a little confusing at first. But don't worry about the code. Using these package managers, we can demonstrate how to create a faster work flow within atom. The code itself isn't important, so we'll just paste it in. This node server will serve up the index.html file, so let's create something there the page will just say hello world. Within the terminal, we can now say node server. To start the server, we'll type node server. We receive an error about not being able to find the body parser. This is because there's other modules that we don't have installed. We can solve these dependencies by typing npm install we'll add the body parser, the air handler, and the method override. We'll make sure to save these to our package.json. Again, don't worry if you're new to node. We received an error because we actually don't want to provide these commas. With the dependencies installed, we will run the server at port 3000. At local host 3000 we get the whole world served up to us. We will close out of the server and now we will install some power packages. Before we install anything through Bower, we need a Bower RC file. For that we'll touch .bower rc. We'll open up Bower RC and we'll create an object literal and we'll provide a directory property and we'll provide the directory as public /bower_components. What this will do is it will tell Bower where to install our packages. If you don't have bower installed, you can install it through NPM. That's just as simple as npm install -g bower. Once bower is installed we can use it by typing in bower install and then the name of the package but we need a bower.json file before we install any packages. Just like NPM, we can type bower init. The name of this will be simple-node-server, and we'll just enter through the rest of these options for the defaults. Now that we have our bower.json file, let's go and install some packages. We'll type bower install, we'll type dash dash save to save to our bower.json file, and we'll install jquery. We'll find the bower components folder, and within there we see jQuery. Within jquery there's a dis folder, and that's where our jquery source file is. With index.html we can add that script reference. Let's go and serve this up. When the page loads we know jQuery is loaded because there's no 404 errors within the console. Using npm in bower, we've been able to easily set up our project. Essentially what we've done here is we've created a boilerplate. This is a point that we'd want to start out from. And you may think this is faster than your current process but we can make this faster by automating it. In the next lesson we'll take a look in how we can make this process even faster.

Back to the top