Organizzare progetti con Firebase Studio

Dopo il primo avvio con Firebase Studio, dovremmo aver portato con noi alcune lezioni fondamentali:

• si tratta di vibe coding a tutti gli effetti con un'Intelligenza Artificiale che ne rappresenta il motore creativo;
• c'è apertura totale ad ogni tipo di tecnologia declinata nelle accezioni più moderne;
• la tecnologia Google rappresenta un'importante fulcro infrastrutturale sebbene non ci sia preclusione per altri scenari Cloud.

Ora il percorso richiede però che ci si focalizzi su singoli aspetti che rendano chiaro maggiormente il processo produttivo con questo ambiente. Ciò prima di iniziare ad affrontare esempi pratici per ogni tipo di applicazione.

Importare un progetto

Quello che sinora abbiamo chiamato "progetto" in realtà, tecnicamente, consiste in un workspace che Firebase Studio dedica ad una singola applicazione e configura perfettamente con tutte le dipendenze ad essa occorrenti.

Il formato che si utilizza per tali impostazioni è Nix un gestore di pacchetti in grado di fornire tutto il background di dipendenze tramite un file di estensione .nix. Era presente anche nel nostro esempio (quello degli aforismi), collocato in una cartella .idx, denominato dev.nix e visibile solo nella modalità IDE.

Più estesamente, alla base di Firebase Studio c'è il progetto IDX che non solo usa Nix come package manager ma offre tutta una serie di direttive che permettono la configurazione dell'ambiente di lavoro. Il rapporto tra Project IDX e Firebase Studio è così fondamentale che nella documentazione è stata predisposta un'apposita sezione intitolata Project IDX is now part of Firebase Studio.

Prima di procedere con i nostri progetti diamo uno sguardo ai tratti fondamentali della configurazione del workspace che Firebase Studio ha predisposto per il nostro esempio degli aforismi.

Il file .nix

La struttura del file viene inclusa tra le parentesi graffe che fanno capo alla direttiva pkgs:

{pkgs}: {
    channel = "stable-24.11";
    packages = [
       pkgs.nodejs_20
    ];
    env = {};
    # OMESSA la direttiva idx
}

Viene impostato per prima cosa il channel che può corrispondere ad una versione stabile (come in questo caso) o alla versione unstable che contiene le versioni più aggiornate dei pacchetti ma, come si può immaginare, ancora suscettibili di perfezionamenti.

La direttiva packages raccoglie l'elenco delle dipendenze messe a disposizione. In questo caso, parliamo solo di Node.js ma cercando nel motore di ricerca dei pacchetti si può trovare tutto ciò di cui si ha bisogno.

Ad esempio, ci servisse la versione di Python 3.14, cercando nel motore ci verrebbe indicato di aggiungere alla lista attinente alla direttiva packages il valore pkgs.python314 purché rientrante nello stesso channel che abbiamo dichiarato per il file.

La direttiva env specifica invece variabili d'ambiente che però in questo caso non si sono rivelate necessarie.

Configurazione dell'ambiente di lavoro

Nello snippet di codice precedente abbiamo tralasciato il blocco idx che andiamo a vedere subito:

idx = {
    extensions = [
      # "vscodevim.vim"
    ];
    workspace = {
      onCreate = {
        default.openFiles = [
          "src/app/page.tsx"
        ];
      };
    };
     previews = {
      enable = true;
      previews = {
        web = {
          command = ["npm" "run" "dev" "--" "--port" "$PORT" "--hostname" "0.0.0.0"];
          manager = "web";
        };
      };
    };
  };

Questa porzione riguarda essenzialmente le impostazioni dell'ambiente di sviluppo tra cui eventuali estensioni (extensions), la pagina di apertura che nel nostro caso sarà page.tsx contenuta in quella che è la vera parte di definizione dell'app in Firebase Studio ed i comandi per l'avvio dell'anteprima.

Personalizzazione dell'ambiente

Capire quanto descritto sinora può essere molto utile per comprendere bene come è strutturato un progetto in Firebase Studio e cosa significheranno le impostazioni di base man mano che affronteremo esempi basati su tecnologie diverse. In generale tutto ciò può essere utile per la personalizzazione dell'ambiente di lavoro e per comprendere ogni modifica o impostazione che possa essere apportata con richieste via prompt.

A tal riguardo, come si evince dalla figura che segue, in qualsiasi punto si clicchi con il pulsante destro del mouse, tramite il menù contestuale è possibile vedere voci per l'Upload, il Download e, più in basso, per lo Zip & Download che permettono di scaricare e caricare materiale a seconda che si sia effettuato il click su un file o su una cartella.

Uno dei primi esperimenti che si può fare consiste nell'inserire un file di nome icon.png nella cartella .idx, allo stesso livello di dev.nix. Per poter modificare l'icona associata al workspace in modo che appaia diversa da quella di default ovunque Firebase Studio faccia riferimento allo specifico progetto.