Découvrir Ember.js

Compiler pour la publication

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Mettez en ligne votre projet en l'optimisant pour une utilisation dans un environnement de production.
07:16

Transcription

Lorsque votre application web est prête à être publiée, il y a une manipulation à faire pour qu'il convertisse tout le code source en mode publication en ligne. C'est à dire qu'il va générer tous vos fichiers HTML, il va compresser le Javascript. Dans ce dossier dist, vous avez la sortie finale, c'est ce qui devra être publié sur le site web. Pour l'instant je suis en mode Ember serv, donc c'est la version de développement qui est présente. Vous pouvez déjà regarder ce à quoi ressemblent les contenus notamment les assets, et vous avez le adress-book.js avec tout votre code source qui est ici, qui est déjà collé mais qui n'est pas encore minimisé. Pareil pour le CSS. Une fois que vous êtes prêt à publier votre site, vous allez dans la console, vous arrêtez le serveur, et vous utilisez la commande ember build-prod, pour production. Voilà, il a terminé la publication, et il indique que tous les fichiers publiés sont dans le dossier dist. Donc surtout ne relancez pas Ember serv à ce moment-là, sinon il va remplacer le contenu. Et on retourne dans Sublime, et si je vais dans dist, alors je ne sais pas s'il a rafraîchi, on va voir. Oui, il a rafraîchi. Vous voyez qu'il y a beaucoup moins de choses. Il a tout compressé en quelques fichiers. Donc là du coup, c'est plus du tout utilisable pour nous. C'est plus débuggable, mais ce sera beaucoup plus rapide à exécuter sur un serveur donc tout ce qui est address-book.js et .css, pour INAUDIBLE special page, ça correspond à vos fichiers à vous. Et tout ce qui est vendor.css et .js, ce sont les dépendances que vous avez intégrées. Par exemple, tout le code de Bootstrap est ici. Tiens on voit le début, et après dans le .js on doit en avoir aussi. Voilà. Donc, ça fonctionne de cette manière là, il va essayer de compresser au maximum les fichiers pour les mettre en ligne. La dernière chose qu'on va voir, je vous en ai parlé au tout début, c'est comment gérer la configuration entre développement et production. Donc justement, si vous avez défini des variables ici, elles seront utilisées dans EMberserv, et si vous en définissez ici elles seront utilisées pour quand vous allez faire le INAUDIBLE. Donc dans notre contexte à nous, la seule chose que je vois intéressante à vous montrer, ça va être l'adresse du serveur web. Pour l'instant, c'est tout le temps la même. On est dans adapteur, application, on va tout le temps sur local/host:3000. Sur votre serveur réel, ça ne se passera pas de la même manière. Parce que local/host ça correspond au poste de la personne qui est en train de s'en servir. Vous devrez mettre une vraie adresse pour votre client. Donc la solution on va dire naïve c'est de mettre local/host et puis juste avant d'aller exécuter le build, va être de changer ça, et de ne pas oublier surtout de mettre l'URL de votre vrai serveur. Ça marcherait mais ce n'est pas terrible parce qu'il suffit qu'une fois vous oubliez pour une mise à jour, et plus personne ne pourra se servir de ce site web tant que vous n'aurez pas corrigé et envoyé. Donc l'idéal ça serait d'avoir séparés l'URL en local de test, et l'URL de production. Pour faire ça, cliquez deux fois pour le garder ouvert celui-ci. Et on va ouvrir à côté, environnement, je vais enlever la barre de gauche, je n'en ai plus besoin, pour ressayer d'utiliser des constantes ici. Pour remplacer cet URL qui est donc stocké directement dans le code et qui ne peut pas être modifié en fonction de l'environnement, on va tout d'abord aller dans le ficher environnement.js, et créer une constante. Donc je vais d'abord la créer en développement, en disant ENV.APPLICATION_HOST=, et là je vais récupérer ça qui est bien la valeur de développement. Et je le colle ici. Je reprends cette ligne-là, pour qu'elle ait exactement le même nom. Et dans l'environnement production, je vais changer et mettre, là vous mettrez l'adresse de votre propre serveur, donc là je vais mettre mon-serveur-de-production.com, vous mettrez l'adresse du vrai serveur. Alors attention, c'est vraiment l'adresse de production, ce n'est pas l'adresse de votre serveur local, c'est l'adresse du serveur qui contient les vraies données et qui devra être utilisé sur le site publié en ligne. Maintenant que j'ai créé mes deux constantes ici, on va importer notre environnement. Pour l'importer il faut mettre le nom du projet, donc c'est address-book/config/environment. address-book/config/environment. Voilà, et ici je vais dire ENV.APPLICATION_HOST;, j'enregistre tout ça, je relance mon serveur. Je ne pense pas qu'il était lancé, effectivement. Là, si je lance en mode serveur, oups j'ai fait une erreur. Oui c'est pas un point virgule, c'est une virgule. On va le relancer, je ne sais pas si INAUDIBLE, sinon il faut le relancer, selon le type d'erreur que l'on fait. Il était trop rapide je pense à l'arrêter et à le relancer. dist/assets arrêter. Je vais aller dans dist, tout effacer dans dist, et relancer Ember serveur. Voilà ça marche, voyez c'était une petite erreur du système de fichier, je ne sais pas trop comment il s'est débrouillé, il s'est mélangé entre le build de production et le build de INAUDIBLE. Et donc là, puisque je suis en INAUDIBLE, puisque j'ai fait Ember Serv, automatiquement il va prendre la bonne variable. Alors maintenant qu'on a arrêté l'erreur, ça devrait marcher je pense, voilà. Il a bien récupéré les données sur mon serveur à moi Quand je vais faire le INAUDIBLE de production, en local, il utilisera une URL, et lorsque vous serez en production, il utilisera une URL différente. Vous n'aurez plus à vous en préoccuper. Donc, ce qui nous reste à finir, c'est tout simplement, une fois que ce build sera terminé, vous prenez l'ensemble des fichiers qui sont présents dans le dossier dist. Ça y est là il a terminé, voilà j'ai tous mes fichiers qui sont terminés, et tout ça vous le mettez en ligne sur votre serveur. C'est tout ce que vous avez à faire. Alors ça peut être par FTP, par SFTP, par exemple moi j'utilise sur mon poste habituel, un Plug-in directement intégré à Sublime qui s’appelle SFTP bound, si je me rappelle bien, qui vous permet de publier, en faisant clic droit ici, de synchroniser les fichiers qui ont changé, et il enverra que ce qui a changé sur le serveur par rapport aux versions précédentes. Et voilà, vous avez plusieurs Plug-ins, à vous de choisir comment vous préferez uploader vos fichiers sur internet, et en tous les cas c'est très simple, vous prenez le contenu de dist, et vous le publiez, et votre site sera en ligne !

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 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 !