Cree e implemente un formulario angular con Netlify Forms y Edge

Crear el flujo de trabajo de front-end, back-end e implementación de una aplicación requiere mucho trabajo. En los casos en que su aplicación recopila solo una cantidad limitada de envíos de datos de sus usuarios, es posible que no valga la pena el tiempo y el esfuerzo de crear un backend completo. Una alternativa al desarrollo de un backend completo es usar Netlify Forms. En este tutorial, explicaré cómo puede usar un formulario reactivo angular con Netlify Forms. Dado que los formularios de Netlify solo funcionan cuando se implementan en Netlify, también ilustraré cómo implementar su aplicación en Netlify Edge.

El kit de herramientas

Un formulario reactivo angular es un formulario que tiene un modelo de datos estructurados creado explícitamente dentro de una clase de componente utilizando los proveedores de ReactiveFormsModule. Se crea un modelo de formulario para cada elemento de entrada dentro de la vista de formulario. Este modelo de formulario es una instancia de la clase FormControl y realiza un seguimiento del valor del elemento de formulario. El modelo de formulario es inmutable porque cada vez que se realiza un cambio en el modelo, la instancia de FormControl devuelve un nuevo modelo de datos en lugar de actualizar el modelo anterior. Su inmutabilidad hace que la detección de cambios sea más eficiente y permite la alteración de datos con operadores observables. Dado que los elementos de entrada de formulario están conectados directamente a sus modelos de formulario, las actualizaciones entre ellos son sincrónicas y no dependen de la representación de la interfaz de usuario.

Netlify es una plataforma que le permite crear, implementar y alojar sitios creados con diversas tecnologías. Los sitios creados con Angular se pueden alojar en Netlify. Netlify también proporciona una gran cantidad de herramientas que simplifican, automatizan y aumentan las compilaciones y las implementaciones de estos sitios. Vamos a utilizar dos de sus productos en este tutorial: Netlify Edge y Netlify Forms.

Como se describió anteriormente, Netlify Forms es una función de manejo de formularios que recibe envíos de formularios HTML automáticamente. No requiere ninguna configuración de procesamiento de envío, como la creación de API, scripts, etc. Esta función solo funciona con formularios en sitios implementados en Netlify. Está habilitado de forma predeterminada, lo que reduce aún más la configuración necesaria para configurar los envíos de formularios. El manejo de envíos se configura durante la implementación, donde los bots de compilación de Netlify analizan los archivos HTML de un sitio.

Netlify Edge es una red global de entrega de aplicaciones en la que se publican sitios y aplicaciones. Proporciona funciones como pruebas A/B, reversiones, puesta en escena y lanzamientos por fases. Todas las implementaciones en Netlify Edge son atómicas, lo que significa que un sitio solo está activo cuando todos los archivos se han cargado/actualizado y los cambios en el sitio están listos. Una vez que se implementa un sitio, se le asigna un subdominio en netlify.app cuando se implementa en producción. Netlify Edge también es compatible con implementaciones de vista previa y sucursales (pruebas, desarrollo, etc.).

El manejo de envío de Netlify Forms funciona porque los bots de compilación analizan los formularios HTML en un sitio durante la implementación. Estos bots no encontrarán formularios renderizados en Javascript del lado del cliente como los de los sitios Angular compilados. Por lo tanto, la configuración normal de Netlify Forms no funcionará con Angular Forms.

Sin embargo, hay una solución a esto. Para que reciba envíos, se agrega un formulario HTML plano oculto al archivo index.html . Este formulario funciona con los bots de compilación. Al enviar el formulario Angular, se realiza una solicitud posterior a este formulario oculto que luego es capturado por Netlify Forms.

En este artículo, crearemos un formulario reactivo. También desarrollaremos un servicio para realizar una solicitud posterior al formulario HTML oculto. Por último, implementaremos la aplicación en Netlify Edge.

Ejemplo

Para ilustrar cómo crear la aplicación, tomaremos un ejemplo de un formulario de comentarios común en muchos sitios web. Utilizaremos este formulario para recopilar comentarios/quejas, preguntas y sugerencias de los usuarios del sitio junto con su nombre y correo electrónico. También lo utilizaremos para recopilar su calificación del sitio.

Requisitos

Para seguir este tutorial, necesitará una cuenta de Netlify y Angular CLI instalado. Si no tiene la CLI, puede instalarla usando npm.

 npm install -g @angular/cli

Si aún no se ha registrado para obtener una cuenta de Netlify, puede crear una aquí. Netlify ofrece registro a través de Github, Gitlab, Bitbucket o correo electrónico. Según el método de implementación que elija, puede haber otros requisitos. Se indicarán en cada método de despliegue.

Configuración de la aplicación

Para empezar, crearemos la aplicación y la llamaremos feedback . Al crearlo, agréguele enrutamiento cuando se le solicite en las indicaciones.

 ng new feedback

A continuación, generaremos tres componentes: un formulario de comentarios, una página de mensaje de envío exitoso y una página 404. Los formularios de Netlify le permiten navegar a una página después de enviar correctamente la entrada del formulario. Para eso usaremos SuccessComponent .

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

Después de generar los componentes, agregaremos las rutas a cada página en AppRoutingModule dentro del app-routing.module.ts .

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

Usaremos el servicio FormBuilder para crear nuestro formulario reactivo. Esto se debe a que es más conveniente y menos repetitivo que usar controles de formulario básicos. Para tener acceso a él, necesitaremos registrar ReactiveFormsModule en el archivo app.module.ts .

Dado que realizaremos una solicitud de publicación en el formulario HTML oculto, también debemos registrar HttpClientModule .

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

Proceda a cambiar el contenido de app.component.html para que solo tenga la salida del enrutador.

 <router-outlet></router-outlet>

Las diferentes páginas compartirán algunos estilos. Así que agregue el estilo a continuación 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; } }

Crear el formulario reactivo

En nuestra clase FeedbackComponent , comenzaremos importando el servicio FormBuilder que usaremos para crear el formulario. También importaremos la clase Validators para la validación de entrada de formulario.

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

Luego inyectaremos el servicio FormBuilder agregándolo al constructor FeedbackComponent .

 constructor(private fb: FormBuilder) { }

A continuación, definiremos el modelo de formulario utilizando el método de group del servicio FormBuilder inyectado. También agregaremos una propiedad errorMsg para contener cualquier error que podamos encontrar al enviar la entrada del formulario. También se incluye un método closeError que cerrará la alerta de error que se muestra en el formulario.

Cada control en el modelo de formulario se verificará utilizando validadores de la clase Validators . Si alguna de las entradas falla en la validación, el formulario no será válido y el envío se desactivará. Puede elegir agregar múltiples validadores a un control de formulario como en el caso del control de email .

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

En la plantilla del componente ( feedback.component.html ), agregaremos esto.

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

Tenga en cuenta que el elemento de formulario debe tener el [formGroup]="feedbackForm" correspondiente al modelo que acabamos de crear. Además, cada uno de los elementos de entrada debe tener un formControlName="" correspondiente a su control de formulario homólogo en el modelo.

Para aplicar estilo al formulario, agréguelo 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; } }

Así es como se verá el formulario:

Agregar un formulario HTML oculto

Como se indicó anteriormente, debemos agregar un formulario HTML oculto que los bots de compilación de Netlify Forms puedan analizar. Los envíos se enviarán desde nuestro formulario reactivo al formulario HTML oculto. El formulario HTML se coloca en el archivo index.html .

Este formulario debe tener el mismo nombre que el formulario reactivo. Además, debe contener otros tres atributos: netlify , netlify-honeypot y hidden . Los bots buscan cualquier formulario que tenga el atributo netlify para que Netlify pueda procesar sus entradas. El netlify-honeypot se agrega para evitar que se muestren captchas cuando se realiza un envío y habilita una protección adicional contra el correo no deseado.

 <!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 importante tener en cuenta que, dado que no puede establecer el valor de los elementos de entrada del file , no puede cargar un archivo con este método.

Hacer una solicitud posterior al formulario oculto

Para enviar un envío desde el formulario reactivo al formulario HTML, haremos una solicitud de publicación que contenga el envío a index.html . La operación se realizará en el método onSubmit del FeedbackComponent .

Sin embargo, antes de que podamos hacer eso, necesitamos crear dos cosas: una interfaz de Feedback y un NetlifyFormsService . Comencemos con la interfaz.

 touch src/app/feedback/feedback.ts

El contenido de este archivo será:

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

NetlifyFormsService contendrá un método público para enviar una entrada de comentarios, un método privado para enviar una entrada genérica y otro privado para manejar cualquier error. Puede agregar otros métodos públicos para formularios adicionales.

Para generarlo ejecuta lo siguiente:

 ng gs netlify-forms/netlify-forms

El método submitEntry devuelve un Observable<string> porque Netlify envía una página HTML con una alerta de éxito una vez que publicamos datos en el formulario. Este es el servicio:

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

Enviaremos el envío del formulario como HttpParams . Se debe incluir un encabezado para ContentType con el valor application/x-www-form-urlencoded . La opción responseType se especifica como text porque, si tiene éxito, la publicación en el formulario oculto devolverá una página HTML que contiene un mensaje de éxito genérico de Netlify. Si no incluye esta opción, obtendrá un error porque la respuesta se analizará como JSON . A continuación se muestra una captura de pantalla del mensaje genérico de éxito de Netlify.

En la clase FeedbackComponent , importaremos NetlifyFormsService y Router . Enviaremos la entrada del formulario mediante el método NetlifyFormsService.submitEntry . Si el envío es exitoso, lo redirigiremos a la página de envío exitoso y restableceremos el formulario. Usaremos el servicio de Router para la redirección. Si no tiene éxito, a la propiedad errorMsg se le asignará el mensaje de error y se mostrará en el formulario.

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

Después de eso, inyecte NetlifyFormsService y Router en el constructor.

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

Por último, llame al método NetlifyFormsService.submitEntry en FeedbackComponent.onSubmit .

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

Crear una página de envío exitosa

Cuando un usuario completa un envío, Netlify devuelve un mensaje de éxito genérico que se muestra en la última captura de pantalla de la sección anterior. Sin embargo, puede vincular de nuevo a su propia página personalizada de mensajes de éxito. Para ello, agregue el atributo de action al formulario HTML oculto. Su valor es la ruta relativa a su página de éxito personalizada. Esta ruta debe comenzar con / y ser relativa a su sitio raíz.

Sin embargo, la configuración de una página de éxito personalizada no parece funcionar cuando se utiliza un formulario HTML oculto. Si la solicitud de publicación en el formulario HTML oculto es exitosa, devuelve el mensaje genérico de éxito de Netlify como una página HTML. No redirige incluso cuando se especifica un atributo de action . Entonces, en su lugar, navegaremos a la página del mensaje de éxito después de un envío utilizando el servicio de Router .

Primero, agreguemos contenido al SuccessComponent que generamos anteriormente. En success.component.html , agregue:

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

Para diseñar la página, agregue esto a success.component.css :

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

Así es como se ve la página:

En la clase FeedbackComponent , ya agregamos el servicio de Router como una importación y lo inyectamos en el constructor. En su método onSubmit , después de que la solicitud sea exitosa y el formulario se haya reiniciado, navegamos a la página de envío exitoso, /success . Usamos el método de navigateByUrl del enrutador para hacer eso.

Crear la página 404

La página 404 puede no ser necesaria, pero es bueno tenerla. El contenido de page-not-found.component.html sería:

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

Para darle estilo, agregue esto a page-not-found.component.css :

 p { text-align: center; }

Así es como se verá la página 404.

Corregir enrutamiento antes de la implementación

Dado que estamos utilizando el servicio de Router , todo nuestro enrutamiento se realiza en el cliente. Si se pega un enlace a una página en nuestra aplicación en la barra de direcciones (enlace profundo) o hay una actualización de la página, esa solicitud se enviará a nuestro servidor. El servidor no contiene ninguna de nuestras rutas porque fueron configuradas en el frontend, en nuestra app. Recibiremos un estado 404 en estos casos.

Para solucionar esto, debemos decirle al servidor de Netlify que redirija todas las solicitudes a nuestra página index.html . De esta manera, nuestro enrutador angular puede manejarlos. Si te interesa, puedes leer más sobre este fenómeno aquí y aquí.

Comenzaremos creando un archivo _redirects en nuestra carpeta src . El archivo _redirects es un archivo de texto sin formato que especifica las reglas de redirección y reescritura para el sitio de Netlify. Debe residir en el directorio del sitio de publicación del sitio ( dist/<app_name> ). Lo colocaremos en la carpeta src y lo especificaremos como activo en el archivo angular.json . Cuando se compila la aplicación, se colocará en dist/<app_name> .

 touch src/_redirects

Este archivo contendrá la siguiente regla. Indica que todas las solicitudes al servidor deben redirigirse a index.html . También agregamos una opción de código de estado HTTP al final para indicar que estos redireccionamientos deben devolver un estado 200 . De forma predeterminada, se devuelve un estado 301 .

 /* /index.html 200

Lo último que tenemos que hacer es agregar la siguiente opción en nuestro angular.json en er projects > {your_project_name} > architect > options > assets . Incluirlo en la matriz de assets :

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

Obtenga una vista previa de su aplicación localmente

Antes de que pueda implementar la aplicación de comentarios, es mejor obtener una vista previa. Esto le permite asegurarse de que su sitio funcione como lo había previsto. Puede descubrir problemas resultantes del proceso de compilación, como rutas rotas a recursos, entre otras cosas. Primero, tendrás que construir tu aplicación. Luego serviremos la versión compilada usando un servidor. Usaremos lite-server, que es un servidor ligero de recarga en vivo para aplicaciones web.

Nota : Dado que la aplicación aún no está implementada en Netlify, obtendrá un error 404 cuando intente realizar la solicitud de publicación. Esto se debe a que Netlify Forms solo funciona en aplicaciones implementadas. Verá un error en el formulario como se muestra en la siguiente captura de pantalla, sin embargo, funcionará una vez que lo haya implementado.

1. Para comenzar, instale lite-server:
   

    npm install lite-server --save-dev

2. A continuación, dentro del directorio del espacio de trabajo de su aplicación, cree su aplicación. Para asegurarse de que las compilaciones se ejecuten cada vez que cambien sus archivos, pásele el indicador --watch . Una vez que se compila la aplicación, los resultados se escriben en el directorio de salida dist/<app name> . Si está utilizando un sistema de control de versiones, asegúrese de no verificar en la carpeta dist porque se genera y es solo para fines de vista previa.
   

    ng build --watch

3. Para servir el sitio compilado, ejecute el lite-server contra el directorio de salida de compilación.
   

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

El sitio ahora se sirve en localhost:3000 . Compruébelo en su navegador y asegúrese de que funciona como se espera antes de comenzar su implementación.

Despliegue

Hay varias formas de implementar su proyecto Angular en Netlify Edge. Cubriremos tres aquí:

1. Usando netlify-builder ,
2. Usando Git y la interfaz de usuario web de Netlify,
3. Usando la herramienta CLI de Netlify.

1. Usar netlify-builder

netlify-builder facilita la implementación de aplicaciones Angular a través de la CLI de Angular. Para usar este método, su aplicación debe haber sido creada usando Angular CLI v8.3.0 o superior.

1. Desde la pestaña Sitios de su tablero de Netlify, cree un nuevo proyecto. Dado que no usaremos Git para crear un proyecto, arrastre cualquier carpeta vacía al área de borde punteado marcada como "Arrastre y suelte la carpeta de su sitio aquí" . Esto creará automáticamente un proyecto con un nombre aleatorio. Puede cambiar este nombre en la configuración de dominio del sitio más adelante si lo desea.
   

   

   
   Esto es lo que debería ver una vez que se haya creado su proyecto.
   

   

2. Antes de que pueda implementar con este método, deberá obtener la ID de API del proyecto Netlify y un token de acceso personal de Netlify de su cuenta. Puede obtener el ID de la API del proyecto desde la configuración del sitio. En Configuración del sitio > General > Detalles del sitio > Información del sitio , encontrará el ID de la API de su proyecto.
   

   

   

   
   Puede obtener un token de acceso personal en su configuración de usuario. En Configuración de usuario > Aplicaciones > Tokens de acceso personal , haga clic en el botón Nuevo token de acceso . Cuando se le solicite, ingrese la descripción de su token, luego haga clic en el botón Generar token . Copie su ficha. En aras de la persistencia, puede almacenar estos valores en un archivo .env dentro de su proyecto, pero no registre este archivo si está utilizando un sistema de control de versiones.
   

   

   

   

   

3. Luego, agregue netlify-builder a su proyecto usando ng add .
   

    ng add @netlify-builder/deploy

   Una vez que termine la instalación, se le pedirá que agregue la ID de API y el token de acceso personal.
   

   

   
   Es opcional agregar estos aquí. Puede ignorar este aviso porque se agregarán a su archivo angular.json , que generalmente se verifica si usa un sistema de control de versiones. No es seguro almacenar este tipo de información confidencial en repositorios de código. Si no está registrando este archivo, simplemente puede ingresar su ID de API y su token de acceso personal. La siguiente entrada se modificará en su archivo angular.json en la configuración del architect .
   

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

4. Todo lo que queda es implementar su aplicación ejecutando:
   

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

   Alternativamente, puede poner esto en un script y ejecutarlo cuando necesite implementar su aplicación.
   

    # 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

   Este es el resultado que debería ver una vez que ejecute este comando:
   

   

2. Uso de Git y la interfaz de usuario web de Netlify

Si el código de su aplicación Angular está alojado en Github, Bitbucket o Gitlab, puede alojar el proyecto mediante la interfaz de usuario web de Netlify.

1. Desde la pestaña Sitios en su tablero de Netlify, haga clic en " Botón Nuevo sitio desde Git”.
   

   

2. Conéctese a un servicio de repositorio de código. Elija el servicio donde se aloja el código de su aplicación. Se le pedirá que autorice a Netlify para ver sus repositorios. Esto diferirá de un servicio a otro.
   

   

3. Elija su repositorio de código.
   

   

4. A continuación, especificará las implementaciones y la configuración de compilación. En este caso, seleccione la rama desde la que desea realizar la implementación, especifique el comando de compilación como ng deploy --prod y el directorio de publicación como dist/<your app name> .
   

   

5. Haga clic en el botón Implementar sitio y listo.

3. Uso de la herramienta CLI de Netlify

1. Para comenzar, instale la herramienta Netlify CLI de la siguiente manera:
   

    npm install netlify-cli -g

   Si la instalación es exitosa, deberías ver estos resultados en tu terminal:
   

   

2. A continuación, inicie sesión en Netlify ejecutando:
   

    netlify login

   Cuando ejecute este comando, navegará a una ventana del navegador donde se le pedirá que autorice la CLI de Netlify. Haga clic en el botón Authorize . Luego puede proceder a cerrar la pestaña una vez que se haya otorgado la autorización.

   

   

3. Para crear un nuevo proyecto de Netlify, ejecute lo siguiente en su terminal:
   

    netlify init

   Se le pedirá que conecte su aplicación Angular a un proyecto de Netlify existente o que cree uno nuevo. Elija la opción Crear y configurar un nuevo sitio .

   

   A continuación, seleccione su equipo y un nombre para el sitio que le gustaría implementar. Una vez que se haya creado el proyecto, la herramienta CLI enumerará los detalles del sitio para su proyecto.
   

   

   Después de lo cual, la herramienta CLI le pedirá que conecte su cuenta de Netlify a un proveedor de alojamiento de Git para configurar webhooks e implementar claves. No puede optar por no participar en esto. Elija una opción para iniciar sesión y luego autorice Netlify.
   

   

   A continuación, se le pedirá que ingrese un comando de compilación. Utilizar:
   

    ng build --prod

   Luego, se le pedirá que proporcione un directorio para implementar. Ingrese dist/<app name> con el nombre de su aplicación.
   

   

   Al final de eso, el comando se completará y mostrará esta salida.
   

   

4. Para implementar la aplicación, ejecute:
   

    netlify deploy --prod

   El uso de la --prod garantiza que la compilación se implemente en producción. Si omite esta marca, el comando de implementación de netlify deploy su compilación en una URL de borrador única que se usa para probar y obtener una vista previa. Una vez que se complete la implementación, debería ver este resultado:
   

   

Visualización de envíos de formularios

Los envíos de formularios se pueden ver en el panel de control de Netlify en la pestaña Formularios de su sitio. Puede encontrarlo en app.netlify.com/sites/<your_site_name>/forms . En esta página, se enumerarán todos sus formularios activos. El atributo de nombre que coloca en el elemento de formulario oculto es el nombre del formulario en el tablero.

Una vez que seleccione un formulario, se enumerarán todos los envíos para ese formulario. Puede optar por descargar todas las entradas como un archivo CSV, marcarlas como spam o eliminarlas.

Conclusión

Netlify Forms le permite recopilar el envío de formularios desde su aplicación sin tener que crear o configurar un backend para hacerlo. Esto puede ser útil especialmente en aplicaciones que solo necesitan recopilar una cantidad limitada de datos, como información de contacto, comentarios de los clientes, registros de eventos, etc.

Emparejar formularios reactivos de Angular con formularios de Netlify le permite estructurar su modelo de datos. Los formularios reactivos angulares tienen el beneficio adicional de tener su modelo de datos y elementos de formulario sincronizados entre sí. No se basan en la representación de la interfaz de usuario.

Aunque Netlify Forms solo funciona cuando se implementa en Netlify Edge, la plataforma de alojamiento es bastante robusta, ofrece funciones útiles como pruebas A/B y automatiza la creación y la implementación de aplicaciones.

• Ver el código fuente de este proyecto →

Puede continuar leyendo más sobre el uso de Netlify con sus formularios aquí.