Install Bower, initiate your bower.json and install front end dependencies - ultimagriever/mean-apz GitHub Wiki

What is Bower?

Bower is a package manager much like NPM, except it's optimized for the front-end. With it, we're going to install all third-party front-end dependencies such as Bootstrap, Angular, jQuery and so on.

Installing Bower

npm install --save bower

By supplying the --save argument, we're telling npm to add the dependency to our package.json under "dependencies", in addition to downloading the files and dependencies to node_modules.

You can also (optionally) install bower globally (so as to just run bower instead of ./node_modules/.bin/bower in your command line):

npm install -g bower

Initializing Bower and installing dependencies

bower init

The process to initialize Bower is much like NPM: it will ask for a project name, description, entry file, keywords, author, license, homepage and other options. The default values are the same as described in your package.json.

Let's edit our bower.json.

{
  "name": "mean-apz",
  "description": "The guide to create a MEAN app from a to z",
  "main": "server.js",
  "authors": [
    "Pamela Argentino <[email protected]>"
  ],
  "license": "MIT",
  "keywords": [
    "mongodb",
    "express",
    "angularjs",
    "node.js"
  ],
  "homepage": "",
  "dependencies": {
    "angular": "angularjs#^1.5.7",
    "bootstrap": "^3.3.6",
    "angular-route": "^1.5.7"
  }
}

Notice how similar bower.json's structure is to package.json.

After editing and saving bower.json, run:

bower install

This will install all dependencies listed in your bower.json to a folder called bower_components.

Add bower_components to your .gitignore, then commit your changes

echo 'bower_components' >> .gitignore

git add .
git commit -m "Install Bower and add dependencies"

Next step: Install Gulp, create gulpfile.js and concatenate your *.js and *.css files