Este monorepo está construido con React y Nx, proporcionando una estructura modular y escalable. Incluye una aplicación shell que actúa como contenedor principal e integra aplicaciones como appSecondary.
Todas las aplicaciones dentro del shell aprovechan componentes y utilidades compartidas ubicadas en la biblioteca shared, que centraliza los componentes basados en shadcn/ui y la configuración global de TailwindCSS, garantizando consistencia visual y reutilización de código.
Aprende más sobre esta configuración y sus capacidades o ejecuta npx nx graph para explorar visualmente lo que se ha creado. ¡Ahora, pongámonos al día!
Haz clic aquí para completar la configuración de tu espacio de trabajo.
Para ejecutar el servidor de desarrollo de tu aplicación, usa:
npm start o npx nx serve shell
Para crear un paquete de producción:
npx nx build shell
Para ver todos los objetivos disponibles para un proyecto, ejecuta:
npx nx show project shell
Estos objetivos se infieren automáticamente o se definen en los archivos project.json o package.json.
Más sobre la ejecución de tareas en la documentación »
Si bien podrías agregar nuevos proyectos a tu espacio de trabajo manualmente, es recomendable aprovechar los plugins de Nx y su función de generación de código.
Usa el generador del plugin para crear nuevos proyectos.
Para generar una nueva aplicación, usa:
npx nx g @nx/react:app demo
Para generar una nueva biblioteca, usa:
npx nx g @nx/react:lib mylib
Este monorepo está estructurado para maximizar la eficiencia y el mantenimiento al centralizar múltiples aplicaciones y recursos compartidos. A continuación se presenta una vista general de sus componentes:
-
Shell: La aplicación principal que actúa como contenedor para varias aplicaciones independientes. Gestiona el diseño y el enrutamiento, proporcionando una interfaz unificada para las aplicaciones integradas.
-
Apps: Varias aplicaciones (por ejemplo,
appSecondary) que funcionan de forma independiente dentro del shell. Cada aplicación puede desarrollarse, probarse y desplegarse por separado, permitiendo flujos de trabajo modulares. -
Shared: Una biblioteca de componentes, utilidades y estilos compartidos ubicada en la carpeta
shared. Estos recursos pueden ser utilizados por cualquier aplicación dentro del monorepo, promoviendo la reutilización de código y reduciendo la duplicación.
-
Arquitectura modular: Al separar aplicaciones y recursos compartidos, el monorepo mantiene un código limpio y organizado, facilitando la gestión y la escalabilidad.
-
Reutilización eficiente del código: Las bibliotecas compartidas permiten el uso de componentes y utilidades comunes entre diferentes aplicaciones, garantizando consistencia y reduciendo el esfuerzo de implementación.
-
Desarrollo escalable: La estructura admite la adición de nuevas aplicaciones y bibliotecas con un esfuerzo mínimo, asegurando un crecimiento fluido a medida que el proyecto evoluciona.
-
Herramientas consistentes: Nx proporciona potentes herramientas para la ejecución de tareas, generación de código y gestión de dependencias, mejorando la productividad del desarrollador y manteniendo la calidad del proyecto.
Este tipo de configuración es ideal para proyectos grandes y equipos multifuncionales, permitiendo prácticas de desarrollo ágiles y fomentando la colaboración mediante una base de código bien organizada.
Puedes usar npx nx list para obtener una lista de los plugins instalados. Luego, ejecuta npx nx list <plugin-name> para conocer más capacidades específicas de un plugin en particular.
Alternativamente, instala Nx Console para explorar plugins y generadores directamente en tu IDE.
Más sobre los plugins de Nx » | Explora el registro de plugins »
Nx Console es una extensión para editores que mejora tu experiencia de desarrollo. Te permite ejecutar tareas, generar código y mejora la autocompletación en tu IDE. Está disponible para VSCode e IntelliJ.
Aprende más:
Únete a la comunidad de Nx: