Comment gérer les dépendances JavaScript et CSS frontales avec Bower sous Ubuntu 14.04

introduction

Le temps où nous devions rechercher, télécharger, décompresser et déterminer manuellement les répertoires d’installation de nos infrastructures, bibliothèques et ressources frontales est révolu.

Bower est un gestionnaire de paquets pour les modules front-end généralement composés de JavaScript et / ou de CSS. Il nous permet de rechercher, d’installer, de mettre à jour ou de supprimer facilement ces dépendances frontales.

L’avantage d’utiliser Bower est qu’il n’est pas nécessaire de regrouper des dépendances externes avec votre projet lorsque vous le distribuez. Bower se chargera du code tiers lorsque vous exécuterez + bower install et que vous aurez ces dépendances aux bons emplacements. Cela rend également le paquet final du projet plus petit pour la distribution.

image: https: //assets.digitalocean.com/articles/bower/zlrTjni.png [logo Bower]

Dans ce didacticiel, vous apprendrez à installer et à utiliser Bower sur un serveur Ubuntu 14.04. Nous utiliserons Bower pour installer Bootstrap et AngularJS et les illustrer en exécutant une application simple sur un serveur Web Nginx.

Conditions préalables

Avant de commencer, vous devez suivre certaines étapes importantes:

Droplet avec une installation propre d’Ubuntu 14.04. Pour cela, la taille de Droplet n’a vraiment aucune importance, vous pouvez donc utiliser en toute sécurité la version la plus petite. Si vous n’avez pas encore créé votre Droplet, procédez comme suit: https://www.digitalocean.com/community/tutorials/how-to-create-your-first-digitalocean-droplet-virtual- serveur [Comment créer votre premier serveur virtuel DigitalOcean Droplet]
Connectez-vous à votre serveur avec SSH
Créez un utilisateur avec les privilèges sudo en suivant notre didacticiel Ubuntu 14.04. Dans notre exemple, cet utilisateur s’appelle * sammy *
Pour le serveur Web, nous utiliserons Nginx, un serveur Web puissant et efficace qui a été largement adopté en raison de ses performances. Suivez le tutoriel Comment installer Nginx sur Ubuntu 14.04 LTS pour installer Nginx

En outre, Bower a besoin de * Git *, * Node.js * et * npm *.

Installez Git sur votre serveur avec la commande suivante:

 sudo apt-get install git

Si vous souhaitez un tutoriel plus détaillé sur la configuration de Git, vous pouvez consulter https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-14-04 [ Comment installer Git sur Ubuntu 14.04].

Installez Node.js sur votre serveur avec la commande suivante:

 sudo apt-get install nodejs

Si vous souhaitez un didacticiel plus approfondi sur la configuration de Node.js, vous pouvez consulter https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-an- ubuntu-14-04-server [Comment installer Node.js sur un serveur Ubuntu 14.04].

Installez npm sur votre serveur avec la commande suivante:

 sudo apt-get install npm

Si vous souhaitez un didacticiel plus détaillé sur la configuration de NPM, vous pouvez consulter https://www.digitalocean.com/community/tutorials/how-to-use-npm-to-manage-node-js- packages-on-a-linux-server [Comment utiliser npm pour gérer les packages Node.js sur un serveur Linux].

Depuis que nous avons installé Node.js à partir d’un gestionnaire de paquets, votre fichier binaire peut être appelé * nodejs * au lieu de * node *. Comme npm repose sur le fait que votre fichier binaire Node.js sera appelé * node *, il vous suffit de le lier symboliquement de la manière suivante:

 sudo ln -s /usr/bin/nodejs /usr/bin/node

Pour en savoir plus sur ce problème, consultez la page Github et pour en savoir plus sur le lien symbolique depuis http://unix.stackexchange.com/questions/68368/. ce-que-est-symlinking-et-comment-peut-apprendre-je-comment-faire-ceci [cette question StackExchange].

Lorsque vous avez terminé ces étapes, vous pouvez continuer avec ce guide.

Étape 1 - Installation de Bower

Installez Bower à l’aide de npm:

sudo npm install bower -g

Le commutateur * -g * permet d’installer Bower globalement sur votre système.

Maintenant que Bower est installé, nous allons continuer avec un exemple pratique. Dans les prochaines étapes, nous allons

Faire un nouveau projet Bower
Installer Bootstrap avec Bower
Installez AngularJS avec Bower
Servir le site via Nginx

À la fin de ce didacticiel, dans la section * Référence * de Bower, vous pouvez en savoir plus sur chacune des options de Bower.

Étape 2 - Préparation du répertoire de projet

Nous allons créer notre projet Bower dans le répertoire + / usr / share / nginx / html + afin de pouvoir accéder facilement à notre application en tant que site Web. C’est le répertoire racine du document par défaut de Nginx.

Nous devons donc passer à ce répertoire avec la commande + cd +:

cd /usr/share/nginx/html

Par défaut, Nginx sur Ubuntu 14.04 a un serveur _ block_ activé par défaut. Il est configuré pour servir des documents à partir du répertoire + / usr / share / nginx / html + susmentionné.

Dans notre exemple, nous allons utiliser le site par défaut.

Pour une application de production, cependant, vous devriez probablement https://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-14-04- lts [configurer un bloc serveur] pour votre domaine spécifique.

Avant que nous puissions effectuer des travaux dans le répertoire + / usr / share / nginx / html, nous devons en donner les droits d’utilisateur sudo.

Changez la propriété du répertoire avec la commande suivante:

sudo chown -R : /usr/share/nginx/html/

Au lieu de * sammy *, vous utiliseriez votre propre utilisateur sudo que vous avez créé dans les conditions préalables requises Ubuntu 14.04 Serveur initial Setup tutoriel.

Étape 3 - Initialisation du projet Bower

À présent, dans le répertoire + / usr / share / nginx / html +, exécutez la commande suivante pour créer un nouveau projet Bower:

bower init

On vous posera une série de questions. Pour cet exemple de projet rapide, vous pouvez simplement appuyer sur + ENTER + pour sélectionner toutes les valeurs par défaut.

Voir une ventilation détaillée des réponses ci-dessous, marquée dans:

Interactive? May bower anonymously report usage statistics to improve the tool over time?
? name:
? version:
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors:
? license:
? homepage:
? set currently installed components as dependencies?
? add commonly ignored files to ignore list?
? would you like to mark this package as private which prevents it from being accidentally published to the registry?

{
 name: 'BowerTest',
 version: '0.0.0',
 description: 'Testing Bower',
 main: 'index.html',
 keywords: [
   'bower',
   'angular',
   'bootstrap'
 ],
 authors: [
   'Nikola Brežnjak'
 ],
 license: 'MIT',
 homepage: 'http://bower.example.com',
 ignore: [
   '**/.*',
   'node_modules',
   'bower_components',
   'test',
   'tests'
 ]
}

? Looks good?

Quelques notes sur ces options:

Pour revenir à la note précédente, vous n’avez pas besoin de saisir les options lorsque vous exécutez la commande + bower init + pour cet exemple de projet.
Dans la question + Quels types de modules ce paquet expose-t-il? +, Vous pouvez sélectionner ou désélectionner les options en appuyant sur + SPACEBAR +. Appuyez sur + ENTER + pour confirmer la sélection. Par défaut, aucun élément n’est sélectionné, et pour cet exemple simple, nous n’en avons besoin d’aucun. Vous pouvez en savoir plus à leur sujet sur le official GitHub issue
Pour un projet de production, vous voudrez peut-être renseigner le champ + auteurs + et d’autres paramètres afin que d’autres personnes en sachent plus sur le projet.
Le paramètre + homepage + est utilisé uniquement pour afficher votre propre site Web et n’a rien à voir avec les paramètres du serveur sur lequel vous exécutez cette application.

Vous devriez maintenant avoir un fichier + bower.json dans votre répertoire de travail (` + / usr / share / nginx / html / + `) avec le contenu JSON indiqué dans le résultat ci-dessus.

Étape 4 - Installer AngularJS

AngularJS est un framework JavaScript pour les applications Web. Pour installer AngularJS avec Bower, exécutez la commande suivante:

bower install angularjs --save

Vous pouvez voir le résultat de la commande ci-dessous:

Output                                                bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.14
bower angularjs#*             validate 1.3.14 against git://github.com/angular/bower-angular.git#*
bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#*
bower angularjs#*              resolve git://github.com/angular/bower-angular.git#*
bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.4.3.tar.gz
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20%
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24%
bower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98%
bower angularjs#*              extract archive.tar.gz
bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3         install angularjs#1.4.3

angularjs#1.4.3 bower_components/angularjs

Si vous obtenez une sortie légèrement différente de celle présentée ci-dessus, cela peut être dû au fait que Bower met les packages en cache pour un téléchargement plus rapide et que votre package a été installé à partir de la mémoire cache.

Nous avons maintenant AngularJS installé dans le répertoire + bower_components / angular + (ou éventuellement dans le répertoire + bower_components / angularjs +), avec le chemin d’accès à la version minified (que nous utiliserons): `+ bower_components / angular / angular .min.js + `.

Étape 5 - Installation de Bootstrap

Bootstrap est un framework CSS. Pour installer Bootstrap avec Bower, exécutez la commande suivante:

bower install bootstrap --save

Vous pouvez voir le résultat de la commande ci-dessous:

Outputbower angularjs#~1.4.3          cached git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3        validate 1.4.3 against git://github.com/angular/bower-angular.git#~1.4.3
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#>= 1.9.1         validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1
bower angularjs#~1.4.3         install angularjs#1.4.3
bower bootstrap#~3.3.5         install bootstrap#3.3.5
bower jquery#>= 1.9.1          install jquery#2.1.4

angularjs#1.4.3 js/angularjs

bootstrap#3.3.5 js/bootstrap
└── jquery#2.1.4

jquery#2.1.4 js/jquery

Nous avons maintenant Bootstrap installé dans le répertoire + bower_components / bootstrap + avec le chemin d’accès à la version modifiée (que nous allons utiliser) étant: + bower_components / bootstrap / dist / js / bootstrap.min.js + pour le fichier JavaScript et + bower_components / bootstrap / dist / css / bootstrap.min.css + pour le fichier CSS.

Notez également que jQuery a été installé, car il s’agit d’une dépendance requise par Bootstrap.

Étape 6 - Création d’une application Hello World

Dans le dossier de modification + / usr / share / nginx / html / +, remplaçons le fichier par défaut + index.html + par notre propre contenu:

mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.orig

Ouvrez le fichier pour le modifier:

vim /usr/share/nginx/html/index.html

Vous pouvez entrer ce contenu exactement:

/usr/share/nginx/html/index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>Bootstrap 101 Template</title>

   <!-- Bootstrap -->
   <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
   <div class="container" ng-app>
       <form class="form-signin">
           <h2 class="form-signin-heading">What you type here:</h2>

           <input ng-model="data.input" type="text" class="form-control" autofocus>

           <h2 class="form-signin-heading">It will also be shown below:</h2>
           <input type="text" class="sr-only">{{data.input}}</label>
       </form>
   </div>

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

   <script src="bower_components/angular/angular.min.js"></script>
</body>
</html>

Nous avons maintenant un exemple d’application type Hello World utilisant Bootstrap avec AngularJS, exécuté sur Nginx.

(Ceci est essentiellement l’exemple Signin Template de Bootstrap dans lequel le contenu de la balise + <body> + a un formulaire simple avec deux champs de saisie.)

Pour voir cet exemple d’application, vous devez naviguer dans votre navigateur jusqu’à l’adresse IP de votre Droplet; quelque chose comme + http: // +. Vous devriez voir quelque chose comme l’image ci-dessous:

image: https: //assets.digitalocean.com/articles/bower/O3wFyJW.png [Ce que vous tapez ici: il sera également affiché ci-dessous:]

Si vous tapez quelque chose dans le champ de la zone de texte, le même contenu apparaîtra ci-dessous, en utilisant la liaison de données AngularJS.

Si vous n’obtenez aucune sortie, essayez de redémarrer Nginx avec la commande suivante:

sudo service nginx restart

Si vous souhaitez en savoir plus sur AngularJS, visitez la documentation officielle à l’adresse https://docs.angularjs.org/tutorial. Si vous souhaitez en savoir plus sur Bootstrap, visitez la documentation officielle à l’adresse http://getbootstrap.com/getting-started/.

Si vous souhaitez pouvoir accéder à votre serveur Web via un nom de domaine, au lieu de son adresse IP publique, achetez un nom de domaine puis suivez les tutoriels suivants:

Bower Référence

Maintenant que nous avons présenté un exemple pratique avec Bower, examinons certaines de ses capacités générales.

Installation de packages

Pour installer un package (par exemple, AngularJS ou Bootstrap), vous devez exécuter la commande suivante:

bower install

Au lieu de «++», entrez le nom exact du paquet que vous voulez installer. Le paquet peut être un raccourci GitHub, un point de terminaison Git, une URL, etc.

Vous pouvez également installer une version spécifique d’un certain paquet.

En savoir plus sur toutes les options disponibles pour l’installation via la page bien de la documentation officielle de Bower sur l’installation.

Recherche de forfaits

Vous pouvez rechercher des packages via cet outil online ou à l’aide de la CLI Bower. Pour rechercher des packages à l’aide de la CLI Bower, utilisez la commande suivante:

bower search

Par exemple, si nous souhaitons installer AngularJS, mais que nous ne sommes pas sûr du nom du package correct ou si nous souhaitons voir tous les packages disponibles pour AngularJS, nous pouvons exécuter la commande suivante:

bower search angularjs

Nous obtiendrions une sortie similaire à celle-ci:

OutputSearch results:
   angularjs-nvd3-directives git://github.com/cmaurer/angularjs-nvd3-directives.git
   AngularJS-Toaster git://github.com/jirikavi/AngularJS-Toaster.git
   angularjs git://github.com/angular/bower-angular.git
   angular-facebook git://github.com/Ciul/Angularjs-Facebook.git
   angularjs-file-upload git://github.com/danialfarid/angular-file-upload-bower.git
   angularjs-rails-resource git://github.com/FineLinePrototyping/dist-angularjs-rails-resource
   angularjs-geolocation git://github.com/arunisrael/angularjs-geolocation.git

Pour installer AngularJS, exécutez simplement la commande suivante:

bower install angularjs

Enregistrement de forfaits

Lors du démarrage d’un projet avec Bower, il est courant de lancer la commande + init +:

bower init

Cela vous guidera tout au long de la création d’un fichier + bower.json, que Bower utilise pour la configuration du projet. Le processus pourrait ressembler à ceci:

Output? name: howto-bower
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Nikola Breznjak <[email protected]>
? license: MIT
? homepage: https://github.com/Hitman666/jsRockstar
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
 name: 'howto-bower',
 version: '0.0.0',
 homepage: 'https://github.com/Hitman666/jsRockstar',
 authors: [
   'Nikola Breznjak <[email protected]>'
 ],
 license: 'MIT',
 ignore: [
   '**/.*',
   'node_modules',
   'bower_components',
   'test',
   'tests'
 ]
}

? Looks good? Yes

Maintenant, si vous installez l’un des paquets en utilisant le commutateur + - save +, ils seront sauvegardés dans le fichier + bower.json +, dans l’objet * dependencies *. Par exemple, si nous avons installé AngularJS avec la commande suivante:

bower install angularjs --save

Ensuite, notre fichier + bower.json ressemblerait à ceci (notez l’objet * dependencies *):

bower.json

{
 "name": "howto-bower",
 "version": "0.0.0",
 "homepage": "https://github.com/Hitman666/jsRockstar",
 "authors": [
   "Nikola Breznjak <[email protected]>"
 ],
 "license": "MIT",
 "ignore": [
   "**/.*",
   "node_modules",
   "bower_components",
   "test",
   "tests"
 ],



}

Désinstallation des packages

Pour désinstaller un paquet Bower, exécutez simplement la commande suivante:

bower uninstall

Cela désinstallera un paquet de votre répertoire + bower_component + (ou de tout autre répertoire que vous avez défini dans le fichier + .bowerrc + (plus d’informations sur la configuration dans la section suivante).

Configuration de Bower avec .bowerrc

Pour configurer Bower, vous devez créer un fichier nommé + .bowerrc +. (Remarquez le point: cela signifie qu’il s’agit d’un fichier caché dans un environnement Linux.)

Créez le fichier + .bowerrc dans le répertoire racine de votre projet (à côté du fichier` + bower.json`). Vous pouvez avoir un fichier + .bowerrc + par projet, avec des paramètres différents.

Bower vous permet de configurer de nombreuses options à l’aide de ce fichier, sur lequel vous pouvez en savoir plus sur les configuration options de la documentation officielle.

Une option utile est l’option + directory +, qui vous permet de personnaliser le dossier dans lequel Bower enregistre tous ses packages.

Pour définir cette option simple, créez un fichier + .bowerrc + ressemblant à ceci:

bowerrc

{
 "directory": ""
}

Conclusion

Une fois ce didacticiel terminé, vous devez savoir comment utiliser Bower pour installer les dépendances d’une application AngularJS simple.

Vous devriez également avoir une idée de la façon d’utiliser Bower pour vos propres applications personnalisées.

TOC