Remix Flat Routes: Una Evolución en el Enrutamiento

Rate this content
Bookmark

Esta charla presenta la nueva convención de Flat Routes que probablemente será la predeterminada en una versión futura de Remix. Simplifica la convención existente y te brinda nuevas capacidades.

16 min
18 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Remix Flat Routes es una nueva convención que tiene como objetivo facilitar la visualización y organización de las rutas en tu aplicación. Permite la co-ubicación de archivos de soporte con las rutas, reduce la fricción al refactorizar y rediseñar, y ayuda a las aplicaciones a migrar a Remix. La convención de Carpetas Planas admite la co-ubicación y permite importar activos como importaciones relativas. Para migrar aplicaciones existentes a Flat Routes, utiliza la herramienta de migración del paquete Remix Flat Routes.

Available in English

1. Introducción a Remix Flat Routes

Short description:

Hola, soy Michael Porter. Hablaré en RemixConf Europe sobre Remix Flat Routes y la Evolución en el Enrutamiento. Comenzaré con una breve introducción a la convención de enrutamiento actual. Remix utiliza carpetas para determinar el diseño principal, mientras que Next.js requiere una carpeta para cada segmento de la ruta. Next.js también utiliza archivos separados para las exportaciones con nombre, lo que resulta en una gran cantidad de archivos. Sin embargo, Next.js permite la co-ubicación de archivos de soporte en la carpeta de la ruta.

Me conocen en línea como Killamon, que es una abreviatura de Killamonjaro. Soy un gran fanático de los volcanes desde hace mucho tiempo. Estoy emocionado de hablarles hoy en RemixConf Europe. Mi presentación tratará sobre Remix Flat Routes y la Evolución en el Enrutamiento.

Primero, comenzaré dando una breve introducción a la convención de enrutamiento actual tal como la conocemos hoy. Aquí hay una estructura de enrutamiento típica. Consiste en un diseño sin ruta para páginas públicas, como la página Acerca de, una sección de usuario con su propio diseño que tiene una vista de lista, una vista de detalle de usuario, así como una página de edición. Remix utiliza carpetas para determinar el diseño principal. Se espera que el diseño principal incluya un punto de salida para renderizar a sus hijos. En este ejemplo, no hay una carpeta de ID de usuario porque queremos que la página de edición utilice el mismo diseño de usuario que las otras rutas. Dado que la página de edición no está anidada, utilizamos el punto para el diseño plano en lugar del diseño anidado. Cuando creas un diseño anidado, Remix te exige crear una carpeta para sus hijos, además de un archivo para el propio diseño. Desafortunadamente, una de las desventajas de esta convención es que la carpeta en un archivo de diseño termina separada en tu editor, ya que las carpetas suelen mostrarse primero. Esto puede ser molesto, especialmente en aplicaciones grandes con muchas rutas.

Como saben, Next.js recientemente introdujo su propia versión de diseños anidados. Comparemos su convención con la de Remix. Aquí está la misma estructura de enrutamiento que el ejemplo anterior. Next.js utiliza paréntesis para diseños sin ruta, similar al prefijo de doble guion bajo de Remix. Lo que notarán es que Next.js requiere una carpeta para cada segmento de la ruta. La ruta final es un archivo llamado página. Si un segmento de ruta agrega un diseño, se crea un archivo de diseño. Con Next.js, los diseños y las páginas son cosas separadas, mientras que Remix no los diferencia. Nuevamente, mirando nuestra ruta de edición de usuario, Next.js busca el diseño más cercano, que es usuario/barra de diseño. Otra diferencia importante con Remix es que Remix utiliza exportaciones con nombre para cosas como meta, enlaces, encabezados, límites de error, etcétera. Y Next.js utiliza archivos separados para cada uno. Esto puede resultar en una gran cantidad de archivos, dependiendo de las necesidades de su aplicación. Esto llevó a una persona en Twitter a publicar esta captura de pantalla. Es cierto que este es un ejemplo extremo. Uno de los beneficios de una carpeta para cada ruta, sin embargo, es que Next.js te permite co-ubicar archivos de soporte en la carpeta de la ruta.

2. Introducción a Remix FlatRoutes

Short description:

Remix FlatRoutes es una nueva convención que tiene como objetivo facilitar la visualización y organización de las rutas en tu aplicación. Permite la co-ubicación de archivos de soporte con las rutas, reduce la fricción al refactorizar y rediseñar, y ayuda a las aplicaciones a migrar a Remix. FlatRoutes fueron introducidos por primera vez por Brian Florence y desde entonces se han implementado como un paquete separado. Para agregarlo a tu aplicación, simplemente ejecuta npm install dash d RemixFlatRoutes.

Cosas como CSS, componentes, imágenes, etcétera. Esto es una de las principales cosas que los desarrolladores de Remix han estado solicitando. Discutiremos cómo Remix FlatRoutes admite esto en breve.

Ahora que hemos aclarado eso, hablemos sobre la nueva convención de Remix FlatRoutes. Actualmente es un paquete MPM separado, pero se incluirá en una versión futura de Remix como funcionalidad principal.

Entonces, ¿cuáles son los objetivos de Remix FlatRoutes? Facilitar la visualización de las rutas diseñadas para tu aplicación. Solo abre la carpeta de Rutas y ahí están todas. Dado que el sistema de archivos suele ordenar las carpetas primero, cuando tienes docenas de rutas, hoy en día es difícil ver qué carpetas tienen diseños y cuáles no. Ahora todas las rutas relacionadas se ordenan juntas. Permitir la co-ubicación de archivos de soporte con las rutas. Verás cómo puedes mantener tus estilos, componentes y otros archivos de soporte junto con tus rutas. Reducir la fricción al refactorizar y rediseñar. Si bien los editores de código son bastante buenos para arreglar las importaciones cuando mueves archivos, y Remix tiene el alias de importación de tilde, en general es más fácil refactorizar una base de código que no tiene un montón de carpetas anidadas. Remix ya no requerirá esto. Además, al rediseñar la interfaz de usuario, es más sencillo ajustar los nombres de los archivos en lugar de crear y eliminar carpetas y mover las rutas para cambiar la forma en que se anidan. Y finalmente, ayudar a las aplicaciones a migrar a Remix. Las aplicaciones existentes generalmente no tienen una estructura de carpetas anidadas como las convenciones actuales. Moverse a Remix es arduo porque tienes que lidiar con todas las importaciones. Además, como vimos con las nuevas rutas anidadas de Next, FlatRoutes facilita la migración desde otros frameworks a Remix.

Remix FlatRoutes se presentó por primera vez como un gist por Brian Florence el 7 de abril de este año. Publicó el enlace en el foro de Remix y yo tuve la suerte de verlo. Me intrigó porque yo también estaba buscando simplificar mi estructura de enrutamiento. Menos de dos semanas después, hice el primer commit implementando la especificación de FlatRoutes. La parte más complicada fue tratar de determinar el diseño principal cuando no había carpetas, simplemente un nombre de archivo separado por puntos. Discutiremos cómo se implementó eso en un momento. Un dato interesante es que no fue hasta un mes después que Next.js publicó el primer RFC de diseños, describiendo su nueva convención de rutas anidadas, que ahora está disponible como una función experimental en Next.js 13. Como mencioné antes, Remix FlatRoutes se implementa actualmente como un paquete separado. Para agregarlo a tu aplicación, simplemente ejecuta npm install dash d RemixFlatRoutes. Dado que las rutas se determinan en tiempo de compilación, esta es una dependencia de desarrollo y no es necesaria en tiempo de ejecución.

3. Customizando las Rutas de Remix

Short description:

Una de las cosas sobre Remix es que, aunque tiene su propia opinión, tiene algunas salidas de emergencia que te permiten agregar tus propias personalizaciones. En este caso, se trata de la configuración de las rutas donde puedes agregar tus propias rutas además de la convención predeterminada. RemixFlatRoutes cambia algunas de las convenciones de nomenclatura de archivos a las que estamos acostumbrados. Por ejemplo, para diseños sin ruta, usa un guion bajo simple en lugar de un guion bajo doble como prefijo. En lugar de usar carpetas para las rutas, el nombre de archivo incluye toda la ruta, por lo que usa el punto en lugar de la barra diagonal para separar los segmentos de URL. Remix FlatRoute admite dos configuraciones, archivos planos y carpetas planas. Los archivos planos se utilizarán típicamente para aplicaciones más simples, ya que todo está en el nombre de archivo y no hay carpetas. Aunque Flat File simplifica considerablemente la convención de enrutamiento, lo hace con algunas desventajas. No hay carpetas.

tiene algunas salidas de emergencia que te permiten agregar tus propias personalizaciones. En este caso, se trata de la configuración de las rutas donde puedes agregar tus propias rutas además de la convención predeterminada.

Dado que Remix asume que los archivos en la carpeta de rutas utilizan la convención predeterminada, deberás indicarle a Remix que ignore todos los archivos en la carpeta de rutas. Finalmente, llama a la función FlatRoutes para escanear la carpeta utilizando la nueva convención de FlatRoutes. En el futuro, podrás especificar qué convención deseas utilizar directamente a través del archivo de configuración de Remix.

RemixFlatRoutes cambia algunas de las convenciones de nomenclatura de archivos a las que estamos acostumbrados. Por ejemplo, para diseños sin ruta, usa un guion bajo simple en lugar de un guion bajo doble como prefijo. El prefijo de parámetros sigue siendo el mismo, el signo de dólar, pero te mostraré cómo podemos cambiar eso más adelante. En lugar de usar carpetas para las rutas, el nombre de archivo incluye toda la ruta, por lo que usa el punto en lugar de la barra diagonal para separar los segmentos de URL. Y finalmente, para manejar escenarios como nuestra ruta de edición de usuario, el sufijo de guion bajo especifica que el segmento no es un diseño porque no tiene un punto de salida. Lo demostraré más adelante.

Remix FlatRoute admite dos configuraciones, archivos planos y carpetas planas. Los archivos planos se utilizarán típicamente para aplicaciones más simples, ya que todo está en el nombre de archivo y no hay carpetas. Aquí tienes el mismo ejemplo que usamos antes, pero utilizando la convención de archivos planos. Observa que no hay carpetas. La estructura completa de la URL es visible de un vistazo sin tener que profundizar en carpetas separadas. Aún tenemos que identificar la ruta de índice, en este caso, usuarios barra índice. Observa cómo nombramos el archivo usuarios punto índice. El guion bajo inicial aquí es simplemente para ordenar la ruta de índice antes que las otras rutas secundarias.

Como mencioné, estamos usando puntos en lugar de carpetas para separar las rutas. Pero sin carpetas, ¿cómo sabe Remix cuál es el diseño principal? Para determinar el diseño principal, Remix Flat Routes encuentra el prefijo coincidente más largo, y eso determina el diseño principal. Aquí vemos que el prefijo público de público punto acerca coincide con el diseño público TSX. Lo mismo ocurre con usuarios. ¿Recuerdas en el ejemplo anterior, donde no queríamos que la ruta de edición se anidara bajo el ID de usuario? Allí, usamos puntos en el nombre de archivo para solucionarlo. Pero, ¿cómo lo solucionas cuando todo usa puntos? Remix Flat Route te permite usar un guion bajo al final de una ruta principal para especificar que esto no es un diseño. Como puedes ver en la ruta de edición, el ID de usuario no debe tratarse como un diseño, de ahí el guion bajo. Esto asegura que el prefijo usuarios ID de usuario no coincida con esa ruta. Y luego Remix buscará el siguiente segmento para encontrar un diseño coincidente, que es el diseño de usuarios.

Aunque Flat File simplifica considerablemente la convención de enrutamiento, lo hace con algunas desventajas.

4. Convención de Carpetas Planas y Co-ubicación

Short description:

No podemos co-ubicar archivos de soporte con nuestras rutas. Las carpetas planas se ven igual que los archivos planos. La diferencia principal es que en lugar de que el enrutamiento sea un simple nombre de archivo, la carpeta en sí es el nombre de la ruta. Remix no diferencia entre rutas y diseños. Remix admite múltiples alias para el archivo de ruta. Uno de los principales beneficios de la convención de carpetas planas es admitir la co-ubicación. Ahora, tu archivo de ruta te permitirá importar estos activos como una importación relativa. He estado experimentando dividiendo mi archivo de ruta en un archivo de ruta y un archivo de servidor de ruta.

No hay carpetas. No podemos co-ubicar archivos de soporte con nuestras rutas. Incluso si agregáramos reglas para ignorar estos otros archivos, requeriría que los importes con la ruta completa, lo que no simplificaría las cosas. Las carpetas planas se ven igual que los archivos planos. La diferencia principal es que en lugar de que el enrutamiento sea un simple nombre de archivo, la carpeta en sí es el nombre de la ruta. El archivo de ruta, index.tsx, se encuentra dentro de la carpeta. Esto es similar al archivo de página de Next.js.

Remix no diferencia entre rutas y diseños. Nuevamente, los diseños son simplemente rutas con puntos de venta. Entonces, index.tsx o layout.tsx significan lo mismo. Son simplemente alias y se utilizan principalmente para ser más descriptivos al mirar tus rutas. Remix admite múltiples alias para el archivo de ruta. Puedes usar index, route, layout o page, así como agregar el prefijo de guion bajo. Esto ayuda a ordenar los archivos de ruta y diseño en la parte superior de la lista de archivos al co-ubicar archivos.

Como mencionamos antes, uno de los principales beneficios de la convención de carpetas planas es admitir la co-ubicación. Aquí estamos co-ubicando archivos de soporte como CSS, componentes, archivos de servidor, imágenes, etc. Ahora, tu archivo de ruta te permitirá importar estos activos como una importación relativa. He estado experimentando dividiendo mi archivo de ruta en un archivo de ruta y un archivo de servidor de ruta. La razón principal es que uso Zod para validación, y el paquete es un poco pesado. Al definir y usar el esquema de Zod solo en el archivo de servidor, garantizo que Zod no se incluya en el paquete del cliente.

5. Migración de Aplicaciones Existentes a Rutas Planas

Short description:

Para migrar tu aplicación existente a Rutas Planas, utiliza la herramienta de migración del paquete Remix Flat Routes. Especifica las carpetas de origen y destino, asegurándote de que sean diferentes. Elige entre archivos planos o carpetas planas. Verifica la migración comparando las rutas antes y después de usar el comando mpx-remix-routes. Las rutas deben tener la misma jerarquía y rutas, solo los nombres de archivo y el ordenamiento pueden cambiar potencialmente.

Entonces, ahora que hemos visto los beneficios de las Rutas Planas, ¿cómo migrar nuestra aplicación existente?

El paquete Remix Flat Routes incluye una herramienta de migración. Simplemente ejecuta el comando mpx migrate-flat-routes y especifica las carpetas de origen y destino. Las carpetas deben ser diferentes para evitar que la herramienta sobrescriba tus rutas originales. Puedes especificar si deseas archivos planos o carpetas planas. Aquí tienes una captura de pantalla de las rutas de la muestra de la aplicación Fakebooks antes y después de la migración. Puedes ver que te permite ver rápidamente cómo se estructuran tus rutas sin tener que expandir las carpetas.

Una forma de verificar que la migración se haya realizado correctamente es ejecutar el comando mpx-remix-routes tanto en las rutas originales como en las rutas migradas. Dado que remix-flat-routes crea la misma configuración de ruta que se generó mediante la convención predeterminada, las rutas deben ser idénticas tanto en jerarquía como en rutas. Las únicas diferencias son los nombres de archivo y tal vez algún ordenamiento.

En los últimos seis meses, a medida que las personas han probado remix-flat-routes, han ofrecido sugerencias de mejoras y otras mejoras más allá de la especificación original escrita por Ryan. Ya he iniciado el proceso de revisión para incluir remix-flat-routes en el marco principal. Aún está por determinarse si estas mejoras se incluirán en el núcleo. Al menos, seguiré brindando soporte como complementos que podrás incluir en tu configuración.

Uno de los puntos problemáticos de la convención de enrutamiento de Remix, tanto la actual como las rutas planas, es que el uso del signo $ puede ser problemático al trabajar con archivos en la terminal. Dado que la mayoría de las terminales tratan el signo $ como un prefijo de variable, esto te obliga a escapar el nombre de archivo al usar comandos. Dado que estamos en RemixConf Europe, sugiero usar el Euro o, si tienes un teclado típico de EE. UU., tal vez el acento circunflejo.

Algunos desarrolladores desean poder montar la aplicación Remix en una ruta que no sea la raíz, tal vez estén agregando Remix a un sitio web existente. Aquí puedes configurar Remix para usar una ruta diferente, como myRemix app. Esto actualizará la ruta principal y no tendrás que agregar una carpeta separada en la carpeta de rutas.

Jacob Ebey, miembro del equipo de Remix, creó recientemente una aplicación de muestra que tenía rutas procesadas por diferentes tecnologías de backend, lo cual es bastante sorprendente. Tenía rutas para Node, CloudFlare workers, así como service workers, además de un conjunto común de diseños. Utilizó rutas planas de Remix, pero para satisfacer sus necesidades, tuvo que combinar manualmente las rutas en un único espacio de nombres para asegurar que las rutas principales se definieran correctamente.

En la configuración de Remix, ahora puedes especificar no solo una única ruta a tu carpeta de rutas, sino pasarle una matriz de rutas. Las rutas planas construirán la estructura de ruta en varias carpetas de ruta y las fusionarán automáticamente en un único espacio de nombres. No necesitas hacerlo manualmente. Y como puedes ver en la salida de rutas MPX Remix, las rutas se generaron correctamente.

En conclusión, he sido un seguidor de Remix desde el primer día, cuando era un producto de pago. Valió la pena y definitivamente ha mejorado la forma en que construyo aplicaciones web hoy en día. No puedo creer que haya pasado casi un año desde que Michael Jackson anunció por primera vez la versión 1 de Remix al mundo, poniéndola a disposición como código abierto. En ese corto tiempo, ha habido dos conferencias de Remix. Una en mayo a la que tuve la suerte de asistir, donde pude conocer en persona por primera vez a personas como Michael, Ryan y Ken, y muchos otros que solo conocía en Twitter o Discord. Además de esta conferencia de hoy, donde estoy agradecido de poder dar una presentación y hablar sobre algo que he construido y en lo que estoy muy apasionado. Y ahora, con la reciente noticia de que Shopify ha adquirido Remix, todos podemos estar tranquilos de que este increíble marco continuará prosperando. Ni siquiera puedo imaginar el viaje salvaje que Michael y Ryan han tenido en estos últimos 12 meses y estoy emocionado de ver qué nos depararán los próximos 12 meses. Gracias por tomarte el tiempo de ver mi presentación.

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
GraphQL Galaxy 2022GraphQL Galaxy 2022
31 min
Your GraphQL Groove
Building with GraphQL for the first time can be anywhere between daunting and easy-peasy. Understanding which features to look for in your client-side and server-side tooling and getting into the right habits (and ridding yourself of old habits) is the key to succeed with a team of any size in GraphQL.

This talk gives an overview of common struggles I've seen numerous teams have when building with GraphQL, how they got around common sources of frustration, and the mindset they eventually adopted, and lessons learned, so you can confidently stick with and adopt GraphQL!

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps