Cómo crear una aplicación Jamstack cliente-servidor usando Netlify, Gatsby y Fauna

Jamstack es una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado prediseñado.

Los aspectos clave de una aplicación Jamstack son los siguientes:

• Toda la aplicación se ejecuta en una CDN (o ADN). CDN significa Content Delivery Network y ADN es una red de entrega de aplicaciones.
• Todo vive en Git.
• Las compilaciones automatizadas se ejecutan con un flujo de trabajo cuando los desarrolladores envían el código.
• Hay una implementación automática del marcado prediseñado en CDN/ADN.
• Las API reutilizables permiten integraciones sencillas con muchos de los servicios. Por poner algunos ejemplos, Stripe para pagos y pagos, Mailgun para servicios de correo electrónico, etc. También podemos escribir API personalizadas dirigidas a un caso de uso específico. Veremos ejemplos de este tipo de API personalizados en este artículo.
• Es prácticamente sin servidor. Para decirlo más claramente, no mantenemos ningún servidor, sino que utilizamos servicios ya existentes (como correo electrónico, medios, bases de datos, búsqueda, etc.) o funciones sin servidor.

En este artículo, aprenderemos cómo crear una aplicación Jamstack que tenga:

• Un almacén de datos global con soporte GraphQL para almacenar y recuperar datos con facilidad. Usaremos Fauna para lograr esto.
• Funciones sin servidor que también actúan como API para recuperar datos del almacén de datos de Fauna. Usaremos las funciones sin servidor de Netlify para esto.
• Construiremos el lado del cliente de la aplicación utilizando un generador de sitios estáticos llamado Gatsbyjs.
• Finalmente implementaremos la aplicación en una CDN configurada y administrada por Netlify CDN.

Entonces, ¿qué estamos construyendo hoy?

A todos nos encanta ir de compras. ¿Qué tan genial sería gestionar todas nuestras notas de compras en un lugar centralizado? Por eso, crearemos una aplicación llamada 'shopnote' que nos permitirá administrar las notas de la tienda. También podemos agregar uno o más elementos a una nota, marcarlos como hechos, marcarlos como urgentes, etc.

Al final de este artículo, nuestra aplicación Shopnote se verá así:

TL;DR

Aprenderemos cosas paso a paso en este artículo. Si desea acceder al código fuente oa la demostración antes, aquí encontrará enlaces a ellos.

• Puede acceder a la demostración de notas de la tienda desde aquí: https://shopnote.netlify.app/
• Todo el código fuente utilizado en este artículo está en mi repositorio de GitHub. No dudes en seguirlo, ya que sigo actualizando el código fuente con frecuencia. https://github.com/atapas/shopnote

Configurar fauna

Fauna es la API de datos para aplicaciones cliente-servidor. Si está familiarizado con cualquier RDBMS tradicional, una diferencia importante con Fauna sería que es un sistema NOSQL relacional que ofrece todas las capacidades del RDBMS heredado. Es muy flexible sin comprometer la escalabilidad y el rendimiento.

Fauna admite múltiples API para acceder a datos,

• GraphQL: un lenguaje de manipulación y consulta de datos de código abierto. Si es nuevo en GraphQL, puedes encontrar más detalles aquí, https://graphql.org/
• Lenguaje de consulta de fauna (FQL): una API para consultar fauna. FQL tiene controladores específicos del idioma, lo que lo hace flexible para su uso con lenguajes como JavaScript, Java, Go, etc. Encuentre más detalles de FQL desde aquí.

En este artículo explicaremos los usos de GraphQL para la aplicación ShopNote.

Lo primero es registrarse usando esta URL. Seleccione el plan gratuito que tiene una generosa cuota de uso diario y más que suficiente para nuestro uso.

A continuación, cree una base de datos que le proporcionará un nombre de base de datos de su elección. He utilizado notas de tienda como nombre de la base de datos.

Después de crear la base de datos, definiremos el esquema GraphQL y lo importaremos a la base de datos. Un esquema GraphQL define la estructura de los datos. Defina los tipos de datos y la relación entre ellos. Con el esquema también podemos especificar qué tipo de consultas están permitidas.

En esta etapa, creamos nuestra carpeta de proyecto. Cree una carpeta de proyecto en algún lugar de su disco duro con el nombre shopnote. Crea un archivo con el nombre, shopnotes.gqlcon el siguiente contenido:

type ShopNote {  name: String!  description: String  updatedAt: Time  items: [Item!] @relation} type Item {  name: String!  urgent: Boolean  checked: Boolean  note: ShopNote!} type Query {  allShopNotes: [ShopNote!]!}

Aquí hemos definido el esquema para una lista de notas de la tienda y un artículo, donde cada uno ShopNotecontiene nombre, descripción, hora de actualización y una lista de artículos. Cada Itemtipo tiene propiedades como nombre, urgente, marcado ya qué nota pertenece.

Tenga en cuenta la @relationdirectiva aquí. Puede anotar un campo con la @relationdirectiva para marcarlo para participar en una relación bidireccional con el tipo de destino. En este caso, ShopNotey Itemestán en una relación de uno a muchos. Es decir, uno ShopNotepuede tener múltiples artículos, donde cada artículo puede estar relacionado con un máximo de una ShopNote.

Puede leer más sobre la @relationdirectiva desde aquí. Puede encontrar más información sobre las relaciones GraphQL desde aquí.

Como siguiente paso, cargue el shopnotes.gqlarchivo desde el panel de Fauna usando el botón IMPORTAR ESQUEMA,

Al importar un esquema GraphQL, FaunaDB creará, mantendrá y actualizará automáticamente los siguientes recursos:

• Colecciones para cada tipo GraphQL no nativo; en este caso, ShopNote y Item.
• Consultas/mutaciones CRUD básicas para cada colección creada por el esquema, por ejemplo createShopNote allShopNotes; cada uno de los cuales funciona con FQL.
• Para directivas GraphQL específicas: índices personalizados o FQL para establecer relaciones (es decir @relation), unicidad ( @unique) y más.

Detrás de la escena, Fauna también ayudará a crear los documentos automáticamente. Lo veremos dentro de un tiempo.

Fauna admite un modelo de datos relacionales de objetos sin esquema. Una base de datos en Fauna puede contener un grupo de colecciones. Una colección puede contener uno o más documentos. Cada uno de los registros de datos se inserta en el documento. Esto forma una jerarquía que se puede visualizar como:

Aquí el registro de datos puede ser matrices, objetos o cualquier otro tipo admitido. Con el modelo de datos de Fauna podemos crear índices y aplicar restricciones. Los índices de fauna pueden combinar datos de múltiples colecciones y son capaces de realizar cálculos.

En esta etapa, Fauna ya creó un par de colecciones para nosotros, ShopNote y Item. A medida que comencemos a insertar registros, veremos que también se están creando los documentos. Podremos ver y consultar los registros y utilizar el poder de los índices. Es posible que veas la estructura del modelo de datos apareciendo en tu panel de Fauna así dentro de un tiempo.

Cabe señalar aquí que cada uno de los documentos se identifica mediante el refatributo único. También hay un tscampo que devuelve la marca de tiempo de la modificación reciente del documento. El registro de datos es parte del datacampo. Esta comprensión es realmente importante cuando interactúa con colecciones, documentos y registros utilizando funciones integradas de FQL. Sin embargo, en este artículo interactuaremos con ellos mediante consultas GraphQL con funciones Netlify.

Con todos estos conocimientos, comencemos a utilizar nuestra base de datos Shopenotes que se creó correctamente y está lista para usar.

Probemos algunas consultas.

Aunque hemos importado el esquema y los elementos subyacentes están implementados, todavía no tenemos un documento. Creemos uno. Para hacer eso, copie la siguiente consulta de mutación GraphQL en el panel izquierdo de la pantalla del patio de juegos GraphQL y ejecútela.

mutation {  createShopNote(data: {    name: "My Shopping List"    description: "This is my today's list to buy from Tom's shop"    items: {      create: [        { name: "Butther - 1 pk", urgent: true }        { name: "Milk - 2 ltrs", urgent: false }        { name: "Meat - 1lb", urgent: false }      ]    }  }) {    _id    name    description    items {      data {        name,        urgent      }    }  }}

Tenga en cuenta que, como Fauna ya creó las clases de mutación GraphQL en segundo plano, podemos usarlas directamente como createShopNote. Una vez ejecutado con éxito, podrá ver la respuesta de una creación de ShopNote en el lado derecho del editor.

El documento recién creado ShopNotetiene todos los detalles requeridos que hemos pasado al crearlo. Hemos visto ShopNoteque tiene una relación de uno a muchos con Item. Puede ver que la respuesta de la nota de la tienda tiene los datos del artículo anidados en ella. En este caso, un billete tiene tres artículos. Esto es realmente poderoso. Una vez definido el esquema y la relación, el documento se creará automáticamente teniendo en cuenta esa relación.

Ahora, intentamos buscar todas las notas de la tienda. Aquí está la consulta GraphQL:

query {    allShopNotes {    data {      _id      name      description      updatedAt      items {        data {          name,          checked,          urgent        }      }    }  }}

Probemos la consulta en el patio de recreo como antes:

Ahora tenemos una base de datos con un esquema y está en pleno funcionamiento con funciones de creación y recuperación. De manera similar, podemos crear consultas para agregar, actualizar, eliminar elementos de una nota de tienda y también actualizar y eliminar una nota de tienda. Estas consultas se utilizarán más adelante cuando creemos las funciones sin servidor.

Si está interesado en ejecutar otras consultas en el editor GraphQL, puede encontrarlas desde aquí.

Crear una clave secreta del servidor

A continuación, debemos crear una clave de servidor segura para asegurarnos de que el acceso a la base de datos esté autenticado y autorizado.

Haga clic en la opción SEGURIDAD disponible en la interfaz de FaunaDB para crear la clave, así,

Tras la creación exitosa de la clave, podrá ver el secreto de la clave. Asegúrate de copiarlo y guardarlo en un lugar seguro.

No queremos que nadie más sepa acerca de esta clave. Ni siquiera es una buena idea enviarlo al repositorio de código fuente. Para mantener este secreto, cree un archivo vacío llamado .enven el nivel raíz de la carpeta de su proyecto.

Edite el .envarchivo y agréguele la siguiente línea (pegue la clave del servidor generada en lugar de) YOUR_FAUNA_KEY_SECRET.

FAUNA_SERVER_SECRET=YOUR_FAUNA_KEY_SECRET

Agregue un .gitignorearchivo y escriba el siguiente contenido en él. Esto es para asegurarnos de no enviar accidentalmente el archivo .env al repositorio de código fuente. También estamos ignorando node_modules como práctica recomendada.

.env

Hemos terminado con todo lo que tenía que ver con la configuración de Fauna. Pasemos a la siguiente fase para crear funciones sin servidor y API para acceder a los datos del almacén de datos de Fauna. En esta etapa, la estructura del directorio puede verse así:

Configurar las funciones sin servidor de Netlify

Netlify es una gran plataforma para crear funciones sin servidor y sin complicaciones. Estas funciones pueden interactuar con bases de datos, sistemas de archivos y objetos en memoria.

Las funciones de Netlify funcionan con AWS Lambda. Configurar AWS Lambdas por nuestra cuenta puede ser un trabajo bastante complejo. Con Netlify, simplemente configuraremos una carpeta y soltaremos nuestras funciones. Escribir funciones simples se convierte automáticamente en API.

Primero, crea una cuenta con Netlify. Esto es gratis y, al igual que el nivel gratuito de FaunaDB, Netlify también es muy flexible.

Ahora necesitamos instalar algunas dependencias usando npm o hilo. Asegúrate de tener instalado nodejs. Abra un símbolo del sistema en la raíz de la carpeta del proyecto. Utilice el siguiente comando para inicializar el proyecto con dependencias de nodos,

npm init -y

Instale la utilidad netlify-cli para que podamos ejecutar la función sin servidor localmente.

npm install netlify-cli -g

Ahora instalaremos dos bibliotecas importantes, axios y dotenv. axios se utilizará para realizar las llamadas HTTP y dotenv ayudará a cargar la FAUNA_SERVER_SECRETvariable de entorno desde el .envarchivo process.env.

yarn add axios dotenv

O:

npm i axios dotenv

Crear funciones sin servidor

Cree una carpeta con el nombre, functionsen la raíz de la carpeta del proyecto. Mantendremos todas las funciones sin servidor en él.

Ahora cree una subcarpeta llamada utilsdebajo de la functionscarpeta. Cree un archivo llamado query.jsen la utilscarpeta. Necesitaremos algún código común para consultar el almacén de datos para todas las funciones sin servidor. El código común estará en el query.jsarchivo.

Primero importamos la funcionalidad de la biblioteca axios y cargamos el .envarchivo. A continuación, exportamos una función asíncrona que toma la consulta y las variables. Dentro de la función asíncrona, realizamos llamadas usando axios con la clave secreta. Finalmente, devolvemos la respuesta.

// query.js const axios = require("axios");require("dotenv").config(); module.exports = async (query, variables) = {  const result = await axios({      url: "https://graphql.fauna.com/graphql",      method: "POST",      headers: {          Authorization: `Bearer ${process.env.FAUNA_SERVER_SECRET}`      },      data: {        query,        variables      } });  return result.data;};

Cree un archivo con el nombre, get-shopnotes.jsdebajo de la functionscarpeta. Realizaremos una consulta para recuperar todas las notas de la tienda.

// get-shopnotes.js const query = require("./utils/query"); const GET_SHOPNOTES = `   query {       allShopNotes {       data {         _id         name         description         updatedAt         items {           data {             _id,             name,             checked,             urgent         }       }     }   } }  `; exports.handler = async () = {  const { data, errors } = await query(GET_SHOPNOTES);   if (errors) {    return {      statusCode: 500,      body: JSON.stringify(errors)    };  }   return {    statusCode: 200,    body: JSON.stringify({ shopnotes: data.allShopNotes.data })  };};

Es hora de probar la función sin servidor como una API. Necesitamos hacer una configuración única aquí. Abra un símbolo del sistema en la raíz de la carpeta del proyecto y escriba:

netlify login

Esto abrirá una pestaña del navegador y le pedirá que inicie sesión y autorice el acceso a su cuenta de Netlify. Por favor haga clic en el botón Autorizar.

A continuación, cree un archivo llamado, netlify.tomlen la raíz de la carpeta de su proyecto y agréguele este contenido,

[build]    functions = "functions" [[redirects]]   from = "/api/*"   to = "/.netlify/functions/:splat"   status = 200

Esto es para informar a Netlify sobre la ubicación de las funciones que hemos escrito para que se conozca en el momento de la compilación.

Netlify proporciona automáticamente las API para las funciones. La URL para acceder a la API tiene este formato, /.netlify/functions/get-shopnotesque puede no ser muy fácil de usar. Hemos escrito una redirección para que parezca /api/get-shopnotes.

Bien, hemos terminado. Ahora en el tipo de símbolo del sistema,

netlify dev

De forma predeterminada, la aplicación se ejecutará en localhost:8888 para acceder a la función sin servidor como API.

Abra una pestaña del navegador y pruebe esta URL http://localhost:8888/api/get-shopnotes:

¡¡¡Felicidades!!! Tiene su primera función sin servidor en funcionamiento.

Escribamos ahora la siguiente función sin servidor para crear un archivo ShopNote. Esto va a ser sencillo. Cree un archivo llamado, create-shopnote.jsdebajo de la functionscarpeta. Necesitamos escribir una mutación pasando los parámetros requeridos.

//create-shopnote.js const query = require("./utils/query"); const CREATE_SHOPNOTE = `  mutation($name: String!, $description: String!, $updatedAt: Time!, $items: ShopNoteItemsRelation!) {    createShopNote(data: {name: $name, description: $description, updatedAt: $updatedAt, items: $items}) {      _id      name      description      updatedAt      items {        data {          name,          checked,          urgent        }      }    }  }`; exports.handler = async event = {    const { name, items } = JSON.parse(event.body);  const { data, errors } = await query(    CREATE_SHOPNOTE, { name, items });   if (errors) {    return {      statusCode: 500,      body: JSON.stringify(errors)    };  }   return {    statusCode: 200,    body: JSON.stringify({ shopnote: data.createShopNote })  };};

Preste atención al parámetro ShopNotesItemRelation. Como habíamos creado una relación entre ShopNotey Itemen nuestro esquema, también debemos mantenerla mientras escribimos la consulta.

Hemos desestructurado la carga útil para obtener la información requerida de la carga útil. Una vez que los obtuvimos, simplemente llamamos al método de consulta para crear un archivo ShopNote.

Muy bien, probémoslo. Puede utilizar cartero o cualquier otra herramienta de su elección para probarlo como una API. Aquí está la captura de pantalla del cartero.

Genial, podemos crear una ShopNotecon todos los artículos que queramos comprar en un centro comercial. ¿Qué pasa si queremos agregar un elemento a uno existente ShopNote? Creemos una API para ello. Con el conocimiento que tenemos hasta ahora, será muy rápido.

¿Recuerdas ShopNotey Itemestán relacionados? Entonces, para crear un elemento, tenemos que indicar obligatoriamente de qué ShopNoteva a formar parte. Aquí está nuestra próxima función sin servidor para agregar un elemento a un archivo ShopNote.

//add-item.js const query = require("./utils/query"); const ADD_ITEM = `  mutation($name: String!, $urgent: Boolean!, $checked: Boolean!, $note: ItemNoteRelation!) {    createItem(data: {name: $name, urgent: $urgent, checked: $checked, note: $note}) {      _id      name      urgent      checked      note {        name      }    }  }`; exports.handler = async event = {    const { name, urgent, checked, note} = JSON.parse(event.body);  const { data, errors } = await query(    ADD_ITEM, { name, urgent, checked, note });   if (errors) {    return {      statusCode: 500,      body: JSON.stringify(errors)    };  }   return {    statusCode: 200,    body: JSON.stringify({ item: data.createItem })  };};

Pasamos las propiedades del artículo como el nombre, si es urgente, el valor de verificación y la nota de la que deben formar parte los artículos. Veamos cómo se puede llamar a esta API usando cartero,

Como puede ver, estamos pasando la idnota mientras creamos un elemento para ella.

No nos molestaremos en escribir el resto de las capacidades de la API en este artículo, como actualizar, eliminar una nota de la tienda, actualizar, eliminar artículos, etc. En caso de que esté interesado, puede consultar esas funciones desde el repositorio de GitHub.

Sin embargo, después de crear el resto de la API, debería tener una estructura de directorios como esta:

Creamos con éxito un almacén de datos con Fauna, lo configuramos para su uso, creamos una API respaldada por funciones sin servidor, utilizamos funciones de Netlify y probamos esas funciones/rutas.

Felicitaciones, lo lograste. A continuación, creemos algunas interfaces de usuario para mostrar las notas de la tienda y agregarle artículos. Para hacer eso, usaremos Gatsby.js (también conocido como Gatsby), que es un generador de sitios estáticos basado en React genial.

La siguiente sección requiere que tengas conocimientos básicos de ReactJS. Si eres nuevo en esto, puedes aprenderlo desde aquí. Si está familiarizado con otras tecnologías de interfaz de usuario como Angular, Vue, etc., no dude en omitir la siguiente sección y crear la suya propia utilizando las API explicadas hasta ahora.

Configurar las interfaces de usuario usando Gatsby

Podemos configurar un proyecto Gatsby utilizando los proyectos iniciales o inicializándolo manualmente. Construiremos cosas desde cero para entenderlo mejor.

Instale gatsby-cli globalmente.

npm install -g gatsby-cli

Instalar gatsby, reaccionar y reaccionar-dom

yarn add gatsby react react-dom

Edite la sección de scripts del package.jsonarchivo para agregar un script para develop.

"scripts": {  "develop": "gatsby develop" }

Los proyectos Gatsby necesitan un archivo de configuración especial llamado gatsby-config.js. Cree un archivo llamado, gatsby-config.jsen la raíz de la carpeta del proyecto, con el siguiente contenido,

module.exports = {  // keep it empty    }

Creemos nuestra primera página con Gatsby. Cree una carpeta con el nombre srcen la raíz de la carpeta del proyecto. Cree una subcarpeta pagesdenominada src. Cree un archivo llamado, index.jsbajo src/pagescon el siguiente contenido:

import React, { useEffect, useState } from 'react';     export default () = {      const [loading, setLoading ] = useState(false);      const [shopnotes, setShopnotes] = useState(null);       return (              h1Shopnotes to load here.../h1    /          )    }

Ejecutémoslo. Generalmente necesitamos usar el comando gatsbydesarrollar para ejecutar la aplicación localmente. Como tenemos que ejecutar la aplicación del lado del cliente con funciones de netlify, continuaremos usando netlify devel comando.

netlify dev

Eso es todo. Intente acceder a la página en http://localhost:8888. Debería ver algo como esto,

La compilación del proyecto Gatsby crea un par de carpetas de salida que quizás no quieras enviar al repositorio de código fuente. Agreguemos algunas entradas al .gitignorearchivo para no recibir ruido no deseado.

Agregue .cachey node_modulesal publicarchivo .gitignore. Aquí está el contenido completo del archivo:

.cachepublicnode_modules*.env

En esta etapa, la estructura del directorio de su proyecto debe coincidir con lo siguiente:

Pensando en los componentes de la interfaz de usuario

Crearemos pequeños componentes lógicos para lograr la ShopNoteinterfaz de usuario. Los componentes son:

• Encabezado: un componente de encabezado consta del logotipo, el encabezado y el botón de creación para crear una nota de tienda.
• Notas de la tienda: este componente contendrá la lista de la nota de la tienda ( Notecomponente).
• Nota: Estas son notas individuales. Cada una de las notas contendrá uno o más elementos.
• Artículo: Cada uno de los artículos. Consiste en el nombre del elemento y las acciones para agregar, eliminar y editar un elemento.

Puedes ver las secciones marcadas en la siguiente imagen:

Instalar algunas dependencias más

Instalaremos algunas dependencias más necesarias para que las interfaces de usuario sean funcionales y se vean mejor. Abra un símbolo del sistema en la raíz de la carpeta del proyecto e instale estas dependencias,

yarn add bootstrap lodash moment react-bootstrap react-feather shortid

Carguemos todas las notas de la tienda.

Usaremos el useEffectgancho Reactjs para realizar la llamada a la API y actualizar las variables de estado de Shopnotes. Aquí está el código para recuperar todas las notas de la tienda.

useEffect(() = {  axios("/api/get-shopnotes").then(result = {    if (result.status !== 200) {      console.error("Error loading shopnotes");      console.error(result);      return;    }    setShopnotes(result.data.shopnotes);    setLoading(true);  });}, [loading]);

Finalmente, cambiemos la sección de devolución para utilizar los datos de las notas de la tienda. Aquí estamos comprobando si los datos están cargados. Si es así, renderice el Shopnotescomponente pasando los datos que hemos recibido mediante la API.

return (  div className="main"    Header /    {      loading ? Shopnotes data = { shopnotes } / : h1Loading.../h1    }  /div); 

Puede encontrar el código completo del archivo index.js desde aquí. El index.jsarchivo crea la ruta inicial ( /) para la interfaz de usuario. Utiliza otros componentes como, Shopnotesy Notepara Itemque la interfaz de usuario sea completamente operativa. No nos esforzaremos mucho en comprender cada uno de estos componentes de la interfaz de usuario. Puede crear una carpeta llamada componentes debajo de la srccarpeta y copiar los archivos de los componentes desde aquí.

Finalmente, el index.cssarchivo

Ahora sólo necesitamos un archivo css para que todo se vea mejor. Cree un archivo llamado index.cssen la pagescarpeta. Copie el contenido de este archivo CSS al index.cssarchivo.

import 'bootstrap/dist/css/bootstrap.min.css';import './index.css'

Eso es todo. Hemos terminado. Deberías tener la aplicación en funcionamiento con todas las notas de la tienda creadas hasta el momento. No entramos aquí en la explicación de cada una de las acciones sobre los ítems y notas para no hacer el artículo muy extenso. Puedes encontrar todo el código en el repositorio de GitHub. En esta etapa, la estructura del directorio puede verse así:

un pequeño ejercicio

No he incluido la implementación de la interfaz de usuario Crear nota en el repositorio de GitHib. Sin embargo, ya hemos creado la API. ¿Qué tal si construyes la interfaz para agregar una nota de compra? Sugiero implementar un botón en el encabezado, que al hacer clic crea una nota de compra usando la API que ya hemos definido. ¡Pruébalo!

Implementemos

Todo bien hasta ahora. Pero hay un problema. Estamos ejecutando la aplicación localmente. Si bien es productivo, no es ideal para que el público acceda a él. Arreglemos eso con unos simples pasos.

Asegúrese de enviar todos los cambios de código al repositorio de Git, por ejemplo, shopnote. Ya tienes una cuenta con Netlify. Inicie sesión y haga clic en el botón Nuevo sitio de Git.

A continuación, seleccione los servicios Git relevantes donde se envía el código fuente de su proyecto. En mi caso es GitHub.

Explore el proyecto y selecciónelo.

Proporcione los detalles de configuración, como el comando de compilación, publique el directorio como se muestra en la imagen a continuación. Luego haga clic en el botón para proporcionar información de configuración avanzada. En este caso, pasaremos el FAUNA_SERVER_SECRETpar clave-valor del archivo .env. Por favor copie y pegue en los campos respectivos. Haga clic en implementar.

Debería ver la construcción exitosa en un par de minutos y el sitio estará activo inmediatamente después de eso.

En resumen

Para resumir:

• Jamstack es una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado prediseñado.
• Del 70 % al 80 % de las funciones que antes requerían un back-end personalizado ahora se pueden realizar en el front-end o hay API y servicios que se pueden aprovechar.
• Fauna proporciona la API de datos para las aplicaciones cliente-servidor. Podemos usar GraphQL o FQL de Fauna para hablar con la tienda.
• Las funciones sin servidor de Netlify se pueden integrar fácilmente con Fauna mediante mutaciones y consultas GraphQL. Este enfoque puede resultar útil cuando necesita una autenticación personalizada creada con funciones de Netlify y una solución flexible como Auth0.
• Gatsby y otros generadores de sitios estáticos son grandes contribuyentes a Jamstack para brindar una experiencia rápida al usuario final.

¡Gracias por leer hasta aquí! Conectemos. Puedes @me en Twitter (@tapasadhikary) con comentarios, o no dudes en seguirme.