{"id":2158,"date":"2015-08-27T10:17:24","date_gmt":"2015-08-27T10:17:24","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2158"},"modified":"2015-09-08T09:04:45","modified_gmt":"2015-09-08T09:04:45","slug":"how-to-manage-front-end-javascript-and-css-dependencies-with-bower-on-ubuntu-14-04","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/how-to-manage-front-end-javascript-and-css-dependencies-with-bower-on-ubuntu-14-04\/","title":{"rendered":"How to Manage Front-End JavaScript and CSS Dependencies with Bower on Ubuntu 14.04"},"content":{"rendered":"<p>I recently wrote a tutorial for <a href=\"https:\/\/www.digitalocean.com\/?refcode=974c9bc93d77\">DigitalOcean<\/a>\u00a0titled\u00a0How to Manage Front-End JavaScript and CSS Dependencies with Bower on Ubuntu 14.04. You can view the tutorial published on <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-manage-front-end-javascript-and-css-dependencies-with-bower-on-ubuntu-14-04\">their site<\/a>, but since their rules allow it, I am posting it in full here also.<\/p>\n<h3 id=\"introduction\">Introduction<\/h3>\n<p>Long gone are the days when we had to manually search for, download, unpack, and figure out installation directories for our front-end frameworks, libraries, and assets.<\/p>\n<p><a href=\"http:\/\/bower.io\/\">Bower<\/a> is a package manager for front-end modules that are usually comprised of JavaScript and\/or CSS. It lets us easily search for, install, update, or remove these front-end dependencies.<\/p>\n<p>The advantage to using Bower is that you do not have to bundle external dependencies with your project when you distribute it. Bower will take care of the third-party code when you run <code>bower install<\/code> and get those dependencies to the right locations. It also makes the final project package smaller for distribution.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/zlrTjni.png\" alt=\"Bower logo\" \/><\/p>\n<p>In this tutorial you&#8217;ll learn how to install and use Bower on an Ubuntu 14.04 server. We&#8217;ll use to Bower to install Bootstrap and AngularJS and illustrate them running a simple application on an Nginx web server.<\/p>\n<h3 id=\"prerequisites\">Prerequisites<\/h3>\n<p>Before we begin, there are some important steps that you need to complete:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.digitalocean.com\/?refcode=974c9bc93d77\">Droplet<\/a> with a clean Ubuntu 14.04 installation. For this purpose the size of the Droplet really doesn&#8217;t matter, so you can safely go with the smallest version. If you haven&#8217;t yet created your Droplet, you can do so by following the steps in the <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-create-your-first-digitalocean-droplet-virtual-server\">How To Create Your First DigitalOcean Droplet Virtual Server<\/a> tutorial<\/li>\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-connect-to-your-droplet-with-ssh\">Connect to your server with SSH<\/a><\/li>\n<li>Create a user with sudo privileges by following our <a href=\"https:\/\/www.digitalocean.com\/community\/articles\/initial-server-setup-with-ubuntu-14-04\">Ubuntu 14.04 Initial Server Setup<\/a> tutorial. In our example, this user is called <strong>sammy<\/strong><\/li>\n<li>For the web server, we will use <a href=\"http:\/\/nginx.org\/\">Nginx<\/a>, a powerful and efficient web server that has seen wide adoption due to its performance capabilities. Follow the <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-install-nginx-on-ubuntu-14-04-lts\">How To Install Nginx on Ubuntu 14.04 LTS<\/a> tutorial to install Nginx<\/li>\n<\/ul>\n<p>Also, Bower needs <strong>Git<\/strong>, <strong>Node.js<\/strong> and <strong>npm<\/strong>.<\/p>\n<ul>\n<li>Install Git on your server with the following command:<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">sudo apt-get install git<\/pre>\n<p>If you want a more in-depth tutorial about setting up Git, you can take a look at <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-install-git-on-ubuntu-14-04\">How To Install Git on Ubuntu 14.04<\/a>.<\/p>\n<ul>\n<li>Install Node.js on your server with the following command:<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">sudo apt-get install nodejs<\/pre>\n<p>If you want a more in-depth tutorial about setting up Node.js, you can take a look at <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-install-node-js-on-an-ubuntu-14-04-server\">How To Install Node.js on an Ubuntu 14.04 server<\/a>.<\/p>\n<ul>\n<li>Install npm on your server with the following command:<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">sudo apt-get install npm<\/pre>\n<p>If you want a more in-depth tutorial about setting up npm, you can take a look at <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-use-npm-to-manage-node-js-packages-on-a-linux-server\">How To Use npm to Manage Node.js Packages on a Linux Server<\/a>.<\/p>\n<ul>\n<li>Since we installed Node.js from a package manager your binary may be called <strong>nodejs<\/strong> instead of <strong>node<\/strong>. Since Git relies on the fact that your Node.js binary will be called <strong>node<\/strong>, you just need to symlink it like so:<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">sudo ln -s \/usr\/bin\/nodejs \/usr\/bin\/node<\/pre>\n<p>You can read more about this issue on <a href=\"https:\/\/github.com\/joyent\/node\/issues\/3911\">Github<\/a>, and you can learn more about the symlinking from <a href=\"http:\/\/unix.stackexchange.com\/questions\/68368\/what-is-symlinking-and-how-can-learn-i-how-to-to-do-this\">this StackExchange question<\/a>.<\/p>\n<p>When you are finished with these steps, you can continue with this guide.<\/p>\n<h2 id=\"step-1-installing-bower\">Step 1 \u2014 Installing Bower<\/h2>\n<p>Install Bower using npm:<\/p>\n<pre class=\"lang:default decode:true \">sudo npm install bower -g<\/pre>\n<p>The <strong>-g<\/strong> switch is used to install Bower globally on your system.<\/p>\n<p>Now that we have Bower installed we will continue with a practical example. In the next steps, we&#8217;ll<\/p>\n<ul>\n<li>Make a new Bower project<\/li>\n<li>Install Bootstrap with Bower<\/li>\n<li>Install AngularJS with Bower<\/li>\n<li>Serve the website via Nginx<\/li>\n<\/ul>\n<p>At the end of this tutorial, in the <strong>Bower Reference<\/strong> section, you can read more about each of the Bower options.<\/p>\n<h2 id=\"step-2-preparing-project-directory\">Step 2 \u2014 Preparing Project Directory<\/h2>\n<p>We&#8217;ll create our Bower project in the <code>\/usr\/share\/nginx\/html<\/code> directory so we can easily access our application as a website. This is Nginx&#8217;s default document root directory.<\/p>\n<p>So, we need to change to this directory with the <code>cd<\/code> command:<\/p>\n<pre class=\"lang:default decode:true\">cd \/usr\/share\/nginx\/html<\/pre>\n<p>By default, Nginx on Ubuntu 14.04 has one <em>server block<\/em> enabled by default. It is configured to serve documents out of the aforementioned <code>\/usr\/share\/nginx\/html<\/code> directory.<\/p>\n<p>In our quick example we&#8217;ll use the default site.<\/p>\n<p>For a production application, though, you should probably <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-14-04-lts\">set up a server block<\/a> for your specific domain.<\/p>\n<p>Before we can do any work in the <code>\/usr\/share\/nginx\/html<\/code> directory, we have to give our sudo user rights to it.<\/p>\n<p>Change the ownership of the directory with the following command:<\/p>\n<pre class=\"lang:default decode:true\">sudo chown -R sammy:sammy \/usr\/share\/nginx\/html\/<\/pre>\n<p>Instead of <strong>sammy<\/strong> you would use your own sudo user which you created in the prerequisite <a href=\"https:\/\/www.digitalocean.com\/community\/articles\/initial-server-setup-with-ubuntu-14-04\">Ubuntu 14.04 Initial Server Setup<\/a> tutorial.<\/p>\n<h2 id=\"step-3-initializing-bower-project\">Step 3 \u2014 Initializing Bower Project<\/h2>\n<p>Now, inside the directory <code>\/usr\/share\/nginx\/html<\/code>, execute the following command to make a new Bower project:<\/p>\n<pre class=\"lang:default decode:true\">bower init<\/pre>\n<p>You will be asked a series of questions. For this quick example project you can just press <code>ENTER<\/code> to select all the defaults.<\/p>\n<p>See a detailed breakdown of the answers below, marked in <span style=\"color: #ff0000;\">red<\/span>:<\/p>\n<pre class=\"lang:default decode:true\">? May bower anonymously report usage statistics to improve the tool over time? Yes\r\n? name: BowerTest\r\n? version: 0.0.0\r\n? description: Testing Bower\r\n? main file: index.html\r\n? what types of modules does this package expose? Just press ENTER\r\n? keywords: bower angular bootstrap\r\n? authors: Nikola Bre\u017enjak\r\n? license: MIT\r\n? homepage: http:\/\/bower.example.com\r\n? set currently installed components as dependencies? Yes\r\n? add commonly ignored files to ignore list? Yes\r\n? would you like to mark this package as private which prevents it from being accidentally published to the registry? No\r\n\r\n{\r\n  name: 'BowerTest',\r\n  version: '0.0.0',\r\n  description: 'Testing Bower',\r\n  main: 'index.html',\r\n  keywords: [\r\n    'bower',\r\n    'angular',\r\n    'bootstrap'\r\n  ],\r\n  authors: [\r\n    'Nikola Bre\u017enjak'\r\n  ],\r\n  license: 'MIT',\r\n  homepage: 'http:\/\/bower.example.com',\r\n  ignore: [\r\n    '**\/.*',\r\n    'node_modules',\r\n    'bower_components',\r\n    'test',\r\n    'tests'\r\n  ]\r\n}\r\n\r\n? Looks good? Yes<\/pre>\n<p>A few notes about these options:<\/p>\n<ul>\n<li>Just to revisit the note from before, you don&#8217;t need to enter any of the options when running the <code>bower init<\/code> command for this example project<\/li>\n<li>In the <code>What types of modules does this package expose?<\/code> question, you can select or deselect the options by pressing <code>SPACEBAR<\/code>. Pressing <code>ENTER<\/code> confirms the selection. By default none are selected, and for this simple example we don&#8217;t need any of them. You can read more about them from the <a href=\"https:\/\/github.com\/bower\/bower\/issues\/1229\">official GitHub issue<\/a><\/li>\n<li>For a production project, you would want to fill out the <code>authors<\/code> field and other settings so that other people know more about the project<\/li>\n<li>The <code>homepage<\/code> setting is used only to show your own website, and has nothing to do with the settings of the actual server where you&#8217;re running this application<\/li>\n<\/ul>\n<p>Now you should have a <code>bower.json<\/code> file in your working directory (<code>\/usr\/share\/nginx\/html\/<\/code>) with the JSON content shown in the output above.<\/p>\n<h2 id=\"step-4-installing-angularjs\">Step 4 \u2014 Installing AngularJS<\/h2>\n<p>AngularJS is a JavaScript framework for web applications. To install AngularJS with Bower, run the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower install angularjs --save<\/pre>\n<p>You can see the output of the command below:<\/p>\n<pre class=\"lang:default decode:true\">bower angularjs#*               cached git:\/\/github.com\/angular\/bower-angular.git#1.3.14\r\nbower angularjs#*             validate 1.3.14 against git:\/\/github.com\/angular\/bower-angular.git#*\r\nbower angularjs#*                  new version for git:\/\/github.com\/angular\/bower-angular.git#*\r\nbower angularjs#*              resolve git:\/\/github.com\/angular\/bower-angular.git#*\r\nbower angularjs#*             download https:\/\/github.com\/angular\/bower-angular\/archive\/v1.4.3.tar.gz\r\nbower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20%\r\nbower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24%\r\nbower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98%\r\nbower angularjs#*              extract archive.tar.gz\r\nbower angularjs#*             resolved git:\/\/github.com\/angular\/bower-angular.git#1.4.3\r\nbower angularjs#~1.4.3         install angularjs#1.4.3\r\n\r\nangularjs#1.4.3 bower_components\/angularjs<\/pre>\n<p>If you get slightly different output than the one shown above, that can be due to the fact that Bower caches packages for faster download and your package was installed from cache.<\/p>\n<p>We now have AngularJS installed in the <code>bower_components\/angular<\/code> directory (or possibly the <code>bower_components\/angularjs<\/code>) directory, with the path to the minified version (which we will be using) being: <code>bower_components\/angular\/angular.min.js<\/code>.<\/p>\n<h2 id=\"step-5-installing-bootstrap\">Step 5 \u2014 Installing Bootstrap<\/h2>\n<p>Bootstrap is a CSS framework. To install Bootstrap with Bower, run the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower install bootstrap --save<\/pre>\n<p>You can see the output of the command below:<\/p>\n<pre class=\"lang:default decode:true\">bower angularjs#~1.4.3          cached git:\/\/github.com\/angular\/bower-angular.git#1.4.3\r\nbower angularjs#~1.4.3        validate 1.4.3 against git:\/\/github.com\/angular\/bower-angular.git#~1.4.3\r\nbower bootstrap#*               cached git:\/\/github.com\/twbs\/bootstrap.git#3.3.5\r\nbower bootstrap#*             validate 3.3.5 against git:\/\/github.com\/twbs\/bootstrap.git#*\r\nbower jquery#&gt;= 1.9.1           cached git:\/\/github.com\/jquery\/jquery.git#2.1.4\r\nbower jquery#&gt;= 1.9.1         validate 2.1.4 against git:\/\/github.com\/jquery\/jquery.git#&gt;= 1.9.1\r\nbower angularjs#~1.4.3         install angularjs#1.4.3\r\nbower bootstrap#~3.3.5         install bootstrap#3.3.5\r\nbower jquery#&gt;= 1.9.1          install jquery#2.1.4\r\n\r\nangularjs#1.4.3 js\/angularjs\r\n\r\nbootstrap#3.3.5 js\/bootstrap\r\n\u2514\u2500\u2500 jquery#2.1.4\r\n\r\njquery#2.1.4 js\/jquery<\/pre>\n<p>We now have Bootstrap installed in the <code>bower_components\/bootstrap<\/code> directory with the path to the minified version (which we will be using) being: <code>bower_components\/bootstrap\/dist\/js\/bootstrap.min.js<\/code> for the JavaScript file and <code>bower_components\/bootstrap\/dist\/css\/bootstrap.min.css<\/code> for the CSS file.<\/p>\n<p>Notice how jQuery was installed too, as it&#8217;s a dependency required by Bootstrap.<\/p>\n<h2 id=\"step-6-creating-a-hello-world-application\">Step 6 \u2014 Creating a Hello World Application<\/h2>\n<p>Inside the <code>\/usr\/share\/nginx\/html\/<\/code> folder edit, let&#8217;s replace the default <code>index.html<\/code> file with our own content:<\/p>\n<pre class=\"lang:default decode:true\">mv \/usr\/share\/nginx\/html\/index.html \/usr\/share\/nginx\/html\/index.html.orig<\/pre>\n<p>Open the file for editing:<\/p>\n<pre class=\"lang:default decode:true\">vim \/usr\/share\/nginx\/html\/index.html<\/pre>\n<p>You can enter this content exactly:<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n\r\n    &lt;title&gt;Bootstrap 101 Template&lt;\/title&gt;\r\n\r\n    &lt;!-- Bootstrap --&gt;\r\n    &lt;link href=\"bower_components\/bootstrap\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div class=\"container\" ng-app&gt;\r\n        &lt;form class=\"form-signin\"&gt;\r\n            &lt;h2 class=\"form-signin-heading\"&gt;What you type here:&lt;\/h2&gt;\r\n\r\n            &lt;input ng-model=\"data.input\" type=\"text\" class=\"form-control\" autofocus&gt;\r\n\r\n            &lt;h2 class=\"form-signin-heading\"&gt;It will also be shown below:&lt;\/h2&gt;\r\n            &lt;input type=\"text\" class=\"sr-only\"&gt;{{data.input}}&lt;\/label&gt;\r\n        &lt;\/form&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;\r\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;\r\n    &lt;script src=\"bower_components\/bootstrap\/dist\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;script src=\"bower_components\/angular\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<blockquote><p>Depending on how Bower installs AngularJS on your system, the path to the script might be <code>bower_components\/<span style=\"color: #ff0000;\">angularjs<\/span>\/angular.min.js<\/code> rather than <code>bower_components\/angular\/angular.min.js<\/code>.<\/p><\/blockquote>\n<p>Now we have a simple Hello World type example application using Boostrap with AngularJS, running on Nginx.<\/p>\n<p>(This is basically the example <a href=\"http:\/\/getbootstrap.com\/examples\/signin\/\">Signin Template from Bootstrap<\/a> where the content inside the <code>&lt;body&gt;<\/code> tag has a simple form with two input fields.)<\/p>\n<p>To view this example app, you should navigate in your browser to the IP of your Droplet; something like <code>http:\/\/<span style=\"color: #ff0000;\">your_server_ip<\/span>\/<\/code>. You should see something like the image below:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/O3wFyJW.png?1\" alt=\"Imgur\" \/><\/p>\n<p>If you type something in the text box field, the exact same content will appear below, using the <a href=\"https:\/\/docs.angularjs.org\/tutorial\/step_04\">AngularJS two-way data binding<\/a>.<\/p>\n<p>If you don&#8217;t get any output, try restarting Nginx with the following command:<\/p>\n<pre class=\"lang:default decode:true\">sudo service nginx restart<\/pre>\n<p>If you want to learn more about AngularJS, visit the official documentation at <a href=\"https:\/\/docs.angularjs.org\/tutorial\">https:\/\/docs.angularjs.org\/tutorial<\/a>. If you wish to learn more about Bootstrap, visit the official documentation at <a href=\"http:\/\/getbootstrap.com\/getting-started\/\">http:\/\/getbootstrap.com\/getting-started\/<\/a>.<\/p>\n<p>If you want to be able to access your web server via a domain name, instead of its public IP address, purchase a domain name then follow these tutorials:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-set-up-a-host-name-with-digitalocean\">How To Set Up a Host Name with DigitalOcean<\/a><\/li>\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/how-to-point-to-digitalocean-nameservers-from-common-domain-registrars\">How to Point to DigitalOcean Nameservers From Common Domain Registrars<\/a><\/li>\n<\/ul>\n<h2 id=\"bower-reference\">Bower Reference<\/h2>\n<p>Now that we&#8217;ve gone through a practical example with Bower, let&#8217;s look at some of its general capabilities.<\/p>\n<h3 id=\"installing-packages\">Installing Packages<\/h3>\n<p>To install a package (for example, AngularJS or Bootstrap) we would need to run the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower install package<\/pre>\n<p>Instead of <code><span style=\"color: #ff0000;\">package<\/span><\/code>, enter the exact name of the package you want to install. The package can be a GitHub shorthand, a Git endpoint, a URL, and a lot more.<\/p>\n<p>You can also install a specific version of a certain package.<\/p>\n<p>Find out more about all the available options for installing via Bower&#8217;s <a href=\"http:\/\/bower.io\/docs\/api\/#install\">official documentation on installing<\/a>.<\/p>\n<h3 id=\"searching-packages\">Searching Packages<\/h3>\n<p>You can search for packages via this <a href=\"http:\/\/bower.io\/search\/\">online tool<\/a> or by using the Bower CLI. To search for packages using the Bower CLI, use the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower search package<\/pre>\n<p>For example, if we would like to install AngularJS, but we&#8217;re unsure about the correct package name, or we would like to see all the available packages for AngularJS, we can execute the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower search angularjs<\/pre>\n<p>We would get an output similar to this:<\/p>\n<pre class=\"lang:default decode:true\">Search results:\r\n    angularjs-nvd3-directives git:\/\/github.com\/cmaurer\/angularjs-nvd3-directives.git\r\n    AngularJS-Toaster git:\/\/github.com\/jirikavi\/AngularJS-Toaster.git\r\n    angularjs git:\/\/github.com\/angular\/bower-angular.git\r\n    angular-facebook git:\/\/github.com\/Ciul\/Angularjs-Facebook.git\r\n    angularjs-file-upload git:\/\/github.com\/danialfarid\/angular-file-upload-bower.git\r\n    angularjs-rails-resource git:\/\/github.com\/FineLinePrototyping\/dist-angularjs-rails-resource\r\n    angularjs-geolocation git:\/\/github.com\/arunisrael\/angularjs-geolocation.git<\/pre>\n<p>In order to install AngularJS you would then simply execute the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower install angularjs<\/pre>\n<h3 id=\"saving-packages\">Saving Packages<\/h3>\n<p>When starting a project with Bower, it&#8217;s standard to start with running the <code>init<\/code> command:<\/p>\n<pre class=\"lang:default decode:true\">bower init<\/pre>\n<p>This will guide you through creating a <code>bower.json<\/code> file, which Bower uses for project configuration. The process might look like this:<\/p>\n<pre class=\"lang:default decode:true\">? name: howto-bower\r\n? version: 0.0.0\r\n? description:\r\n? main file:\r\n? what types of modules does this package expose?\r\n? keywords:\r\n? authors: Nikola Breznjak &lt;nikola.breznjak@gmail.com&gt;\r\n? license: MIT\r\n? homepage: https:\/\/github.com\/Hitman666\/jsRockstar\r\n? set currently installed components as dependencies? Yes\r\n? add commonly ignored files to ignore list? Yes\r\n? would you like to mark this package as private which prevents it from being accidentally published to the registry? No\r\n\r\n{\r\n  name: 'howto-bower',\r\n  version: '0.0.0',\r\n  homepage: 'https:\/\/github.com\/Hitman666\/jsRockstar',\r\n  authors: [\r\n    'Nikola Breznjak &lt;nikola.breznjak@gmail.com&gt;'\r\n  ],\r\n  license: 'MIT',\r\n  ignore: [\r\n    '**\/.*',\r\n    'node_modules',\r\n    'bower_components',\r\n    'test',\r\n    'tests'\r\n  ]\r\n}\r\n\r\n? Looks good? Yes<\/pre>\n<p>Now, if you install any of the packages using the <code>--save<\/code> switch, they will be saved to the <code>bower.json<\/code> file, in the <strong>dependencies<\/strong> object. For example, if we installed AngularJS with the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower install angularjs --save<\/pre>\n<p>Then our <code>bower.json<\/code> file would look something like this (note the <strong>dependencies<\/strong> object):<\/p>\n<pre class=\"lang:default decode:true\">{\r\n  \"name\": \"howto-bower\",\r\n  \"version\": \"0.0.0\",\r\n  \"homepage\": \"https:\/\/github.com\/Hitman666\/jsRockstar\",\r\n  \"authors\": [\r\n    \"Nikola Breznjak &lt;nikola.breznjak@gmail.com&gt;\"\r\n  ],\r\n  \"license\": \"MIT\",\r\n  \"ignore\": [\r\n    \"**\/.*\",\r\n    \"node_modules\",\r\n    \"bower_components\",\r\n    \"test\",\r\n    \"tests\"\r\n  ],\r\n  \"dependencies\": {\r\n    \"angularjs\": \"~1.4.3\"\r\n  }\r\n}<\/pre>\n<h3 id=\"uninstalling-packages\">Uninstalling Packages<\/h3>\n<p>To uninstall a Bower package, simply run the following command:<\/p>\n<pre class=\"lang:default decode:true\">bower uninstall package<\/pre>\n<p>This will uninstall a package from your <code>bower_component<\/code> directory (or any other directory you&#8217;ve defined in the <code>.bowerrc<\/code> file (more about configuration in the next section).<\/p>\n<h3 id=\"configuring-bower-with-bowerrc\">Configuring Bower with .bowerrc<\/h3>\n<p>To configure Bower, you have to create a file called <code>.bowerrc<\/code>. (Notice the dot &#8211; it means it&#8217;s a hidden file in a Linux environment.)<\/p>\n<p>Create the <code>.bowerrc<\/code> file in the root directory of your project (alongside the <code>bower.json<\/code> file). You can have one <code>.bowerrc<\/code> file per project, with different settings.<\/p>\n<p>Bower lets you configure many options using this file, which you can read more about in the <a href=\"http:\/\/bower.io\/docs\/config\/\">configuration options<\/a> from the official documentation.<\/p>\n<p>One useful option is the <code>directory<\/code> option, which lets you to customize the folder in which Bower saves all its packages.<\/p>\n<p>To set this simple option, create a <code>.bowerrc<\/code> file that looks like this:<\/p>\n<pre class=\"lang:default decode:true \">{\r\n  \"directory\": \"js\/\"  \r\n}<\/pre>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>After completing this tutorial, you should know how to use Bower to install the dependencies for a simple AngularJS application.<\/p>\n<p>You should also have an idea of how to use Bower for your own custom applications.<\/p>\n<p><strong>If you have any questions or you ran into problems with following the steps in this tutorial, please share them in the comments, I&#8217;ll make sure I reply promptly to them.<\/strong><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">How to Manage Front-End <a href=\"https:\/\/twitter.com\/hashtag\/JavaScript?src=hash\">#JavaScript<\/a> and <a href=\"https:\/\/twitter.com\/hashtag\/CSS?src=hash\">#CSS<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/Dependencies?src=hash\">#Dependencies<\/a> with <a href=\"https:\/\/twitter.com\/hashtag\/Bower?src=hash\">#Bower<\/a> on Ubuntu 14.04 <a href=\"http:\/\/t.co\/x1FVUEVenD\">http:\/\/t.co\/x1FVUEVenD<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/636848025189617664\">August 27, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently wrote a tutorial for DigitalOcean\u00a0titled\u00a0How to Manage Front-End JavaScript and CSS Dependencies with Bower on Ubuntu 14.04. You can view the tutorial published on their site,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-2158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=2158"}],"version-history":[{"count":6,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2158\/revisions"}],"predecessor-version":[{"id":2191,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2158\/revisions\/2191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/2159"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}