Free Event Series! Navigating Hypergrowth: Conversations with leaders who’ve seen success at scale. Register now.

By Tara Z. Manicsic in Guides & Tutorials

Vos premiers pas dans l’utilisation de Netlify et d’Angular

Cette page est disponible en English, Español, Français.

Bonjour à vous ! Bienvenue au début de votre expérience avec Netlify et Angular. Nous sommes ravis de vous compter parmi nous ! Chez Netlify, nous souhaitons vous permettre de réaliser facilement des projets Web exceptionnels, allant du développement local au déploiement mondial. Dans cette publication, je vais vous guider à travers les premières étapes de connexion et de déploiement de votre application Angular à l’aide de notre interface utilisateur Web (ou site Web) et des outils de la CLI (interface de ligne de commande) Netlify. Si vous avez des questions ou des commentaires, consultez notre communauté pour obtenir des réponses de la part de notre équipe et d’autres utilisateurs de Netlify. C’est parti !

Utilisation de l’interface utilisateur Web de Netlify

Lorsque vous accédez à netlify.com pour la première fois, vous pouvez associer votre compte à un référentiel Git en vous connectant à GitHub, GitLab ou Bitbucket. Netlify se charge de lier votre compte à vos référentiels. Tout d’abord, accédez à votre page Sites (https://app.netlify.com/teams//sites) et cliquez sur le bouton « New site from Git » (Nouveau site à partir de Git). Cette opération ouvre le compte Git de votre choix et répertorie tous les projets de ce compte. Ensuite, il vous suffit de sélectionner le projet, de choisir la branche et de renseigner la commande build ainsi que le répertoire de publication.

Pour Angular, le plus probable est que la commande build soit la suivante : ng build --prod. Vous pouvez définir l’indicateur d’environnement qui convient le mieux à votre projet spécifique. Si cela vous intéresse, vous pouvez consulter plus d’informations sur la commande ng build de la CLI Angular ici dans leurs documents. Pour le répertoire de publication, indiquez le dossier dans lequel se trouve votre projet. Lorsque vous utilisez la commande ng build avec la CLI Angular, le projet est enregistré dans le dossier dist (abréviation de « distributable ») sous le nom du projet. Si vous avez personnalisé l’emplacement où vous souhaitez créer la sortie de build de votre projet, indiquez plutôt cet emplacement.

Pour résumer, la configuration la plus courante est la suivante :

Commande build : ng build –prod

Répertoire de publication : dist/{nom du projet} (par exemple, dist/anglify)

Telles sont les informations nécessaires pour déployer votre projet Angular sur Netlify à l’aide de l’interface utilisateur Web. Une fois la configuration terminée et le déploiement lancé, vous pouvez suivre sa progression et afficher les journaux sur la page de vue d’ensemble (https://app.netlify.com/sites/{nom du projet}/overview) ou de déploiements (https://app.netlify.com/sites/{nom du projet}/deploys) de votre projet. Sur ces deux pages, vous trouverez également le lien vers votre site.

Trois méthodes de déploiement 😙👌

L’une des manières les plus simples de déployer votre site une fois que vous l’avez associé au référentiel Git de votre projet consiste à utiliser une commande push de validation. Lors de la connexion via votre référentiel, Netlify configure automatiquement un pipeline CI/CD (intégration continue/déploiement continu). Pour obtenir plus d’informations sur l’intégration continue de Netlify, consultez notre documentation. Vous pouvez également déclencher un déploiement en vous rendant sur la page de déploiement de votre projet et en cliquant sur le bouton « Trigger deploy » (Déclencher un déploiement). Ce bouton vous permet de déclencher simplement un déploiement ou de vider votre cache, puis de déployer votre site. Enfin, si vous ne souhaitez pas utiliser de code ou de boutons, il vous suffit de glisser-déposer le dossier de votre projet (par example, dist/{project-name}) dans cette section de la page de déploiements :

Telles sont les options de l’interface utilisateur Web qui s’offrent à vous pour le déploiement. Maintenant, passons à ma partie préférée : le terminal👩🏻‍💻!

Utilisation de la CLI Netlify

En tant qu’utilisatrice d’Angular, j’ai été grandement aidée par tout le travail que fait la CLI Angular : génération de composants (ng generate), intégration de paquets (ng add), mise à jour automatique (ng update), etc. J’ai été ravie de savoir que je pouvais continuer à utiliser la ligne de commande avec la CLI Netlify.

D’ailleurs, la CLI Netlify est un projet open source ✨. Venez voir !

Vous pouvez installer la CLI à l’aide du gestionnaire de paquets de votre choix. Si vous le souhaitez, vous pouvez l’installer de manière globale à l’aide de l’indicateur -g. Pour vous connecter à votre compte, il vous suffit d’exécuter netlify login.

code à exécuter sur la ligne de commande

npm install netlify-cli -g && netlify login

Une fois la connexion établie, vous pouvez accéder au répertoire de votre projet et exécuter netlify init pour le configurer sur Netlify. Vous avez la possibilité de le connecter à l’un de vos sites Netlify existants ou de créer et configurer un nouveau site. Si un référentiel distant Git est affecté à origin dans le projet, la CLI le trouvera et vous demandera si vous voulez l’utiliser pour lier votre site. Cependant, il y a d’autres options. Vous pouvez trouver le site en effectuant une recherche, en répertoriant les sites que vous avez récemment mis à jour ou en utilisant l’ID de site. C’est tout ce qu’il y a à faire pour lier le projet à votre compte Netlify. Ainsi, avec le déploiement continu par défaut de Netlify, si vous effectuez une opération push sur ce référentiel, votre site sera déployé automatiquement ! Simple comme un dimanche matin (en espérant que ce soit le cas pour vous).

Si vous êtes vraiment enthousiaste et que vous voulez déployer votre site avant même d’avoir créé un référentiel git, c’est possible ! Comme indiqué précédemment, il vous suffit d’exécuter netlify init, mais cette fois-ci, comme le système ne verra pas de référentiel git, il l’appellera. La CLI vous demande de choisir entre l’option de déploiement manuel du site ou la création d’un site. Après avoir choisi le déploiement manuel, vous serez invité(e) à fournir des informations sur le projet, puis à les ajouter à votre compte. À partir de ce moment, vous pouvez exécuter netlify deploy comme d’habitude.

Par défaut, netlify deploy déploie votre projet vers un brouillon d’URL. Ces informations, ainsi que les informations sur le lien et le build, sont toutes répertoriées dans la sortie après l’exécution de la commande deploy. Nous voulions nous assurer que vous souhaitez explicitement que le déploiement soit de type production. Ainsi, une fois que votre site est réellement prêt, vous pouvez ajouter l’indicateur --prod. Après avoir exécuté netlify deploy --prod, vous devrez indiquer le répertoire de publication.

Pour éviter ce harcèlement au sujet du répertoire de publication à chaque déploiement, 😛définissez vos paramètres de build dans un fichier de configuration netlify.toml. Consultez la documentation pour en savoir plus.

Une fois le déploiement lancé, il affiche l’URL d’administration (pour l’état, les journaux, etc.), l’URL active et l’ID de site.

Actualisation avec des redirections

Pour vous assurer que les routages fonctionnent (actualisations gérées par le routeur Angular, par example), ajoutez une logique de redirection. L’une des méthodes les plus simples consiste à définir les redirections dans votre fichier de configuration Netlify, netlify.toml, mentionné ci-dessus. Voici à quoi ressemblera ce fichier :

[build]
  publish = "dist/anglify"
  command = "ng build --prod"
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Facilité de déploiement

Vous connaissez maintenant les premières étapes permettant de montrer au monde entier vos incroyables créations Angular :

  • liaison avec vos référentiels Git
  • qui ajoute l’aspect de déploiement continu
  • déploiement à partir de commandes push de validation, déploiement déclenché ou déploiement par glisser-déposer
  • installation de la CLI Netlify
  • liaison et déploiement de projets à partir de la CLI Netlify

Vous pouvez faire tellement plus de choses avec l’interface utilisateur Web et la CLI Netlify. Maintenant que vous avez configuré vos projets et que vous avez réussi à les déployer, je vous recommande vivement de consulter notre documentation.

Voici quelques autres ressources qui vous aideront à renforcer encore plus vos compétences 😍:

Bon codage à tous !