Mettre une application en production avec Angular 2

Gérer les environnements

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Avec Webpack et une configuration appropriée, vous serez en mesure de gérer les environnements de production et de développement.
07:15

Transcription

Alors, comment est-ce qu'il fonctionne, notre WebPack actuellement ? En fait, c'est assez simple à mettre en place. Si vous vous basez sur ce template-là, vous aurez déjà quasiment tous les outils, c'est extrêmement intéressant. On verra qu'il n'y a pas grand-chose à mettre en place, sinon en fait au final qu'une petite commande. Alors, je dis pas grand-chose à mettre en place, il y a quand même de la configuration, attention. Ça va se baser sur plusieurs configurations, je vais vous les montrer, évidemment. Ici, ce que vous devez retenir, c'est qu'on va utiliser à cet endroit-là des commandes qui seront finalement uniquement des commandes npm, build.prod qui nous permet de créer en fait un environnement de production et donc de travailler et de demander à WebPack de créer le package qui va être disponible, et pour la dev, pareil. Si vous regardez la différence entre les deux commandes, vous remarquerez que c'est simplement la configuration qui va changer. Cette configuration, on va aller la voir juste après. Si vous descendez un petit peu, vous verrez effectivement qu'on a aussi une commande qui s'appelle start, et en fait start va lancer npm run, donc un run sur quelque chose qui existe déjà server:dev. Ce server:dev, regardez… Ça, c'est un WebPack server:dev – – config, avec une configuration particulière, et bien sûr quelques petites informations qui sont en plus des flags qu'on va donner parce qu'on va se baser sur quelque chose, notamment vous remarquerez quelque chose d'important, c'est que quand je démarre ici et que j'utilise en fait le server:dev, je fais simplement un démarrage d'un plug-in, on va reparler des plug-ins après, qui est le plug-in WebPack dev-server, et je lui donne une configuration, et surtout je lui demande de me charger le src. Donc là, je ne lui demande pas de faire de la compression. Je lui demande d'aller regarder le src et de me le servir au travers d'un serveur, donc pas de compression. Par contre, pour la mise en production, c'est un petit peu différent. Le http-server dist, donc on va chercher en fait un dossier, ça veut dire qu'il va falloir à un moment ou à un autre, eh bien, le construire au préalable, et la construction, elle se fera là, avec la commande build:prod. Alors, regardons un petit peu ce que l'on a dans les configs. D'abord, la config de base, c'est cette partie qui s'appelle le webpack.config.js qui se trouve à la racine. Celui-ci, il va vérifier si on est en production, si on est en test ou si on est en développement, et en fonction de ça, il va aller charger un autre fichier. Par exemple ici, la prod, le test ou le dev dans le dossier config. On va aller regarder le dossier config, et regarder ce qui se trouve dedans. Effectivement, on a beaucoup d'informations. Il y a pas mal de petits fichiers que vous pourrez aller regarder plus tard qui sont toute la configuration pour les tests fonctionnels, unitaires, et puis on a même en plus de ça d'autres tests qui sont dans l'application, parce que vous verrez qu'on a les tests e2e. Donc, ce sont simplement des tests supplémentaires sur l'interface, là où vous avez plein de petits exemples sympas. Donc, on remarquera quelque chose d'intéressant, c'est qu'on a ici deux fichiers de configuration. On a le fichier qui s'appelle webpack.test.js et on a le fichier qui s'appelle webpack.prod.js. Alors, si vous regardez l'intérieur de ces fichiers, vous remarquerez que pour l'environnement de dev, et je vais le rouvrir, l'environnement de dev qui est là, c'est assez léger. On a un petit fichier. Il y a beaucoup de commentaires, donc ça nous permettra de relire facilement, mais c'est assez léger. En soi, qu'est-ce que ça va faire ? Ça va utiliser des plug-ins, ça va utiliser une configuration par défaut, et puis ensuite ça va définir ici des environnements. Donc, on devra faire ça, définir l'environnement, le port sur lequel ça va tourner, etc. Et à chaque fois, pour chaque plug-in, vous devrez configurer de l'information sur chaque plug-in. Ça va marcher un petit peu comme du Gulp, du npm, etc. Il y a toujours de la config à donner. Et là, on va avoir de la config aussi pour chacun des plug-ins. Alors, ce qui est bien, c'est que vous pouvez remarquer qu'ici, il va simplement prendre filename, c'est le plus important, et il va essayer de créer un bundle.js avec le nom de chaque fichier. En fait, il va parcourir les différents fichiers qu'on a et il va essayer de recréer les différents fichiers. Vu que c'est un environnement de dev, il n'y a pas de compression, il n'y a vraiment rien et il va nous servir uniquement les différents modules au travers de ce petit script de dev. Mais on va se retrouver sur notre code source, ça ne va pas du tout être de la compression. La grande différence avec le fichier de prod qui lui par contre va s'occuper de faire de la compression, et on va le voir après quand on va utiliser la commande, effectivement ici, il y a beaucoup plus de plug-ins qui sont utilisés. On remarque qu'il va aller chercher des informations et que surtout il va les compresser avec un hash. Alors, vous verrez qu'effectivement, il va créer à chaque fois des clés uniques et qu'il va se charger tout seul de venir travailler et de venir récupérer ces fichiers pour les charger. Alors, il y a des petits scripts qui sont utilisés en plus. Il y a un Uglify qui permet de réduire le code source pour qu'il soit illisible, on peut dire qu'il est illisible, c'est vrai. Il ne sera pas vraiment illisible, mais effectivement ça va supprimer tous les espaces, ça va réduire le code. On utilisera aussi pas mal de petits outils en plus, un petit peu plus bas, qui nous permettent de faire le load des différentes bibliothèques, notamment le très bon tslint qui est utilisé ici où on verra qu'effectivement on vient récupérer les informations du paquet et on essaye de valider le code. Le tslint vous permet de valider votre code JavaScript. On a aussi des loaders qui vont nous permettre de loader toutes les sources. Alors, ce sont des templates de base. C'est ce que vous trouverez la plupart du temps. C'est ce que vous devrez aussi respecter. Il faut absolument respecter ce type de templates pour mettre en production. Alors, soit vous allez les générer sur Internet et puis vous utilisez ce qui est déjà fait, parce que dans la plupart des cas ça va être largement suffisant, soit vous allez vous rendre dans les différents plug-ins, et on va en parler juste après, et vous allez regarder à chaque fois quelle est la configuration. En tout cas, sachez que si vous utilisez une mise en production, si vous faites de la mise en prod, vous devrez avoir un fichier qui va s'occuper de tout lire, de tout hasher, de tout réduire, de tout servir dans un seul fichier, ce qui n'est pas le cas dans l'environnement dev où vous allez travailler sur tous les fichiers qui vont donc être les mêmes fichiers que ceux que vous codez, exactement les mêmes. Alors, il y a un dernier fichier que je vais vous montrer qui se trouve dans src, c'est l'index.html. Vous remarquerez que dans l'index.html, ici, on va déléguer à WebPack pas mal d'informations intéressantes, notamment ici, on va lui déléguer des informations qui seront le titre de la page, qui seront par exemple les métadatas, etc. Et ça, on va se baser sur un plug-in qui s'appelle htmlWebpackPlugin qu'on peut configurer aussi et auquel on peut donner de l'information. Donc ça, c'est utile parce que ça vous permet d'avoir de l'information ailleurs. Il y a autre chose qui est intéressant, c'est cette partie-là. Cette partie-là, elle sera activée uniquement si on est en dev, et elle ira récupérer ici un script qui s'appelle webpack-dev-server.js. Et le webpack-dev-server.js, il sera automatiquement servi par WebPack et permettra d'avoir un serveur de développement. Attention, ce n'est pas la même chose que pour de la mise en prod. La mise en prod, on va la faire un tout petit peu après. L'idée ici, c'est que vous réussissiez à bien comprendre qu'effectivement on a des commandes qui interagissent avec des fichiers de configuration. Ce n'est pas compliqué d'utiliser WebPack, simplement il faut le configurer, c'est obligatoire. Dans config, vous irez regarder, et vous allez regarder proprement chaque ligne et comment c'est écrit et pourquoi c'est utilisé, parce qu'à chaque fois vous avez les différents liens, et vous pouvez aller voir les différents plug-ins et en apprendre à chaque fois un petit peu plus. Il y a beaucoup de plug-ins qui existent, et vous pouvez faire beaucoup de choses avec WebPack.

Mettre une application en production avec Angular 2

Optimisez la mise en production de votre application AngularJS. Réduisez le temps de chargement et d’affichage, gérez les tâches répétitives avec des scripts, etc.

1h05 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :13 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !