Versión en EspañolES

Curso Intensivo de Remix y Storyblok

Facundo Giuliani

Facundo works as a DevRel Engineer at Storyblok

Arisa Fukuzaki

Please sign in to watch this workshop.

Bookmark

Github

Tal vez ya hayas leído sobre Remix. Probablemente ya lo hayas usado, y recientemente hayas escuchado mucho sobre los CMS sin cabeza. En este curso rápido, pondremos todas las piezas juntas y te mostraré por qué Storyblok en combinación con Remix es la mejor opción para tu próximo proyecto. ¡Pasa y pruébalo tú mismo!

Tabla de contenido:

- Introducción a Remix, diseño atómico y el mundo sin cabeza

- Configuración del entorno

- Creación de páginas y comprensión de cómo funcionan las rutas dinámicas con splat routes

- Consejos futuros y preguntas frecuentes

Prerrequisitos: Node.js instalado, cuenta de GitHub.

This workshop has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.

FAQ

Storyblock es un sistema de gestión de contenido sin cabeza que permite a los desarrolladores integrar contenido en diversos proyectos y plataformas. Se utiliza para facilitar la gestión y entrega de contenido digital sin estar ligado a una tecnología o estructura de presentación específica.

Remix es un marco de trabajo basado en React que permite desarrollar aplicaciones web de forma rápida y eficiente. Es una pila completa que facilita la creación de interfaces de usuario y maneja tanto el frontend como el backend, optimizando la experiencia de desarrollo y del usuario.

Para integrar Storyblock con Remix, es necesario utilizar SDKs específicos como Storyblock React y configurar el proyecto para que se comunique con la API de Storyblock. Esto implica inicializar Storyblock en el proyecto, configurar el acceso a la API y crear componentes dinámicos que rendericen el contenido gestionado en Storyblock.

El CMS sin cabeza de Storyblock ofrece flexibilidad para desarrollar aplicaciones usando cualquier tecnología de front-end, independencia del back-end para presentar contenido y la capacidad de entregar contenido a múltiples plataformas y dispositivos, mejorando la experiencia omnicanal.

El diseño atómico es una metodología que permite construir interfaces de usuario a partir de componentes básicos (átomos) que se combinan para formar estructuras más complejas. En Storyblock, se utiliza para estructurar y reutilizar componentes de contenido, facilitando la gestión y escalabilidad del diseño de proyectos.

headless cms

Facundo Giuliani

Arisa Fukuzaki

162 min

15 Nov, 2022

Comments

Available in other languages:

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, ¿qué más?

React Advanced 2023

102 min

Fetch, useEffect, React Query, SWR, ¿qué más?

Top Content

Workshop

Ondrej Polesny

En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras

react query headless cms react query vs useeffect react swr react useeffect swr vs react query

Curso intensivo sobre Astro y Storyblok

React Day Berlin 2023

119 min

Curso intensivo sobre Astro y Storyblok

Workshop

Arisa Fukuzaki

La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza

astro headless cms

Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io

React Summit 2023

71 min

Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io

Workshop

2 authors

Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.

next.js headless cms sanity react

Curso Intensivo de Astro, Kontent.ai y Portable Text

React Summit 2023

91 min

Curso Intensivo de Astro, Kontent.ai y Portable Text

Workshop

Ondrej Polesny

En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.
Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.

astro portable text react headless cms

Localizando tu sitio web de Remix

React Summit 2023

154 min

Localizando tu sitio web de Remix

Workshop

Harshil Agrawal

El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.
Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos

web development headless cms remix internationalization

Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh

Node Congress 2022

134 min

Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh

Workshop

2 authors

Node.js se ha convertido en un lenguaje cada vez más popular para construir y desplegar APIs backend. En un mundo de CMSs heredados que adoptan implementaciones desacopladas, han surgido muchos frameworks que se autodenominan CMS "headless", diseñados desde el principio para proporcionar una forma fácil de personalizar modelos de contenido, administrar permisos y autenticación, y servir rápidamente una API de contenido.
Strapi, uno de los líderes en este espacio, ha lanzado recientemente su versión 4 del framework, y con Platform.sh se puede desplegar junto con varios frontends dentro del mismo proyecto, lo que brinda una experiencia de desarrollo drásticamente simplificada al trabajar con sitios desacoplados. En este masterclass, desplegaremos una aplicación de demostración de Strapi, que ha sido configurada para servir un sitio de reseñas de restaurantes.
Paso a paso, agregarás servicios de base de datos, pruebas y frontends, todo dentro de entornos de desarrollo aislados. Al final, cada usuario tendrá un sitio desacoplado funcional y una mayor comprensión de cómo trabajar con sitios desacoplados en producción.

web development node.js headless cms headless case study

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Cómo manejar correctamente los cambios de URL slug en Next.js

TypeScript Congress 2022

10 min

Cómo manejar correctamente los cambios de URL slug en Next.js

Top Content

Ondrej Polesny

Developer Evangelist @ Kontent.ai

This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.

next.js typescript headless cms slugify react

Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web

React Summit 2022

21 min

Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web

Jeff Everhart

Senior Developer Advocate @ WP Engine

In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.

wordpress headless cms remix

Desafíos en proyectos a gran escala (NextJS - Contentful)

React Summit 2022

20 min

Desafíos en proyectos a gran escala (NextJS - Contentful)

Leonidas Mamais

Front-end chapter lead @ Vodafone

This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.

next.js headless cms enterprise case study

Explorando el Gráfico de WordPress con Next.js y WPGraphQL

GraphQL Galaxy 2021

23 min

Explorando el Gráfico de WordPress con Next.js y WPGraphQL

Colby Fayock

Helping others learn about Javascript, React, and the static web.

WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.

graphql wordpress headless cms headless