Erstellen und implementieren Sie ein Angular-Formular mit Netlify Forms und Edge

Das Erstellen des Frontend-, Backend- und Bereitstellungs-Workflows einer App erfordert viel Arbeit. In Fällen, in denen Ihre App nur eine begrenzte Menge an Datenübermittlungen von ihren Benutzern sammelt, scheint der Aufbau eines ganzen Backends die Zeit und den Aufwand nicht wert zu sein. Eine Alternative zur Entwicklung eines vollständigen Backends ist die Verwendung von Netlify Forms. In diesem Tutorial erkläre ich, wie Sie ein reaktives Angular-Formular mit Netlify Forms verwenden können. Da Netlify Forms nur funktionieren, wenn sie auf Netlify bereitgestellt werden, werde ich auch veranschaulichen, wie Sie Ihre App auf Netlify Edge bereitstellen.

Der Werkzeugkasten

Ein reaktives Angular-Formular ist ein Formular mit einem strukturierten Datenmodell, das explizit innerhalb einer Komponentenklasse mithilfe der ReactiveFormsModule-Anbieter erstellt wurde. Für jedes Eingabeelement innerhalb der Formularansicht wird ein Formularmodell erstellt. Dieses Formularmodell ist eine Instanz der FormControl-Klasse und verfolgt den Wert des Formularelements. Das Formularmodell ist unveränderlich, da die FormControl-Instanz bei jeder Änderung am Modell ein neues Datenmodell zurückgibt, anstatt das alte Modell zu aktualisieren. Seine Unveränderlichkeit macht die Änderungserkennung effizienter und ermöglicht Datenänderungen mit beobachtbaren Operatoren. Da Formulareingabeelemente direkt mit ihren Formularmodellen verbunden sind, sind Aktualisierungen zwischen ihnen synchron und nicht auf UI-Rendering angewiesen.

Netlify ist eine Plattform, mit der Sie Websites erstellen, bereitstellen und hosten können, die mit verschiedenen Technologien erstellt wurden. Mit Angular erstellte Websites können auf Netlify gehostet werden. Netlify bietet außerdem eine Vielzahl von Tools, die Builds und Bereitstellungen dieser Sites vereinfachen, automatisieren und erweitern. Wir werden in diesem Tutorial zwei seiner Produkte verwenden: Netlify Edge und Netlify Forms.

Wie bereits beschrieben, handelt es sich bei Netlify Forms um eine Formularverarbeitungsfunktion, die Übermittlungen von HTML-Formularen automatisch empfängt. Es erfordert keine Konfiguration der Übermittlungsverarbeitung, wie das Erstellen von APIs, Skripten usw. Diese Funktion funktioniert nur mit Formularen auf Websites, die auf Netlify bereitgestellt werden. Es ist standardmäßig aktiviert, wodurch die zum Einrichten der Formularübermittlungen erforderliche Konfiguration weiter reduziert wird. Die Übermittlungsbehandlung wird während der Bereitstellung eingerichtet, wobei die HTML-Dateien einer Website von den Build-Bots von Netlify analysiert werden.

Netlify Edge ist ein globales Anwendungsbereitstellungsnetzwerk, in dem Websites und Anwendungen veröffentlicht werden. Es bietet Funktionen wie A/B-Tests, Rollbacks, Staging und schrittweise Rollouts. Alle Bereitstellungen auf Netlify Edge sind atomar, was bedeutet, dass eine Website nur live ist, wenn alle Dateien hochgeladen/aktualisiert wurden und Änderungen an der Website bereit sind. Sobald eine Site bereitgestellt wird, wird ihr eine Subdomäne auf netlify.app zugewiesen, wenn sie in der Produktion bereitgestellt wird. Netlify Edge unterstützt auch Vorschau- und Verzweigungsbereitstellungen (Staging, Entwicklung usw.).

Die Verarbeitung von Netlify-Formularen funktioniert, weil Build-Bots HTML-Formulare auf einer Website während der Bereitstellung parsen. Clientseitig mit Javascript gerenderte Formulare wie die in kompilierten Angular-Sites werden von diesen Bots nicht gefunden. Die normale Einrichtung für Netlify Forms funktioniert also nicht mit Angular Forms.

Es gibt jedoch eine Problemumgehung dafür. Damit es Einsendungen empfängt, wird der Datei index.html ein verstecktes einfaches HTML-Formular hinzugefügt. Dieses Formular funktioniert mit den Build-Bots. Beim Absenden des Angular-Formulars wird eine Post-Anfrage an dieses versteckte Formular gestellt, die dann von Netlify Forms erfasst wird.

In diesem Artikel erstellen wir ein reaktives Formular. Wir werden auch einen Dienst entwickeln, um eine Post-Anfrage an das versteckte HTML-Formular zu stellen. Zuletzt werden wir die App auf Netlify Edge bereitstellen.

Beispiel

Um zu veranschaulichen, wie die App erstellt wird, nehmen wir ein Beispiel für ein Feedback-Formular, das auf vielen Websites üblich ist. Wir werden dieses Formular verwenden, um Kommentare/Beschwerden, Fragen und Vorschläge von Benutzern der Website zusammen mit ihrem Namen und ihrer E-Mail-Adresse zu sammeln. Wir werden es auch verwenden, um ihre Bewertung der Website zu sammeln.

Anforderungen

Um diesem Tutorial zu folgen, benötigen Sie ein Netlify-Konto und die installierte Angular-CLI. Wenn Sie die CLI nicht haben, können Sie sie mit npm installieren.

 npm install -g @angular/cli

Wenn Sie sich noch nicht für ein Netlify-Konto angemeldet haben, können Sie hier eines erstellen. Netlify bietet die Anmeldung über Github, Gitlab, Bitbucket oder E-Mail an. Je nachdem, für welche Bereitstellungsmethode Sie sich entscheiden, können dies andere Anforderungen sein. Sie werden unter jeder Bereitstellungsmethode angegeben.

Einrichten der App

Zunächst erstellen wir die App und nennen sie feedback . Fügen Sie beim Erstellen Routing hinzu, wenn Sie in den Eingabeaufforderungen dazu aufgefordert werden.

 ng new feedback

Als Nächstes generieren wir drei Komponenten: ein Feedback-Formular, eine Meldungsseite für eine erfolgreiche Übermittlung und eine 404-Seite. Mit Netlify-Formularen können Sie nach erfolgreicher Übermittlung des Formulareintrags zu einer Seite navigieren. Dafür verwenden wir die SuccessComponent .

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

Nach dem Generieren der Komponenten fügen wir die Routen zu jeder Seite im AppRoutingModule in der Datei app-routing.module.ts .

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

Wir verwenden den FormBuilder -Dienst, um unser reaktives Formular zu erstellen. Dies liegt daran, dass dies bequemer und weniger repetitiv ist als die Verwendung einfacher Formularsteuerelemente. Um darauf zugreifen zu können, müssen wir das ReactiveFormsModule in der Datei app.module.ts registrieren.

Da wir eine Post-Anfrage an das versteckte HTML-Formular stellen, müssen wir auch das HttpClientModule registrieren.

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

Fahren Sie fort, um den Inhalt von app.component.html so zu ändern, dass nur der Router-Ausgang vorhanden ist.

 <router-outlet></router-outlet>

Die verschiedenen Seiten werden einige Gestaltungen gemeinsam haben. Fügen Sie also das folgende Styling zu styles.css hinzu .

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

Erstellen Sie das reaktive Formular

In unserer FeedbackComponent -Klasse importieren wir zunächst den FormBuilder -Dienst, mit dem wir das Formular erstellen. Wir importieren auch die Validators -Klasse für die Formulareingabevalidierung.

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

Anschließend fügen wir den FormBuilder -Dienst ein, indem wir ihn zum FeedbackComponent -Konstruktor hinzufügen.

 constructor(private fb: FormBuilder) { }

Als Nächstes definieren wir das Formularmodell mithilfe der group des FormBuilder -Diensts. Wir fügen auch eine errorMsg -Eigenschaft hinzu, um alle Fehler zu speichern, die beim Senden der Formulareingabe auftreten können. Ebenfalls enthalten ist eine closeError Methode, die die Fehlerwarnung schließt, die auf dem Formular angezeigt wird.

Jedes Steuerelement im Formularmodell wird mit Validatoren aus der Validators -Klasse verifiziert. Wenn die Überprüfung einer der Eingaben fehlschlägt, ist das Formular ungültig und die Übermittlung wird deaktiviert. Sie können einem Formularsteuerelement mehrere Prüfer hinzufügen, wie im Fall des E- email -Steuerelements.

 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 = ''; } // ... }

In der Vorlage der Komponente ( feedback.component.html ) werden wir dies hinzufügen.

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

Beachten Sie, dass das Formularelement das Attribut [formGroup]="feedbackForm" haben sollte, das dem gerade erstellten Modell entspricht. Außerdem sollte jedes der Eingabeelemente ein formControlName="" Attribut haben, das dem entsprechenden Formularsteuerelement im Modell entspricht.

Um das Formular zu formatieren, fügen Sie dies zu feedback.component.css hinzu.

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

So sieht das Formular aus:

Hinzufügen eines versteckten HTML-Formulars

Wie bereits erwähnt, müssen wir ein verstecktes HTML-Formular hinzufügen, das die Build-Bots von Netlify Forms analysieren können. Die Einreichungen werden dann von unserem reaktiven Formular an das versteckte HTML-Formular gesendet. Das HTML-Formular wird in die Datei index.html eingefügt .

Dieses Formular sollte denselben Namen wie das reaktive Formular haben. Zusätzlich sollte es drei weitere Attribute enthalten: netlify , netlify-honeypot und hidden . Die Bots suchen nach allen Formularen, die das netlify Attribut haben, damit Netlify Eingaben von ihnen verarbeiten kann. Das netlify-honeypot Attribut wird hinzugefügt, um zu verhindern, dass Captchas angezeigt werden, wenn eine Übermittlung erfolgt, und aktiviert zusätzlichen Spam-Schutz.

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

Es ist wichtig zu beachten, dass Sie mit dieser Methode keine Datei hochladen können, da Sie den Wert von file nicht festlegen können.

Eine Post-Anfrage an das versteckte Formular stellen

Um eine Übermittlung aus dem reaktiven Formular an das HTML-Formular zu senden, stellen wir eine Post-Anfrage, die die Übermittlung an index.html enthält. Die Operation wird in der Methode onSubmit der FeedbackComponent ausgeführt.

Bevor wir das tun können, müssen wir jedoch zwei Dinge erstellen: eine Feedback -Schnittstelle und einen NetlifyFormsService . Beginnen wir mit der Schnittstelle.

 touch src/app/feedback/feedback.ts

Der Inhalt dieser Datei wird sein:

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

Der NetlifyFormsService enthält eine öffentliche Methode zum Senden eines Feedback-Eintrags, eine private Methode zum Senden eines generischen Eintrags und eine weitere private Methode zum Behandeln von Fehlern. Sie könnten andere öffentliche Methoden für zusätzliche Formulare hinzufügen.

Um es zu generieren, führen Sie Folgendes aus:

 ng gs netlify-forms/netlify-forms

Die Methode submitEntry gibt einen Observable<string> zurück, da Netlify eine HTML-Seite mit einer Erfolgsmeldung sendet, sobald wir Daten an das Formular senden. Das ist der Dienst:

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

Wir senden die Formularübermittlung als HttpParams . Ein Header für den ContentType sollte mit dem Wert application/x-www-form-urlencoded . Die Option responseType wird als text angegeben, da das Posten im verborgenen Formular bei Erfolg eine HTML-Seite mit einer allgemeinen Erfolgsmeldung von Netlify zurückgibt. Wenn Sie diese Option nicht angeben, erhalten Sie eine Fehlermeldung, da die Antwort als JSON geparst wird. Unten sehen Sie einen Screenshot der generischen Netlify-Erfolgsmeldung.

In der Klasse FeedbackComponent importieren wir NetlifyFormsService und Router . Wir senden den Formulareintrag mit der NetlifyFormsService.submitEntry Methode. Wenn die Übermittlung erfolgreich ist, leiten wir Sie zur Seite für die erfolgreiche Übermittlung um und setzen das Formular zurück. Wir verwenden den Router -Dienst für die Umleitung. Wenn dies nicht gelingt, wird der errorMsg Eigenschaft die Fehlermeldung zugewiesen und auf dem Formular angezeigt.

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

Fügen Sie danach sowohl NetlifyFormsService als auch Router in den Konstruktor ein.

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

Rufen Sie zuletzt die Methode NetlifyFormsService.submitEntry in FeedbackComponent.onSubmit auf.

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

Erstellen Sie eine erfolgreiche Einreichungsseite

Wenn ein Benutzer eine Übermittlung abschließt, gibt Netlify eine allgemeine Erfolgsmeldung zurück, die im letzten Screenshot des vorherigen Abschnitts gezeigt wird. Sie können jedoch auf Ihre eigene benutzerdefinierte Erfolgsmeldungsseite verlinken. Dazu fügen Sie dem versteckten HTML-Formular das action hinzu. Sein Wert ist der relative Pfad zu Ihrer benutzerdefinierten Erfolgsseite. Dieser Pfad muss mit / beginnen und relativ zu Ihrer Root-Site sein.

Das Festlegen einer benutzerdefinierten Erfolgsseite scheint jedoch nicht zu funktionieren, wenn ein verstecktes HTML-Formular verwendet wird. Wenn die Post-Anforderung an das versteckte HTML-Formular erfolgreich ist, wird die generische Netlify-Erfolgsmeldung als HTML-Seite zurückgegeben. Es wird nicht umgeleitet, selbst wenn ein action angegeben ist. Stattdessen navigieren wir nach einer Übermittlung über den Router -Dienst zur Erfolgsmeldungsseite.

Lassen Sie uns zunächst der SuccessComponent , die wir zuvor generiert haben, Inhalt hinzufügen. Fügen Sie in success.component.html hinzu:

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

Um die Seite zu gestalten, fügen Sie Folgendes zu success.component.css :

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

So sieht die Seite aus:

In der FeedbackComponent -Klasse haben wir den Router -Dienst bereits als Import hinzugefügt und in den Konstruktor eingefügt. In der Methode onSubmit navigieren wir, nachdem die Anfrage erfolgreich war und das Formular zurückgesetzt wurde, zur Seite für die erfolgreiche Übermittlung, /success . Dazu verwenden wir die Methode navigateByUrl des Routers.

Erstellen der 404-Seite

Die 404-Seite ist vielleicht nicht notwendig, aber schön zu haben. Der Inhalt von page-not-found.component.html wäre:

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

Um es zu stylen, fügen Sie dies zu page-not-found.component.css :

 p { text-align: center; }

So wird die 404-Seite aussehen.

Beheben Sie das Routing vor der Bereitstellung

Da wir den Router -Dienst verwenden, erfolgt unser gesamtes Routing auf dem Client. Wenn ein Link zu einer Seite in unserer App in die Adressleiste eingefügt wird (Deep Link) oder eine Seitenaktualisierung erfolgt, wird diese Anfrage an unseren Server gesendet. Der Server enthält keine unserer Routen, da sie im Frontend in unserer App konfiguriert wurden. In diesen Fällen erhalten wir einen 404-Status.

Um dies zu beheben, müssen wir den Netlify-Server anweisen, alle Anfragen auf unsere index.html -Seite umzuleiten. Auf diese Weise kann unser Angular-Router damit umgehen. Wenn Sie interessiert sind, können Sie hier und hier mehr über dieses Phänomen lesen.

Wir beginnen mit der Erstellung einer _redirects -Datei in unserem src -Ordner. Die _redirects -Datei ist eine einfache Textdatei, die Umleitungs- und Umschreibungsregeln für die Netlify-Site angibt. Sie sollte sich im Site-Veröffentlichungs-Site-Verzeichnis ( dist/<app_name> ) befinden. Wir platzieren es im Ordner src und geben es als Asset in der Datei angular.json an. Wenn die App kompiliert ist, wird sie in dist/<app_name> .

 touch src/_redirects

Diese Datei enthält die folgende Regel. Es zeigt an, dass alle Anfragen an den Server an index.html umgeleitet werden sollen. Wir fügen am Ende auch eine HTTP-Statuscode-Option hinzu, um anzugeben, dass diese Weiterleitungen einen 200 -Status zurückgeben sollen. Standardmäßig wird ein 301 Status zurückgegeben.

 /* /index.html 200

Als letztes müssen wir die folgende Option in unserer angular.json unter er projects > {your_project_name} > architect > options > assets . Fügen Sie es in das assets -Array ein:

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

Vorschau Ihrer App lokal

Bevor Sie die Feedback-App bereitstellen können, empfiehlt es sich, eine Vorschau anzuzeigen. Auf diese Weise können Sie sicherstellen, dass Ihre Website so funktioniert, wie Sie es beabsichtigt haben. Sie können Probleme aufdecken, die sich aus dem Build-Prozess ergeben, wie unter anderem fehlerhafte Pfade zu Ressourcen. Zuerst müssen Sie Ihre App erstellen. Wir werden dann die kompilierte Version über einen Server bereitstellen. Wir verwenden lite-server, einen leichtgewichtigen Live-Reload-Server für Web-Apps.

Hinweis : Da die App noch nicht auf Netlify bereitgestellt wird, erhalten Sie einen 404-Fehler, wenn Sie versuchen, die Post-Anfrage zu stellen. Dies liegt daran, dass Netlify Forms nur auf bereitgestellten Apps funktionieren. Sie werden einen Fehler auf dem Formular sehen, wie im Screenshot unten gezeigt, aber es funktioniert, sobald Sie es bereitgestellt haben.

1. Installieren Sie zunächst lite-server:
   

    npm install lite-server --save-dev

2. Erstellen Sie als Nächstes im Arbeitsbereichsverzeichnis Ihrer App Ihre App. Um sicherzustellen, dass Builds jedes Mal ausgeführt werden, wenn sich Ihre Dateien ändern, übergeben Sie ihr das Flag --watch . Sobald die App kompiliert ist, werden die Ergebnisse in das Ausgabeverzeichnis dist/<app name> geschrieben. Wenn Sie ein Versionskontrollsystem verwenden, stellen Sie sicher, dass Sie den dist -Ordner nicht einchecken, da er generiert wird und nur zu Vorschauzwecken dient.
   

    ng build --watch

3. Um die kompilierte Site bereitzustellen, führen Sie den lite-server für das Build-Ausgabeverzeichnis aus.
   

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

Die Site wird jetzt unter localhost:3000 . Probieren Sie es in Ihrem Browser aus und vergewissern Sie sich, dass es wie erwartet funktioniert, bevor Sie mit der Bereitstellung beginnen.

Einsatz

Es gibt mehrere Möglichkeiten, wie Sie Ihr Angular-Projekt auf Netlify Edge bereitstellen können. Wir werden hier drei behandeln:

1. Mit netlify-builder ,
2. Mit Git und der Netlify-Web-UI,
3. Verwenden des Netlify-CLI-Tools.

1. netlify-builder

netlify-builder erleichtert die Bereitstellung von Angular-Apps über die Angular-CLI. Um diese Methode zu verwenden, muss Ihre App mit Angular CLI v8.3.0 oder höher erstellt worden sein.

1. Erstellen Sie auf der Registerkarte Sites Ihres Netlify-Dashboards ein neues Projekt. Da wir kein Git zum Erstellen eines Projekts verwenden werden, ziehen Sie einen beliebigen leeren Ordner in den gepunkteten Bereich, der mit „Drag and drop your site folder here“ gekennzeichnet ist. Dadurch wird automatisch ein Projekt mit einem zufälligen Namen erstellt. Sie können diesen Namen später in den Domain-Einstellungen der Website ändern, wenn Sie dies wünschen.
   

   

   
   Dies sollten Sie sehen, sobald Ihr Projekt erstellt wurde.
   

   

2. Bevor Sie mit dieser Methode bereitstellen können, müssen Sie die API-ID des Netlify-Projekts und ein persönliches Netlify-Zugriffstoken von Ihrem Konto abrufen. Sie können die Projekt-API-ID aus den Site-Einstellungen abrufen. Unter Site-Einstellungen > Allgemein > Site-Details > Site-Informationen finden Sie die API-ID Ihres Projekts.
   

   

   

   
   In Ihren Benutzereinstellungen können Sie einen persönlichen Zugangstoken erhalten. Klicken Sie unter Benutzereinstellungen > Anwendungen > Persönliche Zugriffstoken auf die Schaltfläche Neuer Zugriffstoken . Wenn Sie dazu aufgefordert werden, geben Sie die Beschreibung Ihres Tokens ein und klicken Sie dann auf die Schaltfläche Token generieren . Kopieren Sie Ihr Token. Aus Gründen der Persistenz können Sie diese Werte in einer .env -Datei in Ihrem Projekt speichern, checken Sie diese Datei jedoch nicht ein, wenn Sie ein Versionskontrollsystem verwenden.
   

   

   

   

   

3. Fügen Sie als Nächstes netlify-builder mit ng add zu Ihrem Projekt hinzu.
   

    ng add @netlify-builder/deploy

   Sobald die Installation abgeschlossen ist, werden Sie aufgefordert, die API-ID und das persönliche Zugriffstoken hinzuzufügen.
   

   

   
   Es ist optional, diese hier hinzuzufügen. Sie können diese Eingabeaufforderung ignorieren, da sie zu Ihrer angular.json -Datei hinzugefügt werden, die normalerweise eingecheckt wird, wenn Sie ein Versionskontrollsystem verwenden. Es ist nicht sicher, diese Art von vertraulichen Informationen in Code-Repositorys zu speichern. Wenn Sie diese Datei nicht einchecken, können Sie einfach Ihre API-ID und Ihr persönliches Zugriffstoken eingeben. Der Eintrag unten wird in Ihrer angular.json -Datei unter den architect geändert.
   

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

4. Sie müssen Ihre Anwendung nur noch bereitstellen, indem Sie Folgendes ausführen:
   

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

   Alternativ können Sie dies in ein Skript einfügen und es ausführen, wenn Sie Ihre App bereitstellen müssen.
   

    # 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

   Dies ist die Ausgabe, die Sie sehen sollten, wenn Sie diesen Befehl ausführen:
   

   

2. Verwenden von Git und der Netlify-Web-Benutzeroberfläche

Wenn der Code Ihrer Angular-App entweder auf Github, Bitbucket oder Gitlab gehostet wird, können Sie das Projekt über die Web-Benutzeroberfläche von Netlify hosten.

1. Klicken Sie auf der Registerkarte Sites in Ihrem Netlify-Dashboard auf „ Neue Seite von Git“-Schaltfläche.
   

   

2. Stellen Sie eine Verbindung zu einem Code-Repository-Dienst her. Wählen Sie den Dienst aus, bei dem Ihr App-Code gehostet wird. Sie werden aufgefordert, Netlify zu autorisieren, Ihre Repositories anzuzeigen. Dies ist von Dienst zu Dienst unterschiedlich.
   

   

3. Wählen Sie Ihr Code-Repository aus.
   

   

4. Als Nächstes geben Sie die Bereitstellungen und Build-Einstellungen an. Wählen Sie in diesem Fall den Zweig aus, von dem Sie bereitstellen möchten, geben Sie den Build-Befehl als ng deploy --prod und das Veröffentlichungsverzeichnis als dist/<your app name> an.
   

   

5. Klicken Sie auf die Schaltfläche Site bereitstellen , und Sie sind fertig.

3. Verwenden des Netlify CLI-Tools

1. Installieren Sie zunächst das Netlify CLI-Tool wie folgt:
   

    npm install netlify-cli -g

   Wenn die Installation erfolgreich ist, sollten Sie diese Ergebnisse auf Ihrem Terminal sehen:
   

   

2. Melden Sie sich als Nächstes bei Netlify an, indem Sie Folgendes ausführen:
   

    netlify login

   Wenn Sie diesen Befehl ausführen, navigiert er zu einem Browserfenster, in dem Sie aufgefordert werden, die Netlify CLI zu autorisieren. Klicken Sie auf die Schaltfläche Authorize . Sie können dann fortfahren, die Registerkarte zu schließen, sobald die Autorisierung erteilt wurde.

   

   

3. Um ein neues Netlify-Projekt zu erstellen, führen Sie Folgendes auf Ihrem Terminal aus:
   

    netlify init

   Sie werden aufgefordert, Ihre Angular-App entweder mit einem bestehenden Netlify-Projekt zu verbinden oder ein neues zu erstellen. Wählen Sie die Option Neue Site erstellen und konfigurieren .

   

   Wählen Sie als Nächstes Ihr Team und einen Namen für die Site aus, die Sie bereitstellen möchten. Sobald das Projekt erstellt wurde, listet das CLI-Tool Standortdetails für Ihr Projekt auf.
   

   

   Danach fordert Sie das CLI-Tool auf, Ihr Netlify-Konto mit einem Git-Hosting-Anbieter zu verbinden, um Webhooks zu konfigurieren und Schlüssel bereitzustellen. Sie können dies nicht ablehnen. Wählen Sie eine Option zum Anmelden und autorisieren Sie Netlify.
   

   

   Als nächstes werden Sie aufgefordert, einen Build-Befehl einzugeben. Verwenden:
   

    ng build --prod

   Anschließend werden Sie aufgefordert, ein bereitzustellendes Verzeichnis anzugeben. Geben Sie dist/<app name> mit dem Namen Ihrer App ein.
   

   

   Am Ende wird der Befehl diese Ausgabe vervollständigen und anzeigen.
   

   

4. Führen Sie zum Bereitstellen der App Folgendes aus:
   

    netlify deploy --prod

   Die Verwendung des --prod stellt sicher, dass der Build in der Produktion bereitgestellt wird. Wenn Sie dieses Flag weglassen, stellt der Befehl netlify deploy Ihren Build unter einer eindeutigen Entwurfs-URL bereit, die zum Testen und für die Vorschau verwendet wird. Sobald die Bereitstellung abgeschlossen ist, sollten Sie diese Ausgabe sehen:
   

   

Anzeigen von Formularübermittlungen

Formularübermittlungen können im Netlify-Dashboard auf der Registerkarte „ Formulare “ Ihrer Website angezeigt werden. Sie finden es unter app.netlify.com/sites/<your_site_name>/forms . Auf dieser Seite werden alle Ihre aktiven Formulare aufgelistet. Das Namensattribut, das Sie im versteckten Formularelement eingeben, ist der Name des Formulars auf dem Dashboard.

Sobald Sie ein Formular ausgewählt haben, werden alle Einreichungen für dieses Formular aufgelistet. Sie können alle Einträge als CSV-Datei herunterladen, als Spam markieren oder löschen.

Fazit

Mit Netlify-Formularen können Sie Formularübermittlungen von Ihrer App erfassen, ohne dafür ein Backend erstellen oder konfigurieren zu müssen. Dies kann besonders in Apps nützlich sein, die nur eine begrenzte Menge an Daten wie Kontaktinformationen, Kundenfeedback, Anmeldungen zu Veranstaltungen usw. erfassen müssen.

Durch die Kombination von reaktiven Angular-Formularen mit Netlify-Formularen können Sie Ihr Datenmodell strukturieren. Winkelreaktive Formulare haben den zusätzlichen Vorteil, dass ihr Datenmodell und ihre Formularelemente miteinander synchronisiert sind. Sie verlassen sich nicht auf das UI-Rendering.

Obwohl Netlify Forms nur funktionieren, wenn sie auf Netlify Edge bereitgestellt werden, ist die Hosting-Plattform ziemlich robust, bietet nützliche Funktionen wie A/B-Tests und automatisiert App-Builds und -Bereitstellungen.

• Siehe den Quellcode für dieses Projekt →

Sie können hier weiterlesen, wie Sie Netlify mit Ihren Formularen verwenden.