Tu aplicación necesita la navegación y el pie de página del sitio. No deberías tener que copiarlos al código y mantenerlos sincronizados manualmente.
Tus componentes de Webflow pueden integrarse en tu código como componentes de React y, si quieres, Webflow también puede alojar las aplicaciones personalizadas que crees con ellos. Incluso puedes enviar tus propios componentes de código en la dirección opuesta hacia tus sitios de Webflow.
Si esto te pilla de nuevas, en este post repasamos los tres puntos. Exportaremos la navegación y el pie de página de un sitio de Webflow a una aplicación de Astro, y los usaremos para crear un pequeño libro de visitas que guarde las entradas en SQLite. Después, desplegaremos la aplicación en Webflow Cloud para que viva en el sitio original bajo la ruta /guestbook. Por último, enviaremos un componente de React en sentido contrario: un botón que permita a los visitantes firmar el libro de visitas desde cualquier página.
Cada paso se ejecuta a través de la CLI de Webflow: webflow devlink export, webflow apps deploy y webflow devlink import.
Si prefieres ver antes que leer, aquí tienes esta publicación en formato de video.
Por dónde empezamos
Este sitio de Webflow es sencillo. Tiene una lista de artículos, una navegación y un pie de página. La navegación y el pie de página están configurados como componentes de Webflow, porque DevLink solo exporta componentes definidos. No puede exportar elementos sueltos de una página.
El libro de visitas que debería integrarse en este sitio de Webflow es una pequeña aplicación de Astro. Escribes un nombre y un mensaje, pulsas el botón y tu entrada aparece en la lista de abajo. Se renderiza en el servidor, no hay JavaScript del lado del cliente para el libro de visitas en sí y no tiene ningún estilo. No es bonito, pero funciona.
Las entradas del libro de visitas van a una base de datos SQLite local. Por suerte, Webflow Cloud también proporciona una. Por eso la aplicación la declara en su wrangler.json. No hay nada que configurar manualmente y Webflow Cloud crea la base de datos automáticamente en el primer despliegue. Si quieres conocer los detalles, la documentación de SQLite para Webflow Cloud cubre el enlace, el desarrollo local y las migraciones.
Así que, ahora mismo tenemos un sitio de Webflow sin libro de visitas y un libro de visitas sin sitio de Webflow. Vamos a unirlos.
Configuración
Si aún no tienes la CLI de Webflow, instálala y autentícate.
npm install -g @webflow/webflow-cli
webflow auth loginEl inicio de sesión abre el navegador una sola vez. A partir de ahí, puedes gestionar tus espacios de trabajo y sitios de Webflow desde la línea de comandos, y extraer componentes de un sitio a tu código es tan sencillo como ejecutar una línea.
Exporta componentes existentes de Webflow
El comando de exportación de devlink descarga los componentes y estilos globales del sitio a la aplicación:
webflow devlink export
Al ejecutarlo por primera vez, la CLI te preguntará desde qué sitio quieres exportar, dónde deben guardarse los componentes y si prefieres aislar los estilos para que el CSS de Webflow no se pelee con el resto de la página. Tus respuestas se guardarán en un nuevo webflow.json, junto con el ID del sitio.
{
"region": "us",
"siteId": "<YOUR_SITE_ID>",
"devlink-export": {
"rootDir": "./webflow",
"components": ".*",
"componentGroups": ".*",
"ts": true,
"cssScopes": true,
"relativeHrefRoot": "/"
}
}Si echas un vistazo al nuevo directorio webflow/, descubrirás componentes de React exportados como Navigation.tsx, los estilos del sitio agrupados en css/global.css y algunos archivos auxiliares más.
Una vez que exportes tus componentes de Webflow, hay una regla de oro: no edites los archivos exportados; cada exportación posterior sobrescribirá tus cambios. Debes tratar tu sitio de Webflow como la fuente de verdad.
Cómo aplicar tus estilos de Webflow existentes
Si exportaste los componentes con el aislamiento de estilos activado, debes preparar tu aplicación para aplicar los estilos de Webflow. Para evitar conflictos, las reglas en los archivos CSS exportados se encuentran dentro de una regla @scope (.wf-devlink-<hash>) at-rule. @scope se encargará de que tus estilos de Webflow solo se apliquen dentro del elemento que contenga esa clase.
@scope (.wf-devlink-6810416396b7772dcea519aa818e38ce) {
/* ... */
}¿Pero de dónde sacas esta clase?
La exportación de DevLink también incluye un pequeño archivo devlinkScope.ts que exporta exactamente esta clase como una cadena de texto. Importa el CSS global y la clase de ámbito en tu aplicación y añádela a la etiqueta <body>:
---
import "../../webflow/css/global.css";
import { DEVLINK_SCOPE_CLASS } from "../../webflow/devlinkScope";
---
<body class={DEVLINK_SCOPE_CLASS}>
<slot />
</body>Eso es prácticamente todo. Ahora, los estilos base de Webflow y todas las clases existentes se aplican a la aplicación. Y si añades la clase de ámbito de DevLink al body, los estilos de Webflow se aplicarán a toda la página.
Si ahora construyes el HTML en tu aplicación, puedes usar las mismas clases que cualquier componente en Webflow para conseguir el mismo aspecto y estilo.
<div class="container">
<input class="w-input text-field" name="name" />
<textarea class="w-input text-field" name="message"></textarea>
<button class="w-button submit-button">Sign the guestbook</button>
</div>En el caso del libro de visitas, w-input y w-button son clases integradas de Webflow. Se aplican automáticamente a los campos de formulario y a los botones. text-field y submit-button son clases personalizadas definidas en el sitio de Webflow. Al combinarlas, el HTML básico adquiere el aspecto del sitio sobre los valores predeterminados de Webflow, tal como sucede en el lienzo. No hace falta usar CSS personalizado.
Envuelve la página con los componentes del sitio de Webflow
Así que, en este punto, la página de Astro que incluía el formulario del libro de visitas ya tiene el estilo de la marca, pero sigue estando en el aire. Astro renderiza componentes de React, por lo que la navegación y el pie de página exportados pueden integrarse en el diseño como cualquier otro componente:
---
import "../../webflow/css/global.css";
import { DEVLINK_SCOPE_CLASS } from "../../webflow/devlinkScope";
import { Footer } from "../../webflow/Footer";
import { Navigation } from "../../webflow/Navigation";
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
</head>
<body class={DEVLINK_SCOPE_CLASS}>
<Navigation client:load />
<slot />
<Footer />
</body>
</html>La navegación lleva client:load porque su menú móvil cambia de estado en React. El pie de página no tiene elementos interactivos, así que se renderiza como HTML estático.
Y listo. La navegación y el pie de página del sitio envuelven el libro de visitas con las fuentes y estilos del sitio. Cuando estos componentes cambian en Webflow, al volver a ejecutar la exportación se incorporan las modificaciones.
¡Genial! Pero, ¿cómo hacemos para que este libro de visitas que tienes en localhost funcione en tu sitio de Webflow?
Desplegar en Webflow Cloud
Webflow Cloud es compatible con Astro, Next.js, Vite y aplicaciones estáticas. Integra tu proyecto en tus sitios de Webflow con un solo comando.
webflow apps deploy \
--site-id <YOUR_SITE_ID> \
--app-name guestbook \
--mount /guestbook \
--environment mainEl comando webflow apps deploy crea la aplicación en Webflow, lee wrangler.json y genera la base de datos SQLite especificada. En el ejemplo anterior, el comando define un ID de sitio, el nombre de la aplicación, la ruta de montaje dentro del sitio de Webflow y el entorno. Es pan comido.
Una vez finalizado el despliegue, la CLI escribe el ID de la aplicación en webflow.json, de modo que el siguiente despliegue actualice esta aplicación en lugar de crear una nueva.
Para acceder a la configuración y los ajustes de una aplicación vinculada a un sitio, ve a la configuración de tu sitio en Webflow Cloud. Allí podrás revisar los despliegues y, en la pestaña de almacenamiento (Storage) del entorno, verás las entradas de la base de datos.
Siguiendo la ruta de montaje, la aplicación se encuentra en la URL del sitio /guestbook, y como utiliza componentes existentes de Webflow, luce igual que cualquier otra página del sitio.
Además, es totalmente funcional. Las notas creadas en el libro de visitas ahora se guardan en la base de datos en la nube.
Una vez que integras una aplicación en tu sitio de Webflow, debes decidir cuándo y con qué frecuencia importar nuevos componentes. Si ajustas la navegación o cualquier otro componente compartido, la aplicación debe exportar los componentes para recibir las actualizaciones y volver a implementarse.
Tú decides si prefieres hacerlo manualmente o configurarlo mediante una automatización.
Importa componentes de código personalizado a tu sitio de Webflow
Hasta ahora, los componentes iban en una sola dirección: de Webflow a la aplicación que reside en /guestbook. ¿Qué pasa si quieres un componente de tu aplicación en cualquier página de tu sitio?
Por ejemplo, si quieres una forma de firmar el libro de visitas desde cualquier otra página de Webflow, también puedes importar componentes de React usando el comando de importación de webflow devlink.
Eso es en la dirección opuesta. devlink export lleva componentes a tu base de código. devlink import toma componentes de React de tu base de código y los convierte en componentes que puedes usar en el lienzo.
Para el libro de visitas, el componente es GuestbookBubble. Se trata de un botón que despliega un pequeño formulario en una ventana emergente. Al enviarlo, el formulario realiza una petición POST a /guestbook, la misma ruta que gestiona las entradas en la propia página de la aplicación del libro de visitas.
El componente de React acepta una acción, una etiqueta de burbuja y un encabezado, y utiliza las clases exportadas de Webflow para mantener la identidad de marca.
// src/components/GuestbookBubble.tsx
import "../../webflow/css/global.css";
import { DEVLINK_SCOPE_CLASS } from "../../webflow/devlinkScope";
export default function GuestbookBubble({
action = "/guestbook",
bubbleLabel = "Leave a note",
heading = "Sign the guestbook",
}: Props) {
// …
}Para importar este componente a un sitio de Webflow, debes convertirlo en un componente de código. Un componente de código es un componente de React junto con un archivo de definición .webflow.tsx.
GuestbookBubble.webflow.tsx envuelve el componente exportado desde GuestbookBubble.tsx y le indica a Webflow qué propiedades deben aparecer en el panel de configuración:
// src/components/GuestbookBubble.webflow.tsx
import { props } from "@webflow/data-types";
import { declareComponent } from "@webflow/react";
import GuestbookBubble from "./GuestbookBubble";
export default declareComponent(GuestbookBubble, {
name: "Guestbook bubble",
description: "A bubble that opens a form and posts the entry to the guestbook",
group: "Guestbook",
props: {
bubbleLabel: props.Text({
name: "Bubble label",
defaultValue: "Leave a note",
}),
heading: props.Text({
name: "Heading",
defaultValue: "Sign the guestbook",
}),
action: props.Text({
name: "Form action",
defaultValue: "/guestbook",
tooltip: "Where the form posts to.",
}),
},
});Y luego, la CLI se encarga del resto:
webflow devlink importLa primera ejecución de devlink import es interactiva y te pedirá el nombre de la biblioteca, una descripción y si confías en este código. También escribe el ID de la biblioteca en webflow.json, que se ejecutará más adelante según sea necesario.
Y así de fácil, los componentes definidos en tu aplicación pueden convertirse en componentes de código dentro de una biblioteca en tu espacio de trabajo de Webflow.
Una vez que arrastras el componente de código a la página, el panel de Propiedades muestra los parámetros que definiste en el código. Haz los ajustes necesarios, retoca lo que haga falta y ¡listo!
Como resultado final, este pequeño componente de React renderiza un botón que abre el popover. Ahora, cualquiera puede dejar notas desde donde quiera. Todas las entradas aparecen en /guestbook y se guardan en la base de datos de la aplicación en la nube desplegada.
Todo vive dentro de tu sitio de Webflow. ¡Es una pasada!
La visión general
¡Y eso es todo! Si quieres conectar tu sitio de Webflow con una aplicación personalizada o compartir componentes, ¡la CLI de Webflow tiene tres comandos listos para ti!
webflow devlink export integra componentes en tu base de código, webflow apps deploy despliega aplicaciones en tus sitios de Webflow (también puedes crear apps independientes), y webflow devlink import envía componentes de código personalizado de vuelta a tu sitio de Webflow.
¡Manos a la obra!
Toma esa aplicación que tienes por ahí y dale un hogar en tu sitio de Webflow.
Comparte lo que has creado y, ¡a disfrutar!
