GoonIntroducción al Desarrollo de Aplicaciones de Pila Completa con Remix y Strapi
El desarrollo de aplicaciones de pila completa es un enfoque integral para la creación de aplicaciones web, cubriendo tanto los aspectos del front-end como del back-end. En este artículo, profundizaremos en un curso intensivo sobre desarrollo de aplicaciones de pila completa utilizando Remix y Strapi. Construiremos una aplicación simple que muestra una lista de artículos recuperados de un backend de Strapi y utilizaremos Remix para el front-end.
Resumen de Strapi y Remix
Strapi es un CMS sin cabeza que permite una gestión de contenido fácil, proporcionando una API RESTful o GraphQL. Por otro lado, Remix es un framework de React moderno que permite aplicaciones renderizadas en el servidor, optimizadas para el rendimiento y la experiencia del usuario.
Requisitos previos para el curso
Para seguir este curso, debes tener conocimientos básicos de JavaScript, React y Node.js. Además, asegúrate de tener instalado Node.js y npm en tu máquina.
Paso 1: Configuración de Strapi
Para configurar Strapi, primero debemos crear un nuevo proyecto de Strapi. Abre tu terminal y ejecuta el comando para crear un nuevo proyecto de Strapi llamado my-strapi-backend.
Configuración de Strapi a 0 segundos
A continuación, definimos un tipo de contenido. Abre el panel de administración de Strapi navegando a http://localhost:1337/admin y crea un nuevo tipo de colección llamado article con campos para título y contenido.
Definir un tipo de contenido a 26 segundos
Luego, agregamos algunos artículos yendo a la colección articles y creando algunos artículos de ejemplo.
Agregar artículos a 45 segundos
Para configurar permisos, ve a settings -> roles -> public y habilita los permisos find y findOne para article.
Configurar permisos a 78 segundos
Finalmente, recupera la URL de la API, que estará disponible en http://localhost:1337/api/articles.
Recuperar URL de la API a 124 segundos
Paso 2: Configuración de la Aplicación Remix
Para configurar la aplicación Remix, crea un nuevo proyecto de Remix en una nueva ventana de terminal y sigue las indicaciones para elegir tus preferencias.
Configuración de Remix a 156 segundos
A continuación, instala Axios para llamadas a la API navegando al directorio de tu proyecto de Remix y ejecutando el comando de instalación.
Paso 3: Recuperar Datos de Strapi en Remix
Para recuperar datos de Strapi en Remix, crea una ruta para artículos creando un nuevo archivo app/routes/articles.jsx.
Recuperar datos de Strapi a 206 segundos
En este código, recuperamos los artículos de Strapi y los mostramos en una lista. Finalmente, agrega un enlace a la página de artículos modificando app/routes/index.jsx.
Conclusión
En conclusión, ahora tienes una aplicación de pila completa simple utilizando Remix para el front-end y Strapi para el back-end. Puedes expandir esta aplicación agregando más funcionalidades como crear, actualizar y eliminar artículos, así como implementar autenticación de usuarios. También puedes personalizar el estilo utilizando frameworks de CSS como Tailwind CSS o Bootstrap. No dudes en preguntar si necesitas más detalles sobre alguna parte específica del proceso.