# Crear una extensión simple


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](/desktop/release-notes/).

> Consejo
>
> Si deseas comenzar una base de código para tu nueva extensión, nuestra [Guía de inicio rápido](/extensions/extensions-sdk/quickstart/) 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](https://github.com/docker/extensions-sdk/tree/main/samples) 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.

```bash
.
├── 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](/extensions/extensions-sdk/design/design-guidelines/).

## Crear un Dockerfile

Como mínimo, tu Dockerfile necesita:

- [Etiquetas (labels)](/extensions/extensions-sdk/extensions/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`.

```Dockerfile
# 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.

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

Para obtener más información sobre el `metadata.json`, consulta [Metadatos](/extensions/extensions-sdk/architecture/metadata/).

## 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.

```console
$ 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.

```console
$ 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](/extensions/extensions-sdk/build/minimal-frontend-extension/images/ui-minimal-extension.png)

## ¿Qué sigue?

- Construye una extensión con un [frontend más avanzado](/extensions/extensions-sdk/build/minimal-frontend-extension/frontend-extension-tutorial/).
- Aprende a [probar y depurar](/extensions/extensions-sdk/dev/test-debug/) tu extensión.
- Aprende a [configurar CI para tu extensión](/extensions/extensions-sdk/dev/continuous-integration/).
- Obtén más información sobre la [arquitectura](/extensions/extensions-sdk/architecture/).