Versión en EspañolES

Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

Alexandra Spalato

Storyblok

Please sign in to watch this workshop.

Bookmark

I. Introducción

- Visión general de Shopify Hydrogen y Remix

- Importancia del comercio electrónico sin cabeza y su impacto en la industria

II. Configurando Shopify Hydrogen

- Instalando y configurando Hydrogen con Remix

- Configurando la estructura del proyecto y los componentes

III. Creando Colecciones y Productos

- Creando colecciones y productos utilizando los componentes React de Hydrogen

- Implementando un Carrito de Compras

- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen

VI. Construyendo la página de inicio con Storyblok

- Clonando el espacio y explicando cómo funciona

- Implementando Storyblok en el repositorio

- Creando los componentes Blok

- Creando los componentes Shopify

- Implementando personalización

This workshop has been presented at React Advanced 2023, check out the latest edition of this React Conference.

FAQ

Hydrogen es un marco desarrollado por Shopify que está construido sobre Remix, integrando paquetes adicionales y una integración profunda con las APIs de Shopify para facilitar la creación de comercios electrónicos.

Remix facilita el desarrollo web al basarse en los estándares web y simplificar la creación de aplicaciones web con funcionalidades completas, permitiendo una mejor experiencia de usuario y un desarrollo más sencillo.

Storyblok, un sistema de gestión de contenido (CMS) headless, se integra con Hydrogen para permitir una gestión visual del contenido que se muestra en las páginas web, mejorando la capacidad para gestionar dinámicamente el contenido en comercios electrónicos.

La plantilla Hello World en Hydrogen es un punto de partida básico para proyectos que utilizan este marco, incluyendo configuraciones mínimas y ejemplos de cómo estructurar y desplegar una aplicación.

Se puede personalizar el contenido utilizando técnicas como almacenar información sobre las preferencias del usuario en cookies y luego usar esa información para mostrar contenido dinámico relevante, como banners o productos específicos, basados en el historial de navegación del usuario.

Para comenzar con Hydrogen, se debe clonar un repositorio inicial, instalar las dependencias necesarias con npm install, configurar variables de entorno con un archivo .env que incluya tokens de acceso a Shopify, y luego ejecutar el proyecto localmente.

e-commerce remix

Alexandra Spalato

104 min

17 Oct, 2023

Comments

Available in other languages:

Watch more workshops on topic

Fundamentos de Remix

React Summit 2022

136 min

Fundamentos de Remix

Top Content

Workshop

Kent C. Dodds

Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones

web development remix

Construyendo una Aplicación de Shopify con React & Node

React Summit Remote Edition 2021

87 min

Construyendo una Aplicación de Shopify con React & Node

Top Content

Workshop

2 authors

Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.

shopify with react e-commerce shopify case study

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

React Summit 2023

139 min

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

Top Content

Workshop

Matteo Frana

- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

next.js e-commerce react bricks react state management

De vuelta a las raíces con Remix

React Summit 2023

106 min

De vuelta a las raíces con Remix

Workshop

2 authors

La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)

web development remix frameworks

Cómo Resolver Problemas del Mundo Real con Remix

Remix Conf Europe 2022

195 min

Cómo Resolver Problemas del Mundo Real con Remix

Workshop

Michael Carter

- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás

remix database validation error monitoring

Construyendo una aplicación en tiempo real con Remix y Supabase

Remix Conf Europe 2022

156 min

Construyendo una aplicación en tiempo real con Remix y Supabase

Workshop

Jon Meyers

Supabase y Remix hacen que sea fácil construir aplicaciones fullstack. En este masterclass, vamos a aprender cómo usar Supabase para implementar autenticación y autorización en una aplicación en tiempo real con Remix. Únete a Jon Meyers mientras construye esta aplicación desde cero y demuestra cómo puedes aprovechar el poder de las bases de datos relacionales!

remix authentication database

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

Construyendo Mejores Sitios Web con Remix

React Summit Remote Edition 2021

33 min

Construyendo Mejores Sitios Web con Remix

Top Content

Michael Jackson

React Training

Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.

react remix frameworks

Escalando con Remix y Micro Frontends

Remix Conf Europe 2022

23 min

Escalando con Remix y Micro Frontends

Top Content

Adrien Baron

Creator of Tiny Frontend

This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.

javascript remix micro-frontends architecture

No resuelvas problemas, elimínalos

React Advanced 2021

39 min

No resuelvas problemas, elimínalos

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.

web development remix best practices

Componentes de Full Stack

Remix Conf Europe 2022

37 min

Componentes de Full Stack

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

javascript remix architecture fullstack

Remix Flat Routes – Una Evolución en el Enrutamiento

Remix Conf Europe 2022

16 min

Remix Flat Routes – Una Evolución en el Enrutamiento

Top Content

Michael Carter

Apptimum Technologies

Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.

developer experience remix

Cómo React Router se convirtió en un Framework

React Advanced 2024

31 min

Cómo React Router se convirtió en un Framework

Mark Dalgleish

Shopify

My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.

remix frameworks