Costruisci e distribuisci un modulo angolare con Netlify Forms e Edge

La creazione del flusso di lavoro di front-end, back-end e distribuzione di un'app richiede molto lavoro. Nei casi in cui la tua app raccoglie solo una quantità limitata di dati inviati dai suoi utenti, la creazione di un intero back-end potrebbe non valere il tempo e lo sforzo. Un'alternativa allo sviluppo di un back-end completo è l'utilizzo di Netlify Forms. In questo tutorial, spiegherò come utilizzare un modulo reattivo Angular con Netlify Forms. Poiché Netlify Forms funziona solo se distribuito su Netlify, illustrerò anche come distribuire la tua app su Netlify Edge.

La cassetta degli attrezzi

Un modulo reattivo angolare è un modulo che dispone di un modello di dati strutturato creato in modo esplicito all'interno di una classe componente utilizzando i provider ReactiveFormsModule. Viene creato un modello di modulo per ogni elemento di input all'interno della vista modulo. Questo modello di modulo è un'istanza della classe FormControl e tiene traccia del valore dell'elemento del modulo. Il modello di modulo non è modificabile perché ogni volta che viene apportata una modifica al modello, l'istanza di FormControl restituisce un nuovo modello di dati invece di aggiornare il vecchio modello. La sua immutabilità rende il rilevamento delle modifiche più efficiente e consente l'alterazione dei dati con operatori osservabili. Poiché gli elementi di input del modulo sono direttamente collegati ai relativi modelli di modulo, gli aggiornamenti tra di essi sono sincroni e non si basano sul rendering dell'interfaccia utente.

Netlify è una piattaforma che ti consente di creare, distribuire e ospitare siti costruiti con varie tecnologie. I siti creati con Angular possono essere ospitati su Netlify. Netlify fornisce inoltre una serie di strumenti che semplificano, automatizzano e aumentano le build e le implementazioni di questi siti. Utilizzeremo due dei suoi prodotti in questo tutorial: Netlify Edge e Netlify Forms.

Come descritto in precedenza, Netlify Forms è una funzione di gestione dei moduli che riceve automaticamente gli invii dai moduli HTML. Non richiede alcuna configurazione di elaborazione dell'invio, come la creazione di API, script, ecc. Questa funzione funziona solo con i moduli nei siti distribuiti su Netlify. È abilitato per impostazione predefinita, riducendo ulteriormente la configurazione necessaria per impostare gli invii dei moduli. La gestione dell'invio viene impostata durante la distribuzione in cui i file HTML di un sito vengono analizzati dai bot di build di Netlify.

Netlify Edge è una rete globale di distribuzione di applicazioni su cui vengono pubblicati siti e applicazioni. Fornisce funzionalità come test A/B, rollback, staging e implementazioni graduali. Tutte le distribuzioni su Netlify Edge sono atomiche, il che significa che un sito è attivo solo quando tutti i file sono stati caricati/aggiornati e le modifiche al sito sono pronte. Una volta che un sito è stato distribuito, gli viene assegnato un sottodominio su netlify.app quando viene distribuito in produzione. Netlify Edge supporta anche anteprime e implementazioni di filiali (staging, sviluppo, ecc.).

La gestione dell'invio di Netlify Forms funziona perché i bot di build analizzano i moduli HTML su un sito durante la distribuzione. I moduli resi Javascript lato client come quelli nei siti Angular compilati non verranno trovati da questi bot. Quindi la normale configurazione per Netlify Forms non funzionerà con Angular Forms.

Tuttavia, c'è una soluzione a questo. Per ricevere gli invii, viene aggiunto un semplice modulo HTML nascosto al file index.html . Questo modulo funziona con i robot di compilazione. Quando si invia il modulo angolare, viene inviata una richiesta di post a questo modulo nascosto che viene quindi acquisito da Netlify Forms.

In questo articolo creeremo un modulo reattivo. Svilupperemo anche un servizio per effettuare una richiesta di post nel modulo HTML nascosto. Infine, distribuiremo l'app su Netlify Edge.

Esempio

Per illustrare come creare l'app, faremo un esempio di un modulo di feedback comune su molti siti Web. Utilizzeremo questo modulo per raccogliere commenti/reclami, domande e suggerimenti dagli utenti del sito insieme al loro nome ed e-mail. Lo useremo anche per raccogliere la loro valutazione del sito.

Requisiti

Per seguire questo tutorial, avrai bisogno di un account Netlify e di Angular CLI installati. Se non hai la CLI, puoi installarla usando npm.

 npm install -g @angular/cli

Se non hai ancora registrato un account Netlify, puoi crearne uno qui. Netlify offre la registrazione tramite Github, Gitlab, Bitbucket o Email. A seconda del metodo di distribuzione scelto, potrebbero essere altri requisiti. Saranno indicati in ciascun metodo di distribuzione.

Configurazione dell'app

Per iniziare, creeremo l'app e la chiameremo feedback . Quando lo crei, aggiungi il routing quando richiesto nei prompt.

 ng new feedback

Successivamente, genereremo tre componenti: un modulo di feedback, una pagina del messaggio di invio riuscito e una pagina 404. I moduli Netlify ti consentono di passare a una pagina dopo aver inviato correttamente l'inserimento del modulo. È per questo che useremo SuccessComponent .

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

Dopo aver generato i componenti, aggiungeremo i percorsi a ciascuna pagina in AppRoutingModule all'interno del file app-routing.module.ts .

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

Useremo il servizio FormBuilder per creare il nostro modulo reattivo. Questo perché è più conveniente e meno ripetitivo rispetto all'utilizzo dei controlli di base dei moduli. Per accedervi, dovremo registrare il ReactiveFormsModule nel file app.module.ts .

Poiché faremo una richiesta di post al modulo HTML nascosto, dobbiamo anche registrare HttpClientModule .

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

Procedi a modificare il contenuto di app.component.html per avere solo la presa del router.

 <router-outlet></router-outlet>

Le diverse pagine condivideranno uno stile. Quindi aggiungi lo stile di seguito a 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; } }

Crea la forma reattiva

Nella nostra classe FeedbackComponent , inizieremo importando il servizio FormBuilder che utilizzeremo per creare il modulo. Importeremo anche la classe Validators per la convalida dell'input del modulo.

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

Inietteremo quindi il servizio FormBuilder aggiungendolo al costruttore FeedbackComponent .

 constructor(private fb: FormBuilder) { }

Successivamente, definiremo il modello di modulo utilizzando il metodo di group del servizio FormBuilder iniettato. Aggiungeremo anche una proprietà errorMsg per contenere eventuali errori che potremmo incontrare durante l'invio dell'input del modulo. È incluso anche un metodo closeError che chiuderà l'avviso di errore visualizzato nel modulo.

Ogni controllo nel modello di modulo verrà verificato utilizzando validatori della classe Validators . Se uno qualsiasi degli input non riesce a convalidare, il modulo non sarà valido e l'invio sarà disabilitato. Puoi scegliere di aggiungere più validatori a un controllo modulo come nel caso del controllo e- 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 = ''; } // ... }

Nel modello del componente ( feedback.component.html ), lo aggiungeremo.

 <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>

Nota che l'elemento form dovrebbe avere l' [formGroup]="feedbackForm" corrispondente al modello che abbiamo appena creato. Inoltre, ciascuno degli elementi di input dovrebbe avere un formControlName="" corrispondente al controllo del modulo controparte nel modello.

Per definire lo stile del modulo, aggiungilo a 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; } }

Ecco come apparirà il modulo:

Aggiunta di un modulo HTML nascosto

Come affermato in precedenza, è necessario aggiungere un modulo HTML nascosto che i robot di compilazione Netlify Forms possono analizzare. Gli invii verranno quindi inviati dal nostro modulo reattivo al modulo HTML nascosto. Il modulo HTML viene inserito nel file index.html .

Questo modulo dovrebbe avere lo stesso nome del modulo reattivo. Inoltre, dovrebbe contenere altri tre attributi: netlify , netlify-honeypot e hidden . I bot cercano tutti i moduli che hanno l'attributo netlify in modo che Netlify possa elaborare gli input da essi. L'attributo netlify-honeypot viene aggiunto per evitare che i captcha vengano mostrati quando viene effettuato un invio e consente una protezione aggiuntiva contro lo 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>

È importante notare che poiché non è possibile impostare il valore degli elementi di input del file , non è possibile caricare un file utilizzando questo metodo.

Fare una richiesta di posta al modulo nascosto

Per inviare un invio dal modulo reattivo al modulo HTML, faremo una richiesta di post contenente l'invio a index.html . L'operazione verrà eseguita nel metodo onSubmit del FeedbackComponent .

Tuttavia, prima di poterlo fare, dobbiamo creare due cose: un'interfaccia Feedback e un NetlifyFormsService . Cominciamo con l'interfaccia.

 touch src/app/feedback/feedback.ts

Il contenuto di questo file sarà:

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

NetlifyFormsService conterrà un metodo pubblico per inviare una voce di feedback, un metodo privato per inviare una voce generica e un altro privato per gestire eventuali errori. È possibile aggiungere altri metodi pubblici per moduli aggiuntivi.

Per generarlo, eseguire quanto segue:

 ng gs netlify-forms/netlify-forms

Il metodo submitEntry restituisce un Observable<string> perché Netlify invia una pagina HTML con un avviso di esito positivo una volta inseriti i dati nel modulo. Questo è il servizio:

 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); } }

Invieremo l'invio del modulo come HttpParams . Un'intestazione per ContentType dovrebbe essere inclusa con il valore application/x-www-form-urlencoded . L'opzione responseType è specificata come text perché, in caso di successo, la pubblicazione nel modulo nascosto restituirà una pagina HTML contenente un messaggio di successo generico da Netlify. Se non includi questa opzione, riceverai un errore perché la risposta verrà analizzata come JSON . Di seguito è riportato uno screenshot del messaggio generico di successo di Netlify.

Nella classe FeedbackComponent importeremo NetlifyFormsService e Router . Invieremo la voce del modulo utilizzando il metodo NetlifyFormsService.submitEntry . Se l'invio va a buon fine, reindirizzeremo alla pagina di invio riuscito e reimposteremo il modulo. Useremo il servizio Router per il reindirizzamento. In caso di esito negativo, alla proprietà errorMsg verrà assegnato il messaggio di errore e verrà visualizzata nel modulo.

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

Successivamente, inietta sia NetlifyFormsService che Router nel costruttore.

 constructor( private fb: FormBuilder, private router: Router, private netlifyForms: NetlifyFormsService ) {}

Infine, chiama il metodo NetlifyFormsService.submitEntry in FeedbackComponent.onSubmit .

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

Crea una pagina di presentazione di successo

Quando un utente completa un invio, Netlify restituisce un messaggio di successo generico mostrato nell'ultimo screenshot della sezione precedente. Tuttavia, puoi ricollegarti alla tua pagina del messaggio di successo personalizzato. A tale scopo, aggiungi l'attributo action al modulo HTML nascosto. Il suo valore è il percorso relativo alla tua pagina di successo personalizzata. Questo percorso deve iniziare con / ed essere relativo al tuo sito radice.

L'impostazione di una pagina di successo personalizzata, tuttavia, non sembra funzionare quando si utilizza un modulo HTML nascosto. Se la richiesta di post nel modulo HTML nascosto ha esito positivo, restituisce il messaggio di successo di Netlify generico come pagina HTML. Non reindirizza anche quando viene specificato un attributo di action . Quindi, invece, passeremo alla pagina del messaggio di successo dopo un invio utilizzando il servizio Router .

Innanzitutto, aggiungiamo contenuto al SuccessComponent che abbiamo generato in precedenza. In success.component.html , aggiungi:

 <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>

Per dare uno stile alla pagina, aggiungi questo a success.component.css :

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

Ecco come appare la pagina:

Nella classe FeedbackComponent , abbiamo già aggiunto il servizio Router come importazione e lo abbiamo inserito nel costruttore. Nel suo metodo onSubmit , dopo che la richiesta è andata a buon fine e il modulo è stato reimpostato, passiamo alla pagina di invio riuscito, /success . Utilizziamo il metodo navigateByUrl del router per farlo.

Creazione della pagina 404

La pagina 404 potrebbe non essere necessaria ma è piacevole da avere. Il contenuto di page-not-found.component.html sarebbe:

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

Per modellarlo, aggiungi questo a page-not-found.component.css :

 p { text-align: center; }

Ecco come apparirà la pagina 404.

Correzione del routing prima della distribuzione

Poiché utilizziamo il servizio Router , tutto il nostro routing viene eseguito sul client. Se un collegamento a una pagina nella nostra app viene incollato nella barra degli indirizzi (deep link) o si verifica un aggiornamento della pagina, tale richiesta verrà inviata al nostro server. Il server non contiene nessuno dei nostri percorsi perché sono stati configurati nel frontend, nella nostra app. Riceveremo uno stato 404 in questi casi.

Per risolvere questo problema, dobbiamo dire al server Netlify di reindirizzare tutte le richieste alla nostra pagina index.html . In questo modo il nostro router Angular può gestirli. Se sei interessato, puoi leggere di più su questo fenomeno qui e qui.

Inizieremo creando un file _redirects nella nostra cartella src . Il file _redirects è un file di testo normale che specifica le regole di reindirizzamento e riscrittura per il sito Netlify. Dovrebbe risiedere nella directory del sito di pubblicazione del sito ( dist/<app_name> ). Lo posizioneremo nella cartella src e lo specificheremo come risorsa nel file angular.json . Quando l'app viene compilata, verrà inserita in dist/<app_name> .

 touch src/_redirects

Questo file conterrà la regola seguente. Indica che tutte le richieste al server devono essere reindirizzate a index.html . Aggiungiamo anche un'opzione del codice di stato HTTP alla fine per indicare che questi reindirizzamenti dovrebbero restituire uno stato 200 . Per impostazione predefinita, viene restituito uno stato 301 .

 /* /index.html 200

L'ultima cosa che dobbiamo fare è aggiungere l'opzione di seguito nel nostro angular.json in er projects > {your_project_name} > architect > options > assets . Includilo nell'array assets :

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

Visualizza in anteprima la tua app in locale

Prima di poter distribuire l'app di feedback, è meglio visualizzarne l'anteprima. Ciò ti consente di assicurarti che il tuo sito funzioni come previsto. Potresti portare alla luce problemi derivanti dal processo di creazione come percorsi interrotti verso le risorse, tra le altre cose. Innanzitutto, dovrai creare la tua app. Serviremo quindi la versione compilata utilizzando un server. Utilizzeremo lite-server che è un server di ricarica live leggero per le app Web.

Nota : poiché l'app non è ancora distribuita su Netlify, riceverai un errore 404 quando tenti di effettuare la richiesta di post. Questo perché Netlify Forms funziona solo su app distribuite. Vedrai un errore sul modulo come mostrato nello screenshot qui sotto, tuttavia funzionerà una volta distribuito.

1. Per iniziare, installa lite-server:
   

    npm install lite-server --save-dev

2. Quindi, all'interno della directory dell'area di lavoro della tua app, crea la tua app. Per assicurarti che le build vengano eseguite ogni volta che i tuoi file cambiano, passa il flag --watch ad esso. Una volta che l'app è stata compilata, i risultati vengono scritti nella directory di output dist/<app name> . Se stai utilizzando un sistema di controllo della versione, assicurati di non controllare la cartella dist perché è generata ed è solo a scopo di anteprima.
   

    ng build --watch

3. Per servire il sito compilato, esegui lite-server sulla directory di output build.
   

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

Il sito è ora servito su localhost:3000 . Controllalo sul tuo browser e assicurati che funzioni come previsto prima di iniziare la sua distribuzione.

Distribuzione

Esistono diversi modi per distribuire il tuo progetto Angular su Netlify Edge. Ne tratteremo tre qui:

1. Usando netlify-builder ,
2. Usando Git e l'interfaccia utente web di Netlify,
3. Utilizzando lo strumento Netlify CLI.

1. Utilizzo netlify-builder

netlify-builder facilita la distribuzione di app Angular tramite Angular CLI. Per utilizzare questo metodo, l'app deve essere stata creata utilizzando Angular CLI v8.3.0 o versioni successive.

1. Dalla scheda Siti della dashboard di Netlify, crea un nuovo progetto. Dal momento che non utilizzeremo Git per creare un progetto, trascina qualsiasi cartella vuota nell'area con il bordo tratteggiato contrassegnata "Trascina qui la cartella del tuo sito" . Questo creerà automaticamente un progetto con un nome casuale. Se lo desideri, puoi modificare questo nome nelle impostazioni del dominio del sito in seguito.
   

   

   
   Questo è ciò che dovresti vedere una volta creato il tuo progetto.
   

   

2. Prima di poter distribuire utilizzando questo metodo, dovrai ottenere l' ID API del progetto Netlify e un token di accesso personale Netlify dal tuo account. Puoi ottenere l'ID API del progetto dalle impostazioni del sito. In Impostazioni sito > Generali > Dettagli sito > Informazioni sul sito troverai l'ID API del tuo progetto.
   

   

   

   
   Puoi ottenere un token di accesso personale nelle impostazioni dell'utente. In Impostazioni utente > Applicazioni > Token di accesso personali , fai clic sul pulsante Nuovo token di accesso . Quando richiesto, inserisci la descrizione del tuo token, quindi fai clic sul pulsante Genera token . Copia il tuo token. Per motivi di persistenza, puoi archiviare questi valori in un file .env all'interno del tuo progetto ma non archiviare questo file se stai utilizzando un sistema di controllo della versione.
   

   

   

   

   

3. Quindi, aggiungi netlify-builder al tuo progetto usando ng add .
   

    ng add @netlify-builder/deploy

   Al termine dell'installazione, ti verrà chiesto di aggiungere l'ID API e il token di accesso personale.
   

   

   
   È facoltativo aggiungerli qui. Puoi ignorare questo prompt perché verranno aggiunti al tuo file angular.json che di solito viene archiviato se utilizzi un sistema di controllo della versione. Non è sicuro archiviare questo tipo di informazioni riservate nei repository di codici. Se non stai archiviando questo file, puoi semplicemente inserire il tuo ID API e il token di accesso personale. La voce seguente verrà modificata nel file angular.json nelle impostazioni architect .
   

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

4. Non resta che distribuire la tua applicazione eseguendo:
   

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

   In alternativa, puoi inserirlo in uno script ed eseguirlo quando devi distribuire la tua app.
   

    # 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

   Questo è l'output che dovresti vedere una volta eseguito questo comando:
   

   

2. Utilizzo di Git e dell'interfaccia utente Web di Netlify

Se il codice della tua app Angular è ospitato su Github, Bitbucket o Gitlab, puoi ospitare il progetto utilizzando l'interfaccia utente web di Netlify.

1. Dalla scheda Siti della dashboard di Netlify, fai clic su " Pulsante Nuovo sito da Git”.
   

   

2. Connettiti a un servizio di repository di codice. Scegli il servizio in cui è ospitato il codice dell'app. Ti verrà chiesto di autorizzare Netlify a visualizzare i tuoi repository. Questo sarà diverso da servizio a servizio.
   

   

3. Scegli il tuo repository di codice.
   

   

4. Successivamente, specificherai le distribuzioni e le impostazioni di build. In questo caso, seleziona il ramo da cui desideri eseguire la distribuzione, specifica il comando build come ng deploy --prod e la directory di pubblicazione come dist/<your app name> .
   

   

5. Fai clic sul pulsante Distribuisci sito e il gioco è fatto.

3. Utilizzo dello strumento Netlify CLI

1. Per iniziare, installa lo strumento Netlify CLI come segue:
   

    npm install netlify-cli -g

   Se l'installazione va a buon fine, dovresti vedere questi risultati sul tuo terminale:
   

   

2. Quindi, accedi a Netlify eseguendo:
   

    netlify login

   Quando esegui questo comando, passerà a una finestra del browser in cui ti verrà chiesto di autorizzare Netlify CLI. Fare clic sul pulsante Authorize . È quindi possibile procedere alla chiusura della scheda una volta concessa l'autorizzazione.

   

   

3. Per creare un nuovo progetto Netlify, esegui quanto segue sul tuo terminale:
   

    netlify init

   Ti verrà chiesto di connettere la tua app Angular a un progetto Netlify esistente o di crearne uno nuovo. Scegli l'opzione Crea e configura un nuovo sito .

   

   Quindi, seleziona il tuo team e un nome per il sito che desideri distribuire. Una volta che il progetto è stato creato, lo strumento CLI elencherà i dettagli del sito per il tuo progetto.
   

   

   Dopo di che lo strumento CLI ti chiederà di connettere il tuo account Netlify a un provider di hosting Git per configurare webhook e distribuire chiavi. Non puoi rinunciare a questo. Scegli un'opzione per accedere, quindi autorizza Netlify.
   

   

   Successivamente, ti verrà chiesto di inserire un comando di compilazione. Utilizzo:
   

    ng build --prod

   Successivamente, ti verrà chiesto di fornire una directory da distribuire. Inserisci dist/<app name> con il nome della tua app.
   

   

   Al termine, il comando completerà e visualizzerà questo output.
   

   

4. Per distribuire l'app, eseguire:
   

    netlify deploy --prod

   L'uso del flag --prod assicura che la build venga distribuita in produzione. Se ometti questo flag, il comando netlify deploy distribuirà la tua build a un URL di bozza univoco che viene utilizzato per il test e l'anteprima. Una volta completata la distribuzione, dovresti vedere questo output:
   

   

Visualizzazione degli invii dei moduli

Gli invii dei moduli possono essere visualizzati sulla dashboard di Netlify nella scheda Moduli del tuo sito. Puoi trovarlo su app.netlify.com/sites/<your_site_name>/forms . In questa pagina verranno elencati tutti i moduli attivi. L'attributo name che hai inserito nell'elemento modulo nascosto è il nome del modulo sul dashboard.

Dopo aver selezionato un modulo, verranno elencati tutti gli invii per quel modulo. Puoi scegliere di scaricare tutte le voci come file CSV, contrassegnarle come spam o eliminarle.

Conclusione

Netlify Forms ti consente di raccogliere l'invio di moduli dalla tua app senza dover creare o configurare un back-end per farlo. Questo può essere utile soprattutto nelle app che devono raccogliere solo una quantità limitata di dati come informazioni di contatto, feedback dei clienti, registrazioni a eventi e così via.

L'associazione di moduli reattivi Angular con moduli Netlify ti consente di strutturare il tuo modello di dati. I moduli reattivi angolari hanno l'ulteriore vantaggio di avere il loro modello di dati e gli elementi del modulo sincronizzati tra loro. Non si basano sul rendering dell'interfaccia utente.

Sebbene Netlify Forms funzioni solo se distribuito su Netlify Edge, la piattaforma di hosting è piuttosto robusta, fornisce funzionalità utili come test A/B e automatizza le build e le distribuzioni di app.

• Vedi il codice sorgente per questo progetto →

Puoi continuare a leggere di più sull'utilizzo di Netlify con i tuoi moduli qui.