bower

Installing Bower on Windows 10

What is Bower?

Today I am going to speak you about Bower. What’s that?

Bower is a dependency manager for front-end web developers, which is similar to a package manager but it is not the same. A package manager is used to configure systems, ie to setup your development environment and with this settings you can build many projects. However, a dependency manager is specific to project. You manage all dependencies for project and that dependencies going to be saved on your project. When you start another project you should manage your dependencies again.

Example: In PHP world there is Composer as dependency manager and PEAR as package manager. When using composer all your settings and extensions are for single project where pear settings to setup new extension and library to php core.

In fact, Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that NPM (which is pretty used in this world) does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).

Para ver este artículo en español pulsa aquí.

Installing Bower on Windows

In first time, you should install NodeJS, because Bower is an application created with NodeJS. Download the correct version for your system (x64 for my Windows 10), the v4.4.5 LTS:

Nodejs web
Link to NodeJS

It is pretty easy to install NodeJS… Only Next, Next, Next… (don’t fear!):

NodeJS install

Also it is necessary to install GIT, because the dependencies packages should be on a GIT repository. In order to install it, the default options are good, but maybe you will prefer change it.

At the same time, when you install NodeJS, NPM will be installed in your system. So, you can open the cmd in your Windows 10 to install Bower (for that, click on “Start” and write “cmd” and press “enter”).

The command to install Bower is: npm install -g bower

NPM install

Ok, it is done, Bower was installed :) Now, in order to use Bower, it is necessary to create the bower.json (the dependency file of the project) in the root of the project. For my, I am going to create the project called AguilasCity.com (well, it is only an example) in my computer, on the folder C:\wamp\www\AguilasCity.com

In order to access with the cmd of Windows it is necessary to use the “cd” command, and in order to create the dependencies file of the project (bower.json) the command: bower init

NPM install project

In fact, you can update this file, bower.json, which is created in the same root of the project. Later I will update the license and maybe other things, as the name of the project (it is better if you don’t use uppercase).

bower install

For example, if we want to have several depencies as bootstrap, fontawesome and jquery, we will use the command: bower install –save bootstrap fontawesome jquery

If you don’t use the option “–save”, tha package will be installed but the bower.json won’t be update, and it is a problem if you change your project of place (for example, if you put your project in the production server).

bower update

With the command “bower update”, all the packages of bower.json will be updated. It is good to know that you can indicate the version of the packages, even a range of versions. For that and more, you should visit Bower.io

 

References on my index.php page

In order to use this packages, you have to link the libraries in your project. This is my index.php page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AguilasCity.com</title>
    <meta name="description" content="Aguilas City, the best place in the world">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    				<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    				<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

</head>
<body>

<?php echo "testing AguilasCity.com :)"; ?>

</body>
</html>

 

Un comentario en “Installing Bower on Windows 10

Leave a comment

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s