Construire et déployer un formulaire angulaire avec Netlify Forms et Edge

La création du workflow frontend, backend et de déploiement d'une application demande beaucoup de travail. Dans les cas où votre application ne collecte qu'une quantité limitée de soumissions de données de la part de ses utilisateurs, la création d'un backend complet peut ne pas valoir le temps et les efforts nécessaires. Une alternative au développement d'un backend complet consiste à utiliser Netlify Forms. Dans ce tutoriel, je vais vous expliquer comment vous pouvez 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.

La boîte à outils

Un formulaire réactif angulaire est un formulaire qui a un modèle de données structuré créé explicitement dans une classe de composants à l'aide des 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 une 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. Étant donné que les éléments d'entrée de formulaire sont 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, déployer et héberger des sites construits avec diverses technologies. Les sites construits avec Angular peuvent être hébergés sur Netlify. Netlify fournit en outre une multitude d'outils qui simplifient, automatisent et augmentent les constructions et les déploiements de ces sites. Nous allons utiliser deux de ses produits dans ce tutoriel : 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 des formulaires HTML. Il 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 encore la configuration nécessaire pour configurer les soumissions de formulaires. La gestion des soumissions est configurée lors du déploiement où les fichiers HTML d'un site sont analysés par les robots de construction de Netlify.

Netlify Edge est un réseau mondial de diffusion d'applications sur lequel des sites et des applications sont publiés. Il fournit des fonctionnalités telles que les tests A/B, les restaurations, la mise en scène et les déploiements progressifs. 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 de prévisualisation et de branche (mise en scène, développement, etc.).

La gestion de la soumission de Netlify Forms fonctionne car les bots 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 Angular compilés ne seront pas trouvés par ces bots. Ainsi, la configuration normale de Netlify Forms ne fonctionnera pas avec Angular Forms.

Cependant, il existe une solution de rechange à cela. Pour qu'il reçoive des soumissions, un formulaire HTML brut caché est ajouté au fichier index.html . Ce formulaire fonctionne avec les robots 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 développerons également un service pour faire une demande de publication sur le formulaire HTML caché. 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 à de nombreux sites Web. Nous utiliserons ce formulaire pour recueillir les commentaires/réclamations, les questions et les 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

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

 npm install -g @angular/cli

Si vous n'avez pas encore créé de compte Netlify, vous pouvez en créer un ici. Netlify propose une inscription via Github, Gitlab, Bitbucket ou Email. Selon la méthode de déploiement que vous choisissez, il peut y avoir 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 composants : un formulaire de commentaires, une page de message de soumission réussie et une page 404. Les formulaires Netlify vous permettent de naviguer vers une page lors de la soumission réussie d'une entrée de formulaire. C'est pour cela que nous utiliserons SuccessComponent .

 ng gc feedback ng gc success ng gc page-not-found

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

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

Nous allons utiliser le service FormBuilder pour créer notre formulaire réactif. En effet, il est plus pratique et moins répétitif que d'utiliser des 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 sur le formulaire HTML caché, nous devons également enregistrer le HttpClientModule .

 import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ // other imports ReactiveFormsModule, HttpClientModule ] }) export class AppModule { }

Continuez à modifier le contenu de app.component.html pour n'avoir que la prise du routeur.

 <router-outlet></router-outlet>

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

 html, body { height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; } h1 { margin: 0; text-align: center; } h1, p, label { font-family: Arial, Helvetica, sans-serif; } p { max-width: 25rem; } #container { border: none; padding: .4rem; border-radius: 0; flex-direction: column; display: flex; } hr { width: 80%; } button { color: white; background-color: black; font-size: large; padding: .5rem; border-radius: .5rem; margin-top: 1rem; } @media screen and (min-height: 700px) { html, body { align-items: center; justify-content: center; } } @media screen and (min-width: 480px) { #container { border: .1rem solid lightgray; padding: 2rem; border-radius: .5rem; } html, body { align-items: center; justify-content: center; } }

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 allons également importer la classe Validators pour la validation des entrées de formulaire.

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

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

 constructor(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 l'entrée du formulaire. Une méthode closeError est également incluse 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 de email .

 export class FeedbackComponent { feedbackForm = this.fb.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], email: ['', [Validators.email, Validators.required]], type: ['', Validators.required], description: ['', Validators.required], rating: [0, Validators.min(1)] }); errorMsg = ''; closeError() { this.errorMsg = ''; } // ... }

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

 <div> <div class="error" [class.hidden]="errorMsg.length == 0"> <p>{{errorMsg}}</p> <span (click)="closeError()" class="close">︎</span> </div> <h1>Feedback Form</h1> <hr> <p>We'd like your feedback to improve our website.</p> <form [formGroup]="feedbackForm" name="feedbackForm" (ngSubmit)="onSubmit()"> <div> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="suggestion"> <label for="suggestion">Suggestion</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="comment"> <label for="comment">Comment</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="question"> <label for="question">Question</label><br> </p> </div> <div class="inputContainer"> <label>Description:</label> <textarea rows="6" formControlName="description"></textarea> </div> <div class="inputContainer"> <div> <label>How would you rate our site?</label> <label>{{feedbackForm.value?.rating}}</label> </div> <input formControlName="rating" type="range" name="rating" max="5"> </div> <div class="inputContainer"> <label>Name:</label> <div class="nameInput"> <input formControlName="firstName" type="text" name="firstName" placeholder="First"> <input formControlName="lastName" type="text" name="lastName" placeholder="Last"> </div> </div> <div class="inputContainer"> <label>Email:</label> <input formControlName="email" type="email" name="email"> </div> <div class="inputContainer"> <button type="submit" [disabled]="feedbackForm.invalid">Submit Feedback</button> </div> </form> </div>

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

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

 #options { display: flex; flex-direction: column; } #options label { margin: 0 0 0 .2rem; } .radioOption { margin: 0 0 .2rem 0; } .inputContainer { display: flex; flex-direction: column; margin: .5rem 0 .5rem 0; } label { margin: .5rem 0 .5rem 0; } .nameInput { display: flex; flex-direction: column; } button:disabled { cursor: not-allowed; pointer-events: all; background-color: slategrey; } #ratingLabel { display: flex; justify-content: space-between; margin: .5rem 0 .5rem 0; } #ratingValue { font-weight: bolder; font-size: large; border: .1rem solid lightgray; padding: .4rem .6rem .1rem .6rem; margin: 0; vertical-align: middle; border-radius: .3rem; } .error { color: darkred; background-color: lightsalmon; border: .1rem solid crimson; border-radius: .3rem; padding: .5rem; text-align: center; margin: 0 0 1rem 0; display: flex; width: inherit; } .error p { margin: 0; flex-grow: 1; } textarea, input { margin: .1rem; font-family: Arial, Helvetica, sans-serif; padding: 5px; font-size: medium; font-weight: lighter; } .close { cursor: default; } .hidden { display: none; } @media screen and (min-width: 480px) { #options { flex-direction: row; justify-content: space-around; } .nameInput { flex-direction: row; justify-content: space-between; } }

Voici à quoi ressemblera le formulaire :

Ajout d'un formulaire HTML masqué

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

Ce formulaire doit porter 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 leurs entrées. L' netlify-honeypot est ajouté pour empêcher l'affichage des captchas lors d'une soumission et permet une protection supplémentaire contre le spam.

 <!doctype html> <html lang="en"> <!-- Head --> <body> <form name="feedbackForm" netlify netlify-honeypot="bot-field" hidden> <input type="text" name="firstName"/> <input type="text" name="lastName"/> <input type="text" name="email"/> <input type="text" name="feedbackType"/> <input type="text" name="description"/> <input type="text" name="rating"/> </form> <app-root></app-root> </body> </html>

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

Faire une demande de publication sur le formulaire caché

Pour envoyer une soumission du formulaire réactif au formulaire HTML, nous ferons une demande de publication 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 : une interface Feedback et un NetlifyFormsService . Commençons par l'interface.

 touch src/app/feedback/feedback.ts

Le contenu de ce fichier sera :

 export interface Feedback { firstName: string; lastName: string; email: string; type: string; description: string; rating: number; }

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 gs netlify-forms/netlify-forms

La méthode submitEntry renvoie un Observable<string> car Netlify envoie une page HTML avec une alerte de réussite une fois que nous avons publié des données sur le formulaire. C'est la prestation :

 import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } }

Nous enverrons la soumission du formulaire en tant que HttpParams . Un en-tête pour le ContentType doit être inclus avec la valeur application/x-www-form-urlencoded . L'option responseType est spécifiée sous forme de text car en cas de succès, la publication sur 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 en tant que JSON . Vous trouverez ci-dessous une capture d'écran du message de réussite générique de Netlify.

Dans la classe FeedbackComponent , nous allons importer les NetlifyFormsService et 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 se verra attribuer le message d'erreur et s'affichera sur le formulaire.

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

Après cela, injectez à la fois NetlifyFormsService et Router dans le constructeur.

 constructor( private fb: FormBuilder, private router: Router, private netlifyForms: 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.

Toutefois, la définition d'une page de réussite personnalisée ne semble pas fonctionner lors de l'utilisation d'un formulaire HTML masqué. Si la demande de publication sur le formulaire HTML masqué réussit, elle renvoie le message de réussite générique de Netlify sous forme de page HTML. Il ne redirige pas même lorsqu'un attribut d' action est spécifié. Ainsi, à la place, nous naviguerons vers 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 :

 <div> <h1>Thank you!</h1> <hr> <p>Your feedback submission was successful.</p> <p>Thank you for sharing your thoughts with us!</p> <button routerLink="/">Give More Feedback</button> </div>

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

 p { margin: .2rem 0 0 0; text-align: center; }

Voici à quoi ressemble la page :

Dans la classe FeedbackComponent , nous avons déjà ajouté le service Router en tant qu'import et l'avons injecté dans le constructeur. Dans sa méthode onSubmit , une fois la demande réussie et le formulaire réinitialisé, nous naviguons vers la page de soumission réussie, /success . Nous utilisons la méthode navigateByUrl du routeur pour ce faire.

Création de la page 404

La page 404 n'est peut-être pas nécessaire, mais c'est un plaisir d'avoir. Le contenu de page-not-found.component.html serait :

 <div> <h1>Page Not Found!</h1> <hr> <p>Sorry! The page does not exist.</p> <button routerLink="/">Go to Home</button> </div>

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

 p { text-align: center; }

Voici à quoi ressemblera la page 404.

Corriger le routage avant le déploiement

Puisque nous utilisons le service Router , tout notre routage est effectué 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 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 statut 404 dans ces cas.

Pour résoudre ce problème, nous devons dire 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/<app_name> ). Nous allons le placer dans le dossier src et le spécifier en tant qu'actif dans le fichier angular.json . Lorsque l'application est compilée, elle sera placée dans dist/<app_name> .

 touch 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 de statut HTTP à la fin pour indiquer que ces redirections doivent renvoyer un statut 200 . Par défaut, un statut 301 est renvoyé.

 /* /index.html 200

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

 { "glob": "_redirects", "input": "src", "output": "/" }

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 servirons 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 : Étant donné que 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, Netlify Forms ne fonctionne 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'aurez 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 builds sont exécutés à chaque fois que vos fichiers changent, passez-lui l'indicateur --watch . Une fois l'application compilée, les résultats sont écrits dans le répertoire de sortie dist/<app name> . 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 construction.
   

    lite-server --baseDir="dist/<app name>"

Le site est maintenant servi sur 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 aborderons trois ici :

1. En utilisant netlify-builder ,
2. En utilisant Git et l'interface utilisateur Web Netlify,
3. Utilisation de l'outil Netlify CLI.

1. Utiliser netlify-builder

netlify-builder facilite le déploiement des applications angulaires via la CLI angulaire. Pour utiliser cette méthode, votre application doit avoir été créée à l'aide d'Angular CLI v8.3.0 ou supé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 dans la zone à 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 ultérieurement dans les paramètres de domaine du site si vous le souhaitez.
   

   

   
   C'est ce que vous devriez voir une fois votre projet créé.
   

   

2. Avant de pouvoir déployer à l'aide de cette méthode, vous devrez obtenir l'ID d' API du projet Netlify et un jeton d'accès personnel Netlify à partir de votre compte. Vous pouvez obtenir l'ID de l'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 obtenir un jeton d'accès personnel dans vos paramètres d'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 jeton, puis cliquez sur le bouton Générer un jeton . Copiez votre jeton. Par souci de persistance, vous pouvez stocker ces valeurs dans un fichier .env au sein de votre projet, mais n'archivez pas 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/deploy

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

   

   
   Il est facultatif de les ajouter ici. Vous pouvez ignorer cette invite car ils seront ajoutés à 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 les dépôts de code. Si vous n'archivez pas ce fichier, vous pouvez simplement saisir votre ID d'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 de l' architect .
   

    "deploy": { "builder": "@netlify-builder/deploy:deploy", "options": { "outputPath": "dist/<app name>", "netlifyToken": "", "siteId": "" } }

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

    NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy

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

    # To create the script touch deploy.sh && echo "NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy" >> deploy.sh && chmod +x deploy.sh # To deploy ./deploy.sh

   C'est la sortie que vous devriez voir une fois que vous exécutez cette commande :
   

   

2. Utilisation de Git et de l'interface utilisateur Web Netlify

Si le code de votre application Angular est hébergé sur Github, Bitbucket ou Gitlab, vous pouvez héberger le projet à l'aide de l'interface utilisateur Web de Netlify.

1. Dans l'onglet Sites de votre tableau de bord Netlify, cliquez sur " Nouveau site à partir du bouton Git ».
   

   

2. Connectez-vous à un service de référentiel de code. Choisissez le service sur lequel votre code d'application est hébergé. Vous serez invité à autoriser Netlify à afficher vos référentiels. Cela sera différent d'un service à l'autre.
   

   

3. Choisissez votre référentiel de code.
   

   

4. Ensuite, vous spécifierez les déploiements et les paramètres de génération. Dans ce cas, sélectionnez la branche à partir de laquelle vous souhaitez déployer, spécifiez la commande build comme ng deploy --prod et le répertoire de publication comme dist/<your app name> .
   

   

5. Cliquez sur le bouton Déployer le site et vous avez terminé.

3. Utilisation de l'outil Netlify CLI

1. Pour commencer, installez l'outil Netlify CLI comme suit :
   

    npm install netlify-cli -g

   Si l'installation réussit, vous devriez voir ces résultats sur votre terminal :
   

   

2. Ensuite, connectez-vous à Netlify en exécutant :
   

    netlify login

   Lorsque vous exécutez cette commande, elle navigue vers une fenêtre de navigateur où vous serez invité à autoriser la CLI Netlify. Cliquez sur le bouton Authorize . Vous pouvez ensuite procéder à la fermeture de l'onglet une fois l'autorisation accordée.

   

   

3. Pour créer un nouveau projet Netlify, exécutez ce qui suit sur votre terminal :
   

    netlify init

   Vous serez invité à connecter votre application Angular à un projet Netlify existant ou à en créer un nouveau. Choisissez l'option Créer et configurer un nouveau site .

   

   Ensuite, sélectionnez votre équipe et un nom pour le site que vous souhaitez déployer. Une fois le projet créé, l'outil CLI répertorie les détails du site pour votre projet.
   

   

   Après quoi, l'outil CLI vous invitera à connecter votre compte Netlify à un fournisseur d'hébergement Git pour configurer les webhooks et déployer les clés. Vous ne pouvez pas vous désinscrire. Choisissez une option pour vous connecter puis autorisez Netlify.
   

   

   Ensuite, il vous sera demandé d'entrer une commande de construction. Utiliser:
   

    ng build --prod

   Ensuite, il vous sera demandé de fournir un répertoire à déployer. Entrez dist/<app name> avec le nom de votre application.
   

   

   À la fin de cela, la commande se terminera et affichera cette sortie.
   

   

4. Pour déployer l'application, exécutez :
   

    netlify deploy --prod

   L'utilisation de l'indicateur --prod garantit que la build est déployée en production. Si vous omettez cet indicateur, la commande netlify deploy déploiera votre build sur un brouillon d'URL unique utilisé pour les tests et la prévisualisation. Une fois le déploiement terminé, vous devriez voir cette sortie :
   

   

Affichage des soumissions de formulaire

Les soumissions de formulaires peuvent être consultées sur le tableau de bord Netlify sous l'onglet Formulaires de votre site. Vous pouvez le trouver sur app.netlify.com/sites/<your_site_name>/forms . Sur cette page, tous vos formulaires actifs seront listés. L'attribut de nom que vous mettez dans l'élément de formulaire masqué est le nom du formulaire sur le tableau de bord.

Une fois que vous avez sélectionné un formulaire, toutes les soumissions pour ce formulaire seront répertoriées. Vous pouvez choisir de télécharger toutes les entrées sous forme de fichier CSV, de les marquer comme spam ou de les supprimer.

Conclusion

Les formulaires Netlify vous permettent de collecter la soumission de formulaires à partir de votre application sans avoir à créer ou à configurer un backend pour le faire. Cela peut être utile en particulier dans les applications qui n'ont besoin de collecter qu'une quantité limitée de données telles que les informations de contact, les commentaires des clients, les inscriptions à des événements, etc.

Associer les formulaires réactifs angulaires aux formulaires Netlify vous permet de structurer votre modèle de données. Les formulaires réactifs angulaires ont l'avantage supplémentaire d'avoir leur modèle de données et leurs éléments de formulaire synchronisés les uns avec les autres. Ils ne reposent pas sur le rendu de l'interface utilisateur.

Bien que Netlify Forms ne fonctionne que lorsqu'il est déployé sur Netlify Edge, la plate-forme d'hébergement est assez robuste, fournit des fonctionnalités utiles telles que les tests A/B et automatise les constructions et les déploiements d'applications.

• Voir le code source de ce projet →

Vous pouvez continuer à en savoir plus sur l'utilisation de Netlify avec vos formulaires ici.