Cours 08 - Déploiement d'une application

Objectifs

• Connaître les concepts généraux de déploiement d'une application web
• Mettre en place un endroit de déploiement
• Être en mesure de déployer une application web

Déroulement

• Introduction au cours
  • Changements au calendrier!
  • Retour sur le questionnaire 07
  • Bonnes pratiques:
    • Interface utilisateur
    • Couleurs UI
• Atelier 08 - Déploiement d'une application web
• Conclusion

Atelier 08 - Déploiement d'une application web

Vous pouvez écouter la vidéo de démonstration en effectuant l'atelier 08

Prérequis

1. Avoir un compte sur GitHub
2. À partir de votre atelier 06, renommez le dossier atel08
3. Renommer le dossier my-app pour appweb-atel08
4. Changer le title du index.html pour Atelier 08
5. Changer dans package.json le nom de l'app: my-app => appweb-atel08
6. Faites un npm install et un npm run build pour tester que tout fonctionne
7. RAPPEL
   • La commande npm run build va créer le dossier dist avec tous nos fichiers
   • Tout ce qui est dans le dossier public sera copié à la racine du dossier dist
   • Les ressources externes importées dans src/ seront copiées dans dist/assets avec un id unique à droite

Partie 1: Création de repo

1. Aller sur GitHub et créer un nouveau repo
2. Le repo doit avoir le nom suivant: appweb-atel08
3. Le repo doit être public, sinon GitHub page ne fonctionnera pas.
4. Rien d'autre à changer, cliquer sur Create Repository
5. Cliquer sur l'option SSH
   • Si vous n'avez jamais utilisé GitHub, vous devez générer des clés SSH:
   • https://docs.github.com/en/authentication/connecting-to-github-with-ssh/checking-for-existing-ssh-keys
   • https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent
6. Copier les 4 dernières lignes du command line du site web
7. Dans le terminal à la racine de votre projet faire un:
   • taper git init
   • taper git add .
   • coller les 4 lignes
     NOTE: Si vous avez des problèmes, de git push:
     remote: Invalid username or password.
     fatal: Authentication failed for 'https://github.com/username/appweb-atel08.git/'
     Vous devez ajouter votre clé SSH à GitHub
8. Si la clé SSH ne fonctionne vraiment pas, utiliser l'option HTTPS à l'étape 5
9. Aller vérifier sur GitHub votre premier commit!

Partie 2: Modifications de chemins

Étant donné que l'on va déployer notre application sur https://username.github.io/appweb-atel08/, nous devons apporter des modifications à notre projet. Pour corriger les problèmes de chemins, on va faire les étapes suivantes:

1. À la racine du projet, on créer un fichier nommé vite.config.ts
2. S’il est déjà là, on l'ouvre avec VS Code
3. juste en haut de la ligne concernant les plugins, coller le code suivant:
   base: "/appweb-atel08/",
4. Refaire un npm run build et aller voir dans le fichier index.html du dossier dist
5. Nos fichiers statiques devront aussi être mis à jour. Exemple dans index.html:

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

va devenir:

<link rel="icon" type="image/svg+xml" href="/appweb-atel08/vite.svg" />

6. Ajoutez une image drôle dans le répertoire /src/assets/
7. Faites l'affichage de celle-ci vers celle-ci dans index.html (celui à la racine de votre site)
   IMPORTANT: ne touche pas au index.html qui est dans le dossier dist, lui il est généré automatiquement!

<img src="/src/assets/monimage.jpg" alt="mon image drôle" />

8. Faites un npm run dev, pour voir si votre image drôle est là!
9. Faites un npm run build et allez voir à quel endroit est l'image dans le dossier dist.
   IMPORTANT: l'image n'est pas dans le dossier assets de dist à cause du dossier src/assets
10. Créer un sous-dossier pour trier vos images: /src/assets/images
11. Changer le chemin de l'image:

<img src="/src/assets/images/funny-cat.jpg" alt="image drôle" />

12. Faites un npm run build
13. Aller voir dans dist/assets/ le dossier images n'est pas là!

Partie 3: Mettre en ligne le site

1. De retour sur GitHub dans votre repository (https://github.com/username/appweb-atel08)
2. Aller dans Settings et dans Pages
3. Dans Build and deployment, changer la source pour GitHub Actions
4. Revenir dans VS Code, dans votre projet créer un dossier .github
5. Dans le dossier .github, créer un dossier workflows
6. Dans le dossier workflows, créer un fichier deploy.yml
7. Ouvrir le fichier deploy.yml
8. Consulter la documentation pour cette partie https://vitejs.dev/guide/static-deploy#github-pages
9. Copier le code du workflow de la partie 2 dans votre fichier deploy.yml
10. Regarder ce que contient le fichier!
11. Sauvegarder le fichier
12. Si une proposition d'extension vous est offerte, rien ne vous empêche de l'essayer ;)
13. Dans le terminal, on va envoyer nos modifs:
    • Taper git add .
    • Taper git commit -m "Ajout du workflow"
    • Taper git push
14. Aller voir votre repos sur GitHub, si le commit s'est fait. Un check vert devrait apparaître.
15. S'il y a une erreur, allez voir dans Actions, et essayer de recommencer
16. Test final: https://username.github.io/appweb-atel08/, vous devriez voir votre page correctement affichée
17. Vous comprenez qu'à chaque fois que vous allez faire un push dans votre branche main ça va mettre à jour le site live sur github page!
18. ENJOY!

Remise

Copiez l'URL de votre site et envoyez-le-moi dans un fichier texte sur Atelier 08 dans Léa