Étiquette : Aurelia

Ajouter la police CSS Font-Awesome dans Aurelia JS

Le package « Font Awesome » vous permet d’utiliser des icônes libres et proportionnelles dans vos pages Web. Effectivement la feuille de style proposé par Font Awesome utilise une police vectorielle représentant des icônes.

Regarder sur les exemples suivant http://fontawesome.io/examples cela va vous plaire.

Lorsque vous utilisez Aurelia CLI, le package NodeJS de « Font awesome » est mal configuré et génère des erreurs.
Je vous propose  donc une recette simple pour bien l’intégrer dans vos développements Aurelia  JS.

1) Installer le package Font-Awesome dans NodeJS :

 
 
npm install font-awesome --save

2)  Dans le fichier « aurelia-project/aurelia.json » ajouter dans le « build » la copie des polices vectorielles dans le dossier « fonts » de votre projet :

 
 
...
"build": {
      ...,
      "copyFiles": {
            "node_modules/font-awesome/fonts/fontawesome-webfont.woff": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "fonts/",
            "node_modules/font-awesome/fonts/FontAwesome.otf": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.svg": "fonts/"
      }, ...

3) Toujours sur ce document, dans les dépendances « dependencies » ajouter la description du package « font-awesome » :

 
 
"dependencies": [ 
      ...,
      { 
            "name": "font-awesome", 
            "path": "../node_modules/font-awesome/", 
            "main": "css/font-awesome.css"
      }, ...

4) Pour utiliser la police dans une page HTML d’Aurelia, il suffit d’y ajouter après le « <template> » l’instruction suivante :

 
 
<require from="css/font-awesome.css"></require>

Vous noterez le « css/ » devant « font-awesome.css ». Cella permet d’être relative au projet Aurelia, sans devoir copier le dossier « fonts » à la racine de votre site WEB.

 

 

Mettre à jour Aurelia JS : aurelia-update et npm-check-updates

Le framework Aurelia JS 😛 est régulièrement mis à jour. Mais comment le mettre à jour ?

Mise à jour de aurelia-cli dans NodeJS.

Attention, cella n’influence pas la version utilisé dans un projet existant.

  • Une manière de le mettre à jour est de faire :
     
     
    npm install -g aurelia-cli

    Si vous obtenez une erreur, il faut le supprimer de NodeJS puis de le re-installer en nettoyant les cache :

     
     
    npm uninstall -g aurelia-cli
    npm cache clean
    npm install -g aurelia-cli
  • Dans un projet, il est possible d’utiliser aurelia-update.
    Si vous n’avez pas encore installé aurelia-update, installer le par :

     
     
    npm install aurelia-update -g

    Pour mètre à jour Aurelia faire simplement :

     
     
    aurelia-update

Maintenant vous voulez surement mettre à jour les bibliothèques utilisées dans un projet Aurelia.

Mise à jour des bibliothèques (libraries, packages) référencées dans package.json dont Aurelia !

En premier il faut trouver les numéro des nouvelles versions des bibliothèques. Soit vous les rechercher sur le site de npm soit vous installer le package « npm-check-updates » par :

 
 
npm install npm-check-updates -g

puis lancer la recherche des nouveaux numéros de version par :

 
 
npm-check-updates

ce qui affichera une liste ressemblant à (sur la droite la version la plus récente) :

 
 
 aurelia-bootstrapper       ^1.0.0  →           ^2.1.1
 aurelia-dialog             ^0.6.2  →  ^1.0.0-rc.1.0.3
 jquery                      2.2.4  →            3.2.1
 aurelia-tools              ^0.2.2  →           ^1.0.0
 gulp-notify                ^2.2.0  →           ^3.0.0
 uglify-js                  ^2.6.3  →          ^3.0.26
 babel-eslint               ^6.0.4  →           ^7.2.3
 babel-preset-es2015-loose  ^7.0.0  →           ^8.0.0
 gulp-eslint                ^2.0.0  →           ^4.0.0

Si tout vous convient, vous pouvez tous les mettre à jour par (Je vous le déconseille) :

 
 
npm-check-updates -u

Sinon éditer le fichier « package.json » puis pour chaque version a mettre à jour, remplacer son ancien numéro par le nouveau.

Maintenant il reste plus qu’a faire une mise à jour npm par :

 
 
npm update

Ou supprimer le dossier « node_modules » puis faire une installation :

 
 
npm install

Et voila, toutes vos bibliothèques (libray) sont à jour !

Attention aux incompatibilités entre numéro de version .

 

 

 

Créer localement un docset Aurelia pour Zeal (gestionnaire offline de doc)

Zeal est une application Linux, Windows permettant de regrouper localement des documentations techniques telles que HTTP, CSS, HTML, Java, Reactjs ... Ainsi plus besoin de ce connecter sur le Web (on a pas toujours accès à internet ;-)
Bien que sa bibliothèque soit bien fournie (195 documentations), elle ne contient pas la documentation d'Aurelia (Aurelia.io).
Cependant, il existe un moyen de créer sa propre documentation Aurelia pour Zeal.

Lire la suite