Étiquette : Aurelia JS

Aurelia Webpack : créer les fichiers compressés (gzip et brontli) du package de production

Par défaut Aurelia JS ne génère par d'option de compression gzip (*.gz) ou brontli (*.br)  des fichiers produits par  Webpack.
Si ces fichiers existent sur le  serveur Web  ils sont envoyés à la place du fichier non compressé  afin de gagner de la bande passant et du temps de chargement...

Lire la suite

Installer l’indicateur de chargement « nprogress » sur Aurelia

nprogress

Sous Aurelia lorsque vous naviguez ou chargez une ressource il est bien de faire patienter l’utilisateur avec une animation bloquant l’interface.
Le composant « nprogresse » permet de faire cela.

Installation de « nprogress »

Installer « nprogress » dans votre projet Aurelia

 
 
npm install nprogress --save

Configuration de « nprogress » sous Aurelia

Dans le dossier « src/resources/elements » créez le fichier « loading-indicator.js » avec le script suivant :

 
 
import * as nprogress from 'nprogress';
import {bindable, noView} from 'aurelia-framework';
import 'nprogress/nprogress.css';
@noView
export class LoadingIndicator {
      @bindable loading = false;
      loadingChanged(newValue) {
        if (newValue) {
            nprogress.start();
        } else {
            nprogress.done();
        }
      }
}

Ce code crée un composant HTML « loading-indicator » non relié à une vue (de même non), mais important une feuille de style « nprogress/nprogress.css ».

Définissez le plug-in dans le fichier « resources/index.js » en ajoutant :

 
 
 import {PLATFORM} from 'aurelia-framework';
  
  export function configure(config) {
    config.globalResources([PLATFORM.moduleName('./elements/loading-indicator')]);
  }

Positionner le composant HTML de nprogress dans la page HTML principale « App.html »  en ajoutant le code suivant :

 
 
<loading-indicator loading.bind="router.isNavigating || context.isRequesting"></loading-indicator>

Pour activer ce composant il  suffit de mettre a « true » la variable de « context.isRequesting », on d’appeler la méthode « nprogress.start() ». Une barre bleue de progression s’affichera en haut.

Pour le cacher, appelez-la méthode « nprogress.stop(); »

Personnalisation de la barre de progression

Vous pouvez changer le style de la barre de progression en ajout le code suivant dans votre fichier style CSS principale :

 
 
#nprogress {
      display: block;
      position: fixed;
      z-index: 1030;
      left: 0;
      top:  0;
      right: 0;
      bottom: 0;
      opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background-color: #fff;
}
#nprogress .bar {
      height : 8px;
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 50%;
}

 

 

 

 

 

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": "css/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 .