Создайте и разверните форму Angular с помощью Netlify Forms и Edge

Создание внешнего интерфейса, внутреннего интерфейса и рабочего процесса развертывания приложения требует много работы. В случаях, когда ваше приложение собирает лишь ограниченное количество данных, отправленных пользователями, может показаться, что создание целостной серверной части не стоит времени и усилий. Альтернативой разработке полного бэкенда является использование Netlify Forms. В этом уроке я объясню, как вы можете использовать реактивную форму Angular с Netlify Forms. Поскольку Netlify Forms работают только при развертывании на Netlify, я также покажу, как развернуть ваше приложение на Netlify Edge.

Инструментарий

Реактивная форма Angular — это форма со структурированной моделью данных, созданная явно в классе компонентов с использованием поставщиков ReactiveFormsModule. Модель формы создается для каждого элемента ввода в представлении формы. Эта модель формы является экземпляром класса FormControl и отслеживает значение элемента формы. Модель формы является неизменной, потому что всякий раз, когда в модель вносятся изменения, экземпляр FormControl возвращает новую модель данных вместо обновления старой модели. Его неизменность делает обнаружение изменений более эффективным и позволяет изменять данные с помощью наблюдаемых операторов. Поскольку элементы ввода формы напрямую связаны со своими моделями форм, обновления между ними синхронны и не зависят от рендеринга пользовательского интерфейса.

Netlify — это платформа, которая позволяет создавать, развертывать и размещать сайты, созданные с использованием различных технологий. Сайты, созданные с помощью Angular, могут размещаться на Netlify. Netlify дополнительно предоставляет множество инструментов, которые упрощают, автоматизируют и расширяют возможности сборки и развертывания этих сайтов. В этом руководстве мы будем использовать два его продукта: Netlify Edge и Netlify Forms.

Как описано ранее, Netlify Forms — это функция обработки форм, которая автоматически получает данные из HTML-форм. Он не требует какой-либо настройки обработки отправки, такой как создание API, скриптов и т. д. Эта функция работает только с формами на сайтах, развернутых на Netlify. Он включен по умолчанию, что еще больше сокращает конфигурацию, необходимую для настройки отправки форм. Обработка отправки настраивается во время развертывания, когда HTML-файлы сайта анализируются ботами сборки Netlify.

Netlify Edge — это глобальная сеть доставки приложений, в которой публикуются сайты и приложения. Он предоставляет такие функции, как A/B-тестирование, откаты, промежуточные этапы и поэтапные развертывания. Все развертывания в Netlify Edge являются атомарными, то есть сайт работает только тогда, когда все файлы загружены/обновлены и изменения на сайте готовы. После развертывания сайта ему назначается поддомен в netlify.app при развертывании в рабочей среде. Netlify Edge также поддерживает предварительное развертывание и разветвление (постановка, разработка и т. д.).

Обработка отправки Netlify Forms работает, потому что боты сборки анализируют HTML-формы на сайте во время развертывания. Эти боты не смогут найти формы, отображаемые Javascript на стороне клиента, такие как те, которые используются на скомпилированных сайтах Angular. Таким образом, обычная настройка для Netlify Forms не будет работать с Angular Forms.

Однако для этого есть обходной путь. Чтобы заставить его получать материалы, в файл index.html добавляется скрытая простая HTML-форма. Эта форма работает с ботами сборки. При отправке формы Angular в эту скрытую форму отправляется почтовый запрос, который затем захватывается Netlify Forms.

В этой статье мы создадим реактивную форму. Мы также разработаем сервис для отправки запроса на скрытую HTML-форму. Наконец, мы развернем приложение на Netlify Edge.

Пример

Чтобы проиллюстрировать, как создать приложение, мы возьмем пример формы обратной связи, распространенной на многих веб-сайтах. Мы будем использовать эту форму для сбора комментариев/жалоб, вопросов и предложений от пользователей сайта вместе с их именем и адресом электронной почты. Мы также будем использовать его для сбора их рейтинга сайта.

Требования

Чтобы следовать этому руководству, вам потребуется учетная запись Netlify и установленный Angular CLI. Если у вас нет CLI, вы можете установить его с помощью npm.

 npm install -g @angular/cli

Если вы еще не зарегистрировали учетную запись Netlify, вы можете создать ее здесь. Netlify предлагает регистрацию через Github, Gitlab, Bitbucket или по электронной почте. В зависимости от того, какой метод развертывания вы выберете, могут быть и другие требования. Они будут указаны для каждого метода развертывания.

Настройка приложения

Для начала мы создадим приложение и назовем его feedback . При его создании добавьте к нему маршрутизацию, когда спросят в подсказках.

 ng new feedback

Далее мы создадим три компонента: форму обратной связи, страницу сообщения об успешной отправке и страницу 404. Netlify Forms позволяет вам перейти на страницу после успешной отправки формы. Именно для этого мы будем использовать SuccessComponent .

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

После создания компонентов мы добавим маршруты на каждую страницу в AppRoutingModule в файле app-routing.module.ts .

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

Мы будем использовать службу FormBuilder для создания нашей реактивной формы. Это потому, что это более удобно и менее повторяемо, чем использование основных элементов управления формы. Чтобы иметь к нему доступ, нам нужно зарегистрировать ReactiveFormsModule в файле app.module.ts .

Поскольку мы будем делать пост-запрос к скрытой HTML-форме, мы также должны зарегистрировать HttpClientModule .

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

Перейдите к изменению содержимого app.component.html , чтобы иметь только выход маршрутизатора.

 <router-outlet></router-outlet>

Различные страницы будут иметь общий стиль. Поэтому добавьте приведенный ниже стиль в 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; } }

Создайте реактивную форму

В нашем классе FeedbackComponent мы начнем с импорта службы FormBuilder , которую будем использовать для создания формы. Мы также импортируем класс Validators для проверки ввода формы.

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

Затем мы внедрим службу FormBuilder , добавив ее в конструктор FeedbackComponent .

 constructor(private fb: FormBuilder) { }

Далее мы определим модель формы, используя group метод внедренного сервиса FormBuilder . Мы также добавим свойство errorMsg для хранения любых ошибок, с которыми мы можем столкнуться при отправке ввода формы. Также включен метод closeError , который закроет предупреждение об ошибке, отображаемое в форме.

Каждый элемент управления в модели формы будет проверяться с помощью валидаторов из класса Validators . Если какой-либо из входных данных не пройдет проверку, форма будет недействительной, а отправка будет отключена. Вы можете добавить несколько валидаторов в элемент управления формой, как в случае с элементом управления 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 = ''; } // ... }

В шаблон компонента ( feedback.component.html ) мы добавим это.

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

Обратите внимание, что элемент формы должен иметь [formGroup]="feedbackForm" , соответствующий модели, которую мы только что создали. Кроме того, каждый из элементов ввода должен иметь formControlName="" , соответствующий соответствующему элементу управления формы в модели.

Чтобы оформить форму, добавьте это в 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; } }

Вот как будет выглядеть форма:

Добавление скрытой HTML-формы

Как указывалось ранее, нам нужно добавить скрытую HTML-форму, которую могут анализировать боты сборки Netlify Forms. Затем материалы будут отправлены из нашей реактивной формы в скрытую HTML-форму. HTML-форма помещается в файл index.html .

Эта форма должна иметь то же имя, что и реактивная форма. Кроме того, он должен содержать три других атрибута: netlify , netlify-honeypot и hidden . Боты ищут любые формы с атрибутом netlify , чтобы Netlify могла обрабатывать входные данные от них. netlify-honeypot добавлен для предотвращения показа капчи при отправке и обеспечивает дополнительную защиту от спама.

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

Важно отметить, что, поскольку вы не можете установить значение элементов ввода file , вы не можете загрузить файл с помощью этого метода.

Создание почтового запроса в скрытой форме

Чтобы отправить представление из реактивной формы в HTML-форму, мы сделаем почтовый запрос, содержащий представление в index.html . Операция будет выполняться в методе onSubmit компонента FeedbackComponent .

Однако, прежде чем мы сможем это сделать, нам нужно создать две вещи: интерфейс Feedback и NetlifyFormsService . Начнем с интерфейса.

 touch src/app/feedback/feedback.ts

Содержимое этого файла будет:

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

NetlifyFormsService будет содержать общедоступный метод для отправки записи обратной связи, частный метод для отправки общей записи и еще один частный метод для обработки любых ошибок. Вы можете добавить другие общедоступные методы для дополнительных форм.

Чтобы сгенерировать его, выполните следующее:

 ng gs netlify-forms/netlify-forms

Метод submitEntry возвращает Observable<string> , потому что Netlify отправляет HTML-страницу с уведомлением об успешном завершении, как только мы отправляем данные в форму. Это сервис:

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

Мы отправим отправку формы как HttpParams . Заголовок для ContentType должен быть включен в значение application/x-www-form-urlencoded . Опция responseType указывается как text , потому что в случае успеха отправка в скрытую форму вернет HTML-страницу, содержащую общее сообщение об успехе от Netlify. Если вы не включите эту опцию, вы получите сообщение об ошибке, поскольку ответ будет проанализирован как JSON . Ниже приведен скриншот общего сообщения об успехе Netlify.

В классе FeedbackComponent мы импортируем NetlifyFormsService и Router . Мы отправим запись формы, используя метод NetlifyFormsService.submitEntry . Если отправка прошла успешно, мы перенаправим на страницу успешной отправки и сбросим форму. Мы будем использовать службу Router для перенаправления. В случае неудачи свойству errorMsg будет присвоено сообщение об ошибке, которое будет отображаться в форме.

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

После этого внедрите в конструктор NetlifyFormsService и Router .

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

Наконец, вызовите метод NetlifyFormsService.submitEntry в FeedbackComponent.onSubmit .

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

Создайте успешную страницу отправки

Когда пользователь завершает отправку, Netlify возвращает общее сообщение об успешном завершении, показанное на последнем снимке экрана в предыдущем разделе. Однако вы можете сделать ссылку на свою собственную страницу сообщения об успешном завершении. Вы делаете это, добавляя атрибут action в скрытую HTML-форму. Его значение — относительный путь к вашей пользовательской странице успеха. Этот путь должен начинаться с / и относиться к вашему корневому сайту.

Однако настройка пользовательской страницы успеха не работает при использовании скрытой HTML-формы. Если почтовый запрос к скрытой HTML-форме выполнен успешно, он возвращает общее сообщение об успешном завершении Netlify в виде HTML-страницы. Он не перенаправляется, даже если указан атрибут action . Поэтому вместо этого мы перейдем на страницу сообщения об успехе после отправки с помощью службы Router .

Во-первых, давайте добавим содержимое в SuccessComponent , который мы создали ранее. В success.component.html добавьте:

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

Чтобы стилизовать страницу, добавьте это в success.component.css :

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

Вот как выглядит страница:

В классе FeedbackComponent мы уже добавили службу Router в качестве импорта и внедрили ее в конструктор. В его методе onSubmit после успешного выполнения запроса и сброса формы мы переходим на страницу успешной отправки, /success . Для этого мы используем метод navigateByUrl маршрутизатора.

Создание страницы 404

Страница 404 может и не нужна, но иметь ее приятно. Содержимое page-not-found.component.html будет таким:

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

Чтобы стилизовать его, добавьте это в page-not-found.component.css :

 p { text-align: center; }

Вот так будет выглядеть страница 404.

Исправление маршрутизации перед развертыванием

Поскольку мы используем службу Router , вся наша маршрутизация выполняется на клиенте. Если ссылка на страницу в нашем приложении вставлена ​​в адресную строку (глубокая ссылка) или происходит обновление страницы, этот запрос мы отправим на наш сервер. На сервере нет ни одного из наших маршрутов, потому что они были настроены во внешнем интерфейсе, в нашем приложении. В этих случаях мы получим статус 404.

Чтобы исправить это, нам нужно указать серверу Netlify перенаправлять все запросы на нашу страницу index.html . Таким образом, наш маршрутизатор Angular может с ними справиться. Если вам интересно, вы можете прочитать больше об этом явлении здесь и здесь.

Мы начнем с создания файла _redirects в нашей папке src . Файл _redirects — это обычный текстовый файл, в котором указаны правила перенаправления и перезаписи для сайта Netlify. Он должен находиться в каталоге сайта публикации сайта ( dist/<app_name> ). Мы поместим его в папку src и укажем как актив в файле angular.json . Когда приложение будет скомпилировано, оно будет помещено в dist/<app_name> .

 touch src/_redirects

Этот файл будет содержать приведенное ниже правило. Это указывает на то, что все запросы к серверу должны быть перенаправлены на index.html . Мы также добавляем параметр кода состояния HTTP в конце, чтобы указать, что эти перенаправления должны возвращать статус 200 . По умолчанию возвращается статус 301 .

 /* /index.html 200

Последнее, что нам нужно сделать, это добавить приведенную ниже опцию в наш angular.json в разделе er projects > {your_project_name} > architect > options > assets . Включите его в массив assets :

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

Предварительный просмотр вашего приложения локально

Прежде чем вы сможете развернуть приложение обратной связи, лучше предварительно его просмотреть. Это позволяет вам убедиться, что ваш сайт работает так, как вы задумали. Вы можете обнаружить проблемы, возникшие в процессе сборки, например, неработающие пути к ресурсам. Во-первых, вам нужно будет создать свое приложение. Затем мы будем обслуживать скомпилированную версию с помощью сервера. Мы будем использовать lite-server, который представляет собой легкий сервер с перезагрузкой в ​​реальном времени для веб-приложений.

Примечание . Поскольку приложение еще не развернуто на Netlify, вы получите ошибку 404 при попытке отправить запрос на публикацию. Это связано с тем, что Netlify Forms работают только с развернутыми приложениями. Вы увидите ошибку в форме, как показано на снимке экрана ниже, однако она будет работать после ее развертывания.

1. Для начала установите lite-сервер:
   

    npm install lite-server --save-dev

2. Затем в каталоге рабочей области вашего приложения создайте приложение. Чтобы убедиться, что сборки запускаются каждый раз, когда ваши файлы изменяются, передайте ему флаг --watch . После компиляции приложения результаты записываются в выходной каталог dist/<app name> . Если вы используете систему контроля версий, не проверяйте папку dist , потому что она создается и предназначена только для предварительного просмотра.
   

    ng build --watch

3. Чтобы обслуживать скомпилированный сайт, запустите lite-server для выходного каталога сборки.
   

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

Теперь сайт обслуживается по адресу localhost:3000 . Проверьте его в своем браузере и убедитесь, что он работает должным образом, прежде чем начать его развертывание.

Развертывание

Существует несколько способов развернуть проект Angular на Netlify Edge. Здесь мы рассмотрим три:

1. Используя netlify-builder ,
2. Используя Git и веб-интерфейс Netlify,
3. Использование инструмента Netlify CLI.

1. Использование netlify-builder

netlify-builder облегчает развертывание приложений Angular через интерфейс командной строки Angular. Чтобы использовать этот метод, ваше приложение должно быть создано с использованием Angular CLI версии 8.3.0 или выше.

1. На вкладке « Сайты » панели инструментов Netlify создайте новый проект. Поскольку мы не будем использовать Git для создания проекта, перетащите любую пустую папку в область с пунктирной рамкой, помеченную «Перетащите сюда папку вашего сайта» . Это автоматически создаст проект со случайным именем. Вы можете изменить это имя в настройках домена сайта позже, если хотите.
   

   

   
   Это то, что вы должны увидеть, как только ваш проект будет создан.
   

   

2. Прежде чем вы сможете выполнить развертывание с помощью этого метода, вам необходимо получить идентификатор API проекта Netlify и токен личного доступа Netlify из своей учетной записи. Вы можете получить идентификатор API проекта в настройках сайта. В разделе « Настройки сайта» > «Основные» > «Сведения о сайте» > «Информация о сайте» вы найдете идентификатор API вашего проекта.
   

   

   

   
   Вы можете получить персональный токен доступа в настройках пользователя. В разделе « Настройки пользователя» > «Приложения» > «Личные токены доступа » нажмите кнопку « Новый токен доступа ». При появлении запроса введите описание вашего токена, затем нажмите кнопку « Создать токен». Скопируйте свой токен. Ради сохранения вы можете сохранить эти значения в файле .env в вашем проекте, но не возвращайте этот файл, если вы используете систему контроля версий.
   

   

   

   

   

3. Затем добавьте netlify-builder в свой проект с помощью ng add .
   

    ng add @netlify-builder/deploy

   После завершения установки вам будет предложено добавить идентификатор API и токен личного доступа.
   

   

   
   Добавлять их сюда необязательно. Вы можете проигнорировать это приглашение, потому что они будут добавлены в ваш файл angular.json , который обычно регистрируется, если вы используете систему контроля версий. Хранить такую ​​конфиденциальную информацию в репозиториях кода небезопасно. Если вы не регистрируете этот файл, вы можете просто ввести свой идентификатор API и токен личного доступа. Запись ниже будет изменена в вашем файле angular.json в настройках architect .
   

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

4. Все, что осталось, это развернуть ваше приложение, выполнив:
   

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

   В качестве альтернативы вы можете поместить это в сценарий и запускать его, когда вам нужно развернуть приложение.
   

    # 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

   Это вывод, который вы должны увидеть после запуска этой команды:
   

   

2. Использование Git и веб-интерфейса Netlify

Если код вашего приложения Angular размещен на Github, Bitbucket или Gitlab, вы можете разместить проект с помощью веб-интерфейса Netlify.

1. На вкладке « Сайты » на панели инструментов Netlify нажмите « Кнопка «Новый сайт из Git».
   

   

2. Подключитесь к службе репозитория кода. Выберите службу, в которой размещен код вашего приложения. Вам будет предложено разрешить Netlify просматривать ваши репозитории. Это будет отличаться от услуги к службе.
   

   

3. Выберите репозиторий кода.
   

   

4. Далее вы укажете параметры развертывания и сборки. В этом случае выберите ветку, из которой вы хотите выполнить развертывание, укажите команду сборки как ng deploy --prod и каталог публикации как dist/<your app name> .
   

   

5. Нажмите кнопку « Развернуть сайт» , и все готово.

3. Использование инструмента командной строки Netlify

1. Для начала установите инструмент Netlify CLI следующим образом:
   

    npm install netlify-cli -g

   Если установка прошла успешно, вы должны увидеть следующие результаты на своем терминале:
   

   

2. Затем войдите в Netlify, выполнив:
   

    netlify login

   Когда вы запустите эту команду, она перейдет в окно браузера, где вам будет предложено авторизовать интерфейс командной строки Netlify. Нажмите кнопку Authorize . Затем вы можете приступить к закрытию вкладки после предоставления авторизации.

   

   

3. Чтобы создать новый проект Netlify, запустите на своем терминале следующее:
   

    netlify init

   Вам будет предложено либо подключить ваше приложение Angular к существующему проекту Netlify, либо создать новый. Выберите опцию Создать и настроить новый сайт .

   

   Затем выберите свою команду и имя сайта, который вы хотите развернуть. После того, как проект будет создан, инструмент CLI отобразит сведения о сайте для вашего проекта.
   

   

   После этого инструмент CLI предложит вам подключить вашу учетную запись Netlify к хостинг-провайдеру Git, чтобы настроить веб-перехватчики и развернуть ключи. Вы не можете отказаться от этого. Выберите вариант входа в систему, затем авторизуйтесь в Netlify.
   

   

   Далее вам будет предложено ввести команду сборки. Использовать:
   

    ng build --prod

   После этого вас попросят указать каталог для развертывания. Введите dist/<app name> с именем вашего приложения.
   

   

   В конце команда завершится и отобразит этот вывод.
   

   

4. Чтобы развернуть приложение, запустите:
   

    netlify deploy --prod

   Использование флага --prod гарантирует, что сборка развернута в рабочей среде. Если вы опустите этот флаг, команда netlify deploy развернет вашу сборку по уникальному черновому URL-адресу, который используется для тестирования и предварительного просмотра. После завершения развертывания вы должны увидеть этот вывод:
   

   

Просмотр отправленных форм

Представленные формы можно просмотреть на панели инструментов Netlify на вкладке « Формы » вашего сайта. Вы можете найти его по адресу app.netlify.com/sites/<your_site_name>/forms . На этой странице будут перечислены все ваши активные формы. Атрибут имени, который вы указали в элементе скрытой формы, — это имя формы на информационной панели.

После того, как вы выберете форму, будут перечислены все материалы для этой формы. Вы можете загрузить все записи в виде CSV-файла, пометить их как спам или удалить.

Заключение

Netlify Forms позволяет вам собирать отправленные формы из вашего приложения без необходимости создавать или настраивать серверную часть для этого. Это может быть полезно, особенно в приложениях, которым нужно собирать ограниченный объем данных, таких как контактная информация, отзывы клиентов, подписки на мероприятия и т. д.

Объединение реактивных форм Angular с формами Netlify позволяет структурировать вашу модель данных. Реактивные формы Angular имеют дополнительное преимущество, заключающееся в том, что их модель данных и элементы формы синхронизированы друг с другом. Они не полагаются на рендеринг пользовательского интерфейса.

Хотя Netlify Forms работают только при развертывании на Netlify Edge, платформа хостинга довольно надежна, предоставляет полезные функции, такие как A/B-тестирование, и автоматизирует сборку и развертывание приложений.

• Посмотреть исходный код этого проекта →

Вы можете продолжить читать больше об использовании Netlify с вашими формами здесь.