Compartir comentarios
Las respuestas se generan en base a la documentación.

Crear una extensión simple

Tabla de contenidos

Para comenzar a crear tu extensión, primero necesitas un directorio con archivos que van desde el código fuente de la extensión hasta los archivos específicos requeridos para la misma. Esta página proporciona información sobre cómo configurar una extensión frontend mínima basada en HTML simple.

Antes de comenzar, asegúrate de tener instalada la última versión de Docker Desktop.

Consejo

Si deseas comenzar una base de código para tu nueva extensión, nuestra Guía de inicio rápido y el comando docker extension init <mi-extension> proporcionan una mejor base para tu extensión.

Estructura de carpetas de la extensión

En la carpeta de ejemplos de minimal-frontend, puedes encontrar un ejemplo listo para usar que representa una extensión de UI construida con HTML. Repasaremos este ejemplo de código en este tutorial.

Aunque puedes comenzar desde un directorio vacío, se recomienda encarecidamente que comiences a partir de la siguiente plantilla y la modifiques adecuadamente para adaptarla a tus necesidades.

.
├── Dockerfile # (1)
├── metadata.json # (2)
└── ui # (3)
    └── index.html
  1. Contiene todo lo necesario para compilar la extensión y ejecutarla en Docker Desktop.
  2. Un archivo que proporciona información sobre la extensión, como el nombre, la descripción y la versión.
  3. La carpeta de origen que contiene todos tus archivos HTML, CSS y JS. También puede haber otros recursos estáticos como logotipos e iconos. Para obtener más información y pautas sobre la construcción de la UI, consulta la sección de Diseño y estilos de UI.

Crear un Dockerfile

Como mínimo, tu Dockerfile necesita:

  • Etiquetas (labels) que proporcionan información adicional sobre la extensión, el icono y las capturas de pantalla (screenshots).
  • El código fuente, que en este caso es un archivo index.html ubicado dentro de la carpeta ui.
  • El archivo metadata.json.
# syntax=docker/dockerfile:1
FROM scratch

LABEL org.opencontainers.image.title="Minimal frontend" \
    org.opencontainers.image.description="A sample extension to show how easy it's to get started with Desktop Extensions." \
    org.opencontainers.image.vendor="Awesome Inc." \
    com.docker.desktop.extension.api.version="0.3.3" \
    com.docker.desktop.extension.icon="https://www.docker.com/wp-content/uploads/2022/03/Moby-logo.png"

COPY ui ./ui
COPY metadata.json .

Configurar el archivo de metadatos

Se requiere un archivo metadata.json en la raíz del sistema de archivos de la imagen.

{
  "ui": {
    "dashboard-tab": {
      "title": "Minimal frontend",
      "root": "/ui",
      "src": "index.html"
    }
  }
}

Para obtener más información sobre el metadata.json, consulta Metadatos.

Compilar la extensión e instalarla

Ahora que has configurado la extensión, debes compilar la imagen de la extensión que utilizará Docker Desktop para instalarla.

$ docker build --tag=awesome-inc/my-extension:latest .

Esto compilará una imagen etiquetada como awesome-inc/my-extension:latest. Puedes ejecutar docker inspect awesome-inc/my-extension:latest para ver más detalles al respecto.

Por último, puedes instalar la extensión y ver cómo aparece en el panel de control de Docker Desktop.

$ docker extension install awesome-inc/my-extension:latest

Previsualizar la extensión

Para previsualizar la extensión en Docker Desktop, cierra y abre el panel de control de Docker Desktop una vez completada la instalación.

El menú del lado izquierdo mostrará una nueva pestaña con el nombre de tu extensión.

Extensión frontend mínima

¿Qué sigue?