Personaliza tu espacio de trabajo de Firebase Studio

Firebase Studio te permite adaptar tu lugar de trabajo a las necesidades únicas de tu proyecto mediante la definición de un solo archivo de configuración .idx/dev.nix que describe lo siguiente:

  • Las herramientas del sistema que necesitas para poder ejecutar (por ejemplo, desde la Terminal), como compiladores o otros objetos binarios.
  • Las extensiones que debes tener instaladas (por ejemplo, compatibilidad con lenguajes de programación)
  • Cómo deben aparecer las vistas previas de la app (por ejemplo, los comandos para ejecutar el servidor web)
  • Variables de entorno globales disponibles para los servidores locales que se ejecutan en tu espacio de trabajo.

Consulta la referencia de dev.nix para obtener una descripción completa de lo que está disponible.

Nix y Firebase Studio

Firebase Studio usa Nix para definir la configuración del entorno de cada espacio de trabajo. Específicamente, Firebase Studio usa lo siguiente:

Debido a que los entornos de Nix son reproducibles y declarativos, en el contexto de Firebase Studio, esto significa que puedes compartir tu archivo de configuración de Nix como parte de tu repositorio de Git para asegurarte de que todas las personas que trabajan en tu proyecto tengan la misma configuración de entorno.

Un ejemplo básico

En el siguiente ejemplo, se muestra una configuración de entorno básica que habilita las vistas previas:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

Agrega herramientas del sistema

Para agregar herramientas del sistema a tu espacio de trabajo, como compiladores o programas de CLI para servicios en la nube, busca el ID de paquete único en el registro de paquetes de Nix y agrégalo al objeto packages de tu archivo dev.nix, con el prefijo "pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

Esto es diferente de la forma en que sueles instalar paquetes del sistema con administradores de paquetes específicos del SO, como APT (apt y apt-get), Homebrew (brew) y dpkg. Describir de forma declarativa exactamente qué paquetes del sistema se necesitan significa que los espacios de trabajo de Firebase Studio son más fáciles de compartir y reproducir.

Usa objetos binarios de nodos locales

Al igual que en tu máquina local, los objetos binarios relacionados con los paquetes de nodos instalados de forma local (por ejemplo, los paquetes definidos en tu package.json) se pueden ejecutar en un panel de la terminal invocándolos con el comando npx.

Como comodidad adicional, si estás en un directorio con una carpeta node_modules (como el directorio raíz de un proyecto web), se pueden invocar directamente los objetos binarios instalados de forma local, sin el prefijo npx.

Cómo agregar componentes gcloud

Hay disponible una configuración predeterminada de la CLI de gcloud para Google Cloud para todos los lugares de trabajo de Firebase Studio.

Si necesitas componentes adicionales, puedes agregarlos a tu archivo dev.nix:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

Agrega extensiones de IDE

Puedes instalar extensiones en Firebase Studio con el registro de extensiones OpenVSX de dos maneras:

  • Usa el panel Extensiones en Firebase Studio para descubrir y, luego, instalar extensiones. Este enfoque es mejor para las extensiones específicas del usuario, como las siguientes:

    • Temas de color personalizados
    • Emulación de editor, como VSCodeVim

  • Agrega extensiones a tu archivo dev.nix. Estas extensiones se instalarán automáticamente cuando compartas la configuración de tu espacio de trabajo. Este enfoque es mejor para las extensiones específicas del proyecto, como las siguientes:

    • Extensiones de lenguaje de programación, incluidos depuradores específicos del lenguaje
    • Extensiones oficiales para los servicios en la nube que se usan en tu proyecto
    • Formateadores de código

Para el último enfoque, puedes incluir extensiones de IDE en tu archivo dev.nix. Para ello, busca el ID de extensión completamente calificado (del formulario <publisher>.<id>) y agrégalo al objeto idx.extensions de la siguiente manera:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

Agrega servicios comunes

Firebase Studio también ofrece una configuración simplificada para los servicios comunes que podrías necesitar durante el desarrollo, incluidos los siguientes:

  • Contenedores
    • Docker (services.docker.*)
  • Mensajes
    • Emulador de Pub/Sub (services.pubsub.*)
  • Bases de datos
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Para obtener detalles sobre cómo habilitar estos servicios en tu lugar de trabajo, consulta las secciones de services.* de la referencia de dev.nix.

Personaliza las vistas previas

Para obtener detalles sobre cómo personalizar las vistas previas de tu app, consulta Obtén una vista previa de tu app.

Establece el ícono de tu lugar de trabajo

Para elegir un ícono personalizado para tu lugar de trabajo, coloca un archivo PNG llamado icon.png dentro del directorio .idx en el mismo nivel que tu archivo dev.nix. Luego, Firebase Studio usará este ícono para representar tu lugar de trabajo en el panel.

Debido a que este archivo se puede verificar en el control de código fuente (como Git), esta es una buena manera de ayudar a que todas las personas que trabajan en tu proyecto vean el mismo ícono para tu proyecto cuando usan Firebase Studio. Además, como el archivo puede variar entre las ramas de Git, puedes usar este ícono para distinguir visualmente entre los espacios de trabajo de apps beta y de producción, y para otros fines.

Convierte tus personalizaciones en una plantilla

Para convertir la configuración de tu entorno en un "entorno inicial" que cualquier persona pueda usar para compilar proyectos nuevos, consulta la documentación sobre Cómo crear plantillas personalizadas.

Explora todas las opciones de personalización

Consulta la referencia de dev.nix para obtener una descripción detallada del esquema de configuración del entorno.

Próximos pasos