À propos de l'auteur

Zara Cooper est une développeur de logiciels qui aime partager ce qu'elle apprend en tant que développeur avec les autres. Quand elle a du temps à perdre, elle aime lire un bon livre…
En savoir plus sur
Zara
…

La création du flux de travail frontal, backend et de déploiement d'une application prend beaucoup de temps travail. Dans les cas où votre application ne collecte qu'une quantité limitée de soumissions de données de ses utilisateurs, la création d'un backend complet peut ne pas valoir le temps et l'effort. Une alternative au développement d'un backend complet consiste à utiliser Netlify Forms. Dans ce didacticiel, je vais vous expliquer comment utiliser un formulaire réactif angulaire avec Netlify Forms. Étant donné que Netlify Forms ne fonctionne que lorsqu'il est déployé sur Netlify, je vais également illustrer comment déployer votre application sur Netlify Edge.

The Toolkit

Un formulaire réactif angulaire est un formulaire qui a un modèle de données structuré créé explicitement dans un composant classe utilisant les fournisseurs ReactiveFormsModule . Un modèle de formulaire est créé pour chaque élément d'entrée dans la vue de formulaire. Ce modèle de formulaire est une instance de la classe FormControl et il garde la trace de la valeur de l'élément de formulaire. Le modèle de formulaire est immuable car chaque fois qu'une modification est apportée au modèle, l'instance FormControl renvoie un nouveau modèle de données au lieu de mettre à jour l'ancien modèle. Son immuabilité rend la détection des changements plus efficace et permet la modification des données avec des opérateurs observables. Les éléments d'entrée de formulaire étant directement connectés à leurs modèles de formulaire, les mises à jour entre eux sont synchrones et ne reposent pas sur le rendu de l'interface utilisateur.

Netlify est une plate-forme qui vous permet de créer, de déployer et d'héberger des sites créés avec diverses technologies. Les sites créés avec Angular peuvent être hébergés sur Netlify. Netlify fournit également une multitude d'outils qui simplifient, automatisent et augmentent les versions et les déploiements de ces sites. Nous allons utiliser deux de ses produits dans ce didacticiel: Netlify Edge et Netlify Forms.

Comme décrit précédemment, Netlify Forms est une fonctionnalité de gestion de formulaire qui reçoit automatiquement les soumissions de formulaires HTML. Elle ne nécessite aucune configuration de traitement de soumission, comme la création d'API, de scripts, etc. Cette fonctionnalité ne fonctionne qu'avec les formulaires des sites déployés sur Netlify. Il est activé par défaut, ce qui réduit davantage la configuration nécessaire pour configurer les soumissions de formulaires. La gestion des soumissions est configurée pendant le déploiement, où les fichiers HTML d’un site sont analysés par les robots de compilation de Netlify.

Netlify Edge est un réseau mondial de distribution d’applications sur lequel les sites et les applications sont publiés. Il fournit des fonctionnalités telles que les tests A / B, les restaurations, la préparation et les déploiements par étapes. Tous les déploiements sur Netlify Edge sont atomiques, ce qui signifie qu'un site n'est actif que lorsque tous les fichiers ont été téléchargés / mis à jour et que les modifications apportées au site sont prêtes. Une fois qu'un site est déployé, un sous-domaine lui est attribué sur netlify.app lorsqu'il est déployé en production. Netlify Edge prend également en charge les déploiements d'aperçu et de branche (préparation, développement, etc.).

La gestion des soumissions de Netlify Forms fonctionne car les robots de génération analysent les formulaires HTML sur un site pendant le déploiement. Les formulaires rendus Javascript côté client comme ceux des sites angulaires compilés ne seront pas trouvés par ces robots. Ainsi, la configuration normale de Netlify Forms ne fonctionnera pas avec Angular Forms.

Cependant, il existe une solution à ce problème. Pour lui permettre de recevoir des soumissions, un formulaire HTML simple caché est ajouté au fichier index.html . Ce formulaire fonctionne avec les bots de construction. Lors de la soumission du formulaire angulaire, une demande de publication est faite à ce formulaire caché qui est ensuite capturé par Netlify Forms.

Dans cet article, nous allons créer un formulaire réactif. Nous allons également développer un service pour faire une demande de publication dans le formulaire HTML masqué. Enfin, nous déploierons l'application sur Netlify Edge.

Exemple

Pour illustrer comment créer l'application, nous prendrons un exemple de formulaire de commentaires commun sur de nombreux sites Web. Nous utiliserons ce formulaire pour recueillir les commentaires / réclamations, questions et suggestions des utilisateurs du site ainsi que leur nom et leur adresse e-mail. Nous l'utiliserons également pour recueillir leur évaluation du site.

Conditions requises

Pour suivre ce tutoriel, vous aurez besoin d'un compte Netlify et de la CLI Angular installés. Si vous ne disposez pas de la CLI, vous pouvez l'installer à l'aide de npm.

 npm install -g @ angular / cli

Si vous n'êtes pas encore inscrit à un compte Netlify, vous pouvez en créer un ici . Netlify propose une inscription via Github, Gitlab, Bitbucket ou Email. En fonction de la méthode de déploiement que vous choisissez, il peut s'agir d'autres exigences. Ils seront indiqués sous chaque méthode de déploiement.

Configuration de l'application

Pour commencer, nous allons créer l'application et l'appeler feedback . Lors de sa création, ajoutez-lui un routage lorsque vous y êtes invité dans les invites.

 ng new feedback

Ensuite, nous allons générer trois éléments: un formulaire de commentaires, une page de message d'envoi réussi et une page 404. Netlify Forms vous permet de naviguer vers une page une fois la soumission de formulaire réussie. C’est pour cela que nous utiliserons le SuccessComponent .

 ng g c feedback
ng g c succès
ng g c page non trouvée

Après avoir généré les composants, nous ajouterons les routes à chaque page dans le AppRoutingModule dans le fichier app-routing.module.ts .

 const routes: Routes = [
  { path:'', component: FeedbackComponent },
  { path: 'success', component: SuccessComponent },
  { path: '**', component: PageNotFoundComponent }
];

Nous utiliserons le service FormBuilder pour créer notre formulaire réactif. C'est parce qu'il est plus pratique et moins répétitif que l'utilisation de contrôles de formulaire de base. Pour y avoir accès, nous devrons enregistrer le ReactiveFormsModule dans le fichier app.module.ts .

Puisque nous allons faire une demande de publication dans le HTML masqué formulaire, nous devons également enregistrer le HttpClientModule .

 import {ReactiveFormsModule} de '@ angular / forms';
import {HttpClientModule} depuis '@ angular / common / http';

@NgModule ({
  importations: [
    // other imports
    ReactiveFormsModule,
    HttpClientModule
  ]
})
classe d'exportation AppModule {}

Continuez à changer le contenu de app.component.html pour avoir juste la sortie du routeur.

Les différentes pages partageront un certain style. Ajoutez donc le style ci-dessous à styles.css .

 html, body {
    hauteur: 100%;
    largeur: 100%;
    affichage: flex;
    align-items: flex-start;
    justify-content: centre;
}

h1 {
    marge: 0;
    text-align: centre;
}

h1, p, étiquette {
    famille de polices: Arial, Helvetica, sans-serif;
}

p {
    largeur max: 25rem;
}

#récipient {
    bordure: aucune;
    rembourrage: .4rem;
    rayon de la frontière: 0;
    flex-direction: colonne;
    affichage: flex;
}

hr {
    largeur: 80%;
}

bouton {
    Couleur blanche;
    couleur de fond: noir;
    taille de la police: grande;
    rembourrage: .5rem;
    rayon de la frontière: .5rem;
    margin-top: 1rem;
}

@ écran multimédia et (hauteur min .: 700px) {
    html, corps {
        align-items: centre;
        justify-content: centre;
    }
}

@ écran multimédia et (largeur min: 480px) {
    #récipient {
        bordure: .1rem solide gris clair;
        rembourrage: 2rem;
        rayon de la frontière: .5rem;
    }

    html, corps {
        align-items: centre;
        justify-content: centre;
    }
}

Créer le formulaire réactif

Dans notre classe FeedbackComponent nous commencerons par importer le service FormBuilder que nous utiliserons pour créer le formulaire. Nous importerons également la classe Validators pour la validation de l'entrée de formulaire.

 import {FormBuilder, Validators} depuis '@ angular / forms';

Nous injecterons ensuite le service FormBuilder en l'ajoutant au constructeur FeedbackComponent .

 constructeur (private fb: FormBuilder) {}

Ensuite, nous définirons le modèle de formulaire à l'aide de la méthode group du service FormBuilder injecté. Nous ajouterons également une propriété errorMsg pour contenir toutes les erreurs que nous pourrions rencontrer lors de la soumission de la saisie du formulaire. Une méthode closeError qui fermera l'alerte d'erreur qui s'affiche sur le formulaire.

Chaque contrôle du modèle de formulaire sera vérifié à l'aide de validateurs de la classe Validators . Si l'une des entrées échoue à la validation, le formulaire sera invalide et la soumission sera désactivée. Vous pouvez choisir d'ajouter plusieurs validateurs à un contrôle de formulaire comme dans le cas du contrôle email .

 classe d'exportation FeedbackComponent {
  feedbackForm = this.fb.group ({
    prénom: ['', Validators.required],
    nom de famille: ['', Validators.required],
    courriel: ['', [Validators.email, Validators.required]],
    type: ['', Validators.required],
    description: ['', Validators.required],
    évaluation: [0, Validators.min(1)]
  });

  errorMsg = '';

  closeError () {
    this.errorMsg = '';
  }

  // ...
}

Dans le modèle du composant ( feedback.component.html ), nous ajouterons ceci.

  

    
 {{errorMsg}} 
     ✖︎ 
  
  
 Feedback Form 
  

  
 Nous aimerions vos commentaires pour améliorer notre site Web. 
  

    

      

        
         Suggestion 

      
      

        
         Commentaire 

      
      

        
         Question 

      
    
    

       Description: 
      
    
    

      

         Comment évalueriez-vous notre site? 
         {{feedbackForm.value? .rating}} 
      
      
    
    

       Nom: 
      

        
        
      
    
    

       Email: 
      
    
    

       Soumettre des commentaires 
    
  

Notez que l'élément de formulaire doit avoir l'attribut [formGroup] = "feedbackForm" correspondant au modèle que nous venons de créer. En outre, chacun des éléments d'entrée doit avoir un attribut formControlName = "" correspondant à son contrôle de formulaire équivalent dans le modèle.

Pour styliser le formulaire, ajoutez-le à feedback.component.css .

 #options {
    affichage: flex;
    flex-direction: colonne;
}

#options label {
    marge: 0 0 0 .2rem;
}

.radioOption {
    marge: 0 0 .2rem 0;
}

.inputContainer {
    affichage: flex;
    flex-direction: colonne;
    marge: .5rem 0 .5rem 0;
}

label {
    marge: .5rem 0 .5rem 0;
}

.nameInput {
    affichage: flex;
    flex-direction: colonne;
}

bouton: désactivé {
    curseur: non autorisé;
    événements de pointeur: tous;
    couleur d'arrière-plan: slategrey;
}

#ratingLabel {
    affichage: flex;
    justify-content: espace entre;
    marge: .5rem 0 .5rem 0;
}

#ratingValue {
    poids de la police: plus audacieux;
    taille de la police: grande;
    bordure: .1rem solide gris clair;
    rembourrage: .4rem .6rem .1rem .6rem;
    marge: 0;
    alignement vertical: milieu;
    rayon de la frontière: .3rem;
}

.Erreur {
    couleur: rouge foncé;
    couleur d'arrière-plan: lightsalmon;
    bordure: .1rem cramoisi solide;
    rayon de la frontière: .3rem;
    rembourrage: .5rem;
    text-align: centre;
    marge: 0 0 1rem 0;
    affichage: flex;
    largeur: hériter;
}

.error p {
    marge: 0;
    flex-grow: 1;
}

textarea, entrée {
    marge: .1rem;
    famille de polices: Arial, Helvetica, sans-serif;
    rembourrage: 5px;
    taille de la police: moyenne;
    font-weight: plus léger;
}

.proche {
    curseur: par défaut;
}

.hidden {
    affichage: aucun;
}

@ écran multimédia et (largeur min: 480px) {
    #options {
        flex-direction: ligne;
        justify-content: espace autour;
    }

    .nameInput {
        flex-direction: ligne;
        justify-content: espace entre;
    }
}

Voici à quoi ressemblera le formulaire:

Ajout d'un formulaire HTML caché

Comme indiqué précédemment, nous besoin d'ajouter un formulaire HTML caché que les robots de construction Netlify Forms peuvent analyser. Les soumissions seront ensuite envoyées de notre formulaire réactif au formulaire HTML masqué. Le formulaire HTML est placé dans le fichier index.html .

Ce formulaire doit avoir le même nom que le formulaire réactif. De plus, il doit contenir trois autres attributs: netlify netlify-honeypot et hidden . Les bots recherchent tous les formulaires qui ont l'attribut netlify afin que Netlify puisse traiter les entrées de ceux-ci. L'attribut netlify-honeypot est ajouté pour empêcher l'affichage des captchas lors d'une soumission et pour une protection supplémentaire contre le spam.

Il est important de noter que puisque vous ne pouvez pas définir la valeur de file éléments d'entrée, vous ne pouvez pas télécharger un fichier en utilisant cette méthode.

Faire une demande de publication au formulaire caché

Pour envoyer une soumission du formulaire réactif au formulaire HTML, nous allons faire un demande de message contenant la soumission à index.html . L'opération sera effectuée dans la méthode onSubmit du FeedbackComponent .

Cependant, avant de pouvoir faire cela, nous devons créer deux choses: un Feedback ] et un NetlifyFormsService . Commençons par l'interface.

 touchez src / app / feedback / feedback.ts

Le contenu de ce fichier sera:

 interface d'exportation Commentaires {
   firstName: chaîne;
   lastName: chaîne;
   email: chaîne;
   type: chaîne;
   description: chaîne;
   classement: nombre;
}

Le NetlifyFormsService contiendra une méthode publique pour soumettre une entrée de rétroaction, une méthode privée pour soumettre une entrée générique et une autre privée pour gérer les erreurs. Vous pouvez ajouter d'autres méthodes publiques pour des formulaires supplémentaires.

Pour le générer, exécutez la commande suivante:

 ng g s netlify-forms / nelify-forms

La méthode submitEntry renvoie un Observable car Netlify envoie une page HTML avec une alerte de réussite une fois que nous publions des données sur le formulaire. Voici le service:

 import {Injectable} from '@ angular / core';
import {HttpClient, HttpErrorResponse, HttpParams} depuis '@ angular / common / http';
import {Commentaires} de '../feedback/feedback';
import {Observable, throwError} de 'rxjs';
import {catchError} depuis 'rxjs / operators';

@Injectable ({
  providedIn: 'racine'
})
classe d'exportation NetlifyFormsService {

  constructeur (http privé: HttpClient) {}

  submitFeedback (fbEntry: Feedback): Observable  {
    entrée const = new HttpParams ({fromObject: {
      'form-name': 'feedbackForm',
      ... fbEntrée,
      'évaluation': fbEntry.rating.toString (),
    }});

    return this.submitEntry (entrée);
  }

  private submitEntry (entrée: HttpParams): Observable  {
    renvoyer this.http.post (
      '/',
      entrée.toString (),
      {
        headers: {'Content-Type': 'application / x-www-form-urlencoded'},
        responseType: 'texte'
      }
    ) .pipe (catchError (this.handleError));
  }

  handleError privé (err: HttpErrorResponse) {
    laissez errMsg = '';

    if (err.error instanceof ErrorEvent) {
      errMsg = ʻUne erreur côté client s'est produite: $ {err.error.message} `;
    } autre {
      errMsg = ʻUne erreur côté serveur s'est produite. Code: $ {err.status}. Message: $ {err.message} `;
    }

    return throwError (errMsg);
  }
}

Nous vous enverrons le formulaire sous la forme HttpParams . Un en-tête du ContentType doit être inclus avec la valeur application / x-www-form-urlencoded . L'option responseType est spécifiée comme text car en cas de succès, la publication dans le formulaire masqué renverra une page HTML contenant un message de réussite générique de Netlify. Si vous n'incluez pas cette option, vous obtiendrez une erreur car la réponse sera analysée comme JSON . Voici une capture d'écran du message de réussite générique Netlify.

Dans le FeedbackComponent ]nous importerons le NetlifyFormsService et le Router . Nous soumettrons l'entrée de formulaire à l'aide de la méthode NetlifyFormsService.submitEntry . Si la soumission est réussie, nous redirigerons vers la page de soumission réussie et réinitialiserons le formulaire. Nous utiliserons le service Router pour la redirection. En cas d'échec, la propriété errorMsg recevra le message d'erreur et sera affichée sur le formulaire.

 import {Router} from '@ angular / router';
import {NetlifyFormsService} depuis '../netlify-forms/netlify-forms.service';

Ensuite, injectez à la fois le NetlifyFormsService et le Router dans le constructeur.

 constructeur (
   privé fb: FormBuilder,
   routeur privé: routeur,
   netlifyForms privé: NetlifyFormsService
) {}

Enfin, appelez la méthode NetlifyFormsService.submitEntry dans FeedbackComponent.onSubmit .

 onSubmit () {
this.netlifyForms.submitFeedbackEntry (this.feedbackForm.value) .subscribe (
   () => {
     this.feedbackForm.reset ();
     this.router.navigateByUrl ('/ success');
   },
   err => {
     this.errorMsg = err;
   }
 );
}

Créer une page de soumission réussie

Lorsqu'un utilisateur termine une soumission, Netlify renvoie un message de réussite générique affiché dans la dernière capture d'écran de la section précédente. Cependant, vous pouvez créer un lien vers votre propre page de message de réussite personnalisée. Pour ce faire, ajoutez l'attribut action au formulaire HTML masqué. Sa valeur est le chemin relatif vers votre page de réussite personnalisée. Ce chemin doit commencer par / et être relatif à votre site racine.

La définition d'une page de réussite personnalisée ne semble toutefois pas fonctionner lors de l'utilisation d'un formulaire HTML masqué. Si la demande de publication dans le formulaire HTML masqué aboutit, elle renvoie le message de réussite Netlify générique sous forme de page HTML. Il ne redirige pas même lorsqu'un attribut action est spécifié. Nous allons donc à la place accéder à la page de message de réussite après une soumission à l’aide du service Router .

Tout d’abord, ajoutons du contenu au SuccessComponent que nous avons généré précédemment. Dans success.component.html ajoutez:

    
 Merci! 
    

    
 Votre envoi de commentaires a été réussi. 
    
 Merci de partager vos commentaires avec nous! 
     Donnez plus de commentaires 

Pour styliser la page, ajoutez ceci à success.component.css :

 p {
    marge: .2rem 0 0 0;
    text-align: centre;
}

Voici à quoi ressemble la page:

Dans la classe FeedbackComponent nous déjà ajouté le service Router en tant qu'importation et l'injecté dans le constructeur. Dans sa méthode onSubmit une fois la requête réussie et le formulaire réinitialisé, nous accédons à la page de soumission réussie, / success . Pour ce faire, nous utilisons la méthode navigateByUrl du routeur.

Création de la page 404

La page 404 n'est peut-être pas nécessaire mais elle est agréable à avoir. Le contenu de page-non-trouvée.component.html serait:

    
 Page introuvable! 
    

    
 Désolé! La page n'existe pas. 
     Aller à l'accueil 

Pour le styliser, ajoutez ceci à page-not-found.component.css :

 p {
    text-align: centre;
}

Voici à quoi ressemblera la page 404.

Correction du routage avant le déploiement

Depuis que nous utilisons le service Router tout notre routage se fait sur le client. Si un lien vers une page de notre application est collé dans la barre d'adresse (lien profond) ou s'il y a une actualisation de la page, cette demande nous sera envoyée à notre serveur. Le serveur ne contient aucune de nos routes car elles ont été configurées dans le frontend, dans notre application. Nous recevrons un état 404 dans ces instances.

Pour résoudre ce problème, nous devons demander au serveur Netlify de rediriger toutes les requêtes vers notre page index.html . De cette façon, notre routeur angulaire peut les gérer. Si vous êtes intéressé, vous pouvez en savoir plus sur ce phénomène ici et ici .

Nous allons commencer par créer un fichier _redirects dans notre dossier src . Le fichier _redirects est un fichier texte brut qui spécifie les règles de redirection et de réécriture pour le site Netlify. Il doit résider dans le répertoire du site de publication du site ( dist / ). Nous le placerons dans le dossier src et le spécifierons en tant qu'élément dans le fichier angular.json . Lorsque l'application est compilée, elle sera placée dans dist / .

 touchez src / _redirects

Ce fichier contiendra la règle ci-dessous. Il indique que toutes les requêtes adressées au serveur doivent être redirigées vers index.html . Nous ajoutons également une option de code d'état HTTP à la fin pour indiquer que ces redirections doivent renvoyer un état 200 . Par défaut, un état 301 est renvoyé.

 / * /index.html 200

La dernière chose que nous devons faire est d'ajouter l'option ci-dessous dans nos angular.json und er projets> {your_project_name}> architect> options> assets . Incluez-le dans le tableau assets :

 {
  "glob": "_redirects",
  "entrée": "src",
  "production": "/"
}

Prévisualisez votre application localement

Avant de pouvoir déployer l'application de commentaires, il est préférable de la prévisualiser. Cela vous permet de vous assurer que votre site fonctionne comme vous l'aviez prévu. Vous pouvez découvrir des problèmes résultant du processus de construction, tels que des chemins brisés vers des ressources, entre autres. Tout d'abord, vous devrez créer votre application. Nous diffuserons ensuite la version compilée à l'aide d'un serveur. Nous utiliserons lite-server qui est un serveur léger de rechargement en direct pour les applications Web.

Remarque : Puisque l'application n'est pas encore déployée sur Netlify, vous obtiendrez une erreur 404 lorsque vous tenterez de faire la demande de publication. En effet, les formulaires Netlify ne fonctionnent que sur les applications déployées. Vous verrez une erreur sur le formulaire comme indiqué dans la capture d'écran ci-dessous, cependant, cela fonctionnera une fois que vous l'avez déployé.

1. Pour commencer, installez lite-server :

    npm install lite-server --save-dev
   

2. Ensuite, dans le répertoire de l'espace de travail de votre application, créez votre application. Pour vous assurer que les compilations sont exécutées chaque fois que vos fichiers changent, passez le drapeau - watch . Une fois l'application compilée, les résultats sont écrits dans le répertoire de sortie dist / . Si vous utilisez un système de contrôle de version, assurez-vous de ne pas archiver le dossier dist car il est généré et sert uniquement à des fins de prévisualisation.

    ng build --watch
   

3. Pour servir le site compilé, exécutez le lite-server sur le répertoire de sortie de la construction.

    lite-server --baseDir = "dist / "
   

Le site est maintenant desservi à localhost: 3000 . Vérifiez-le sur votre navigateur et assurez-vous qu'il fonctionne comme prévu avant de commencer son déploiement.

Déploiement

Il existe plusieurs façons de déployer votre projet Angular sur Netlify Edge. Nous en couvrirons trois ici:

1. Using netlify-builder
2. Using Git and the Netlify web UI
3. Using the Netlify CLI tool .

1 . L'utilisation de netlify-builder

netlify-builder facilite le déploiement d'applications angulaires via la CLI angulaire. Pour utiliser cette méthode, votre application doit avoir été créée à l'aide de Angular CLI v8.3.0 ou version ultérieure.

1. Dans l'onglet Sites de votre tableau de bord Netlify, créez un nouveau projet. Puisque nous n'utiliserons pas Git pour créer un projet, faites glisser n'importe quel dossier vide vers la zone de bordure pointillée marquée "Glissez et déposez votre dossier de site ici" . Cela créera automatiquement un projet avec un nom aléatoire. Vous pouvez modifier ce nom dans les paramètres de domaine du site ultérieurement si vous le souhaitez.
   

   

   Voici ce que vous devriez voir une fois votre projet créé.

   

2. Avant de pouvoir effectuer un déploiement à l'aide de cette méthode, vous devez obtenir l'ID API du projet Netlify et un jeton d'accès personnel Netlify à partir de votre compte. Vous pouvez obtenir l'ID d'API du projet à partir des paramètres du site. Sous Paramètres du site> Général> Détails du site> Informations sur le site vous trouverez l'ID API de votre projet.
   

   

   

   Vous pouvez obtenez un jeton d'accès personnel dans vos paramètres utilisateur. Dans Paramètres utilisateur> Applications> Jetons d'accès personnels cliquez sur le bouton Nouveau jeton d'accès . Lorsque vous y êtes invité, entrez la description de votre token, puis cliquez sur le bouton Generate Token . Copiez votre jeton. Par souci de persistance, vous pouvez stocker ces valeurs dans un fichier .env au sein de votre projet, mais ne pas archiver ce fichier si vous utilisez un système de contrôle de version.

   

   

   

   

3. Ensuite, ajoutez netlify-builder à votre projet en utilisant ng add .

    ng add @ netlify-builder /déployer
   

   Une fois l'installation terminée, vous serez invité à ajouter l'ID API et le jeton d'accès personnel.

   

   Il est facultatif de les ajouter ici. Vous pouvez ignorer cette invite car elle sera ajoutée à votre fichier angular.json qui est généralement archivé si vous utilisez un système de contrôle de version. Il n’est pas sûr de stocker ce type d’informations sensibles sur des dépôts de code. Si vous ne consignez pas ce fichier, vous pouvez simplement saisir votre ID API et votre jeton d'accès personnel. L'entrée ci-dessous sera modifiée dans votre fichier angular.json sous les paramètres architect .

    "deploy": {
       "builder": "@ netlify-builder / deploy: deploy",
       "options": {
       "outputPath": "dist / ",
       "netlifyToken": "",
       "ID du site": ""
       }
   }
   

4. Il ne vous reste plus qu'à déployer votre application en exécutant:

    NETLIFY_TOKEN =  NETLIFY_API_ID =  ng deploy
   

   Vous pouvez également le mettre dans un script et l'exécuter lorsque vous devez déployer votre application.

    # Pour créer le script
   touch deploy.sh && echo "NETLIFY_TOKEN =  NETLIFY_API_ID =  ng deploy" >> deploy.sh && chmod + x deploy.sh
   
   # Déployer
   ./deploy.sh
   

   Voici la sortie que vous devriez voir une fois que vous exécutez cette commande: