Saltar al contenido principal

Capa UI

Instalación y compilación del panel de control y la interfaz general de las aplicaciones.

Contexto​

Las aplicaciones Netuno ya traen configuradas, por defecto, un conjunto de tecnologías avanzadas orientadas al front-end, siendo algunas de ellas React, Vite, Less y Ant.Design.

Dentro de las aplicaciones está la carpeta 📁 ui (interfaz de usuario), que es donde desarrollamos los paneles de control y otros componentes de front-end.

Antes de empezar​

Asegúrate de tener instalado Bun, que es un requisito previo; más información sobre cómo:

Instalar los módulos de dependencia​

Para instalar todas las dependencias que vienen por defecto, entra en la carpeta 📁 ui (interfaz de usuario) dentro de tu aplicación en desarrollo, por ejemplo:

cd apps/mi_app/ui/

Ejecuta el comando de instalación de los módulos de dependencia:

bun install

Bun es una alternativa mejorada y más optimizada que NPM.

Compilación automática​

Entra en la carpeta 📁 ui (interfaz de usuario) de tu aplicación en desarrollo, por ejemplo:

cd apps/mi_app/ui/

Para compilar el front-end automáticamente en cada cambio de código, ejecuta:

bun run watch

Asegúrate de tener Bun instalado.

Integración automática del front-end con Netuno​

Netuno te permite iniciar la UI junto con el proceso de servidor de la aplicación Netuno.

Todos los mensajes de compilación de React estarán integrados en el mismo terminal que la aplicación Netuno.

Para ello, basta con activar la configuración en los commands de la aplicación Netuno en 📂 config/_development.json, es decir, en el command con el path de ui, poner enabled en true, de la siguiente forma:

config/_development.json
{
  ...
  "commands": [
    {
      "enabled": true,
      "path": "ui",
      "command": "bun run watch"
    }
  ],
  ...
}

Siempre que edites archivos de configuración de la aplicación Netuno es necesario reiniciar el servidor para que pueda aplicar los nuevos cambios.

Por último, inicia/reinicia el servidor con tu aplicación Netuno para comprobar su funcionamiento.

Y ahora todo quedará integrado en un único terminal centralizado, evitando así tener varios terminales dispersos; más sobre:

Otras tecnologías de front-end​

Dentro de la carpeta 📁 ui es posible configurar cualquier tecnología de front-end, o incluir cualquier nuevo módulo de dependencia que sea necesario.

Si no quieres utilizar ninguna de las tecnologías estándar, puedes sustituirla por cualquier otra, especialmente adaptando los archivos:

  • package.json
  • vite.config.js