.. _activites__mise-en-place-serveur:

1. Mise en place d'un serveur et d'un projet de base
####################################################

.. raw:: html

   <div style="max-width:256px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGklEQVQYlWM4c+bMf3TMgA0MBYWDzDkUKQQAlHCpV9ycHeMAAAAASUVORK5CYII=) repeat;margin-bottom:2em;" id="mon-animation"></div>
   <script src="../../_static/lottie.min.js" charset="utf-8"></script>
   <script type="text/javascript">
   bodymovin.loadAnimation({
     container: document.getElementById('mon-animation'),
     path: '../../_static/animations/emoji-interrogation.json',
     renderer: 'svg',
     loop: true,
     autoplay: true,
   })
   </script>

..

   ↑ Cette animation a été générée avec After Effects, exportée au format JSON et est affichée avec Lottie.

objectifs
*********

* être capable d'accéder à un projet web minimal permettant d'afficher une animation exportée depuis After Effects avec BodyMovin
* mettre en place un serveur local
* utiliser le terminal pour utiliser le serveur local

fichier de travail
******************

:download:`Télécharger le modèle <modele.zip>`

à faire
*******

phase 1
=======

1. télécharger le modèle
2. ouvrez index.html avec votre navigateur : rien n'est affiché
3. ouvrez la console du navigateur : observez le message d'erreur affiché

phase 2
=======

1. Mettre en place un serveur local :ref:`pratique__installer-serveur-local`
2. En vous aidant de la documentation (:ref:`pratique__installer-serveur-local`), affichez l'animation dans le navigateur

phase 3
=======

À l'aide d'un éditeur de code, regardez les différents éléments qui constituent le projet de base.