Firebase Studio e template

Abbiamo visto che al momento di avviare un nuovo progetto Firebase Studio offre tutta una serie di alternative per partire da applicazioni già configurate. Queste prendono il nome di template e costituiscono un patrimonio molto interessante in continua crescita anche perchè frutto dell'eredità del Project IDX da cui questo IDE proviene e del contributo di una community molto attiva.

In questa lezione, capiremo dove trovarli e su quale struttura si basano i template.

Template ufficiali e community

I template sono distribuiti in due grosse categorie:

• ufficiali disponibili su apposita pagina in cui sono suddivisi per categorie;
• community, forniti da programmatori esterni e recuperabili su apposito repository GitHub.

I template si basano quindi su strutture di progetti, finalizzati ad un preciso scopo che contengono sia il codice dell'architettura sia due file di build del template all'interno di Firebase Studio denominati idx-template.json sia idx-template.nix.

Alcune lezioni fa abbiamo parlato del formato Nix e questo è il punto dove quei concetti verranno rispolverati.

Come nasce un template di Firebase Studio

Vediamo la struttura di base di un template intesa non solo come file di codice ma proprio come configurazione all'interno di Firebase Studio. Prendiamo come caso studio un template ufficiale molto semplice, denominato Simple HTML, la cui configurazione si trova al repository IDX blank-web.

Si presenta come una struttura di pochi file in cui troviamo un HTML che consiste in un semplice Hello world, un file Javascript vuoto già importanto in quello HTML ed uno CSS, anch'esso vuoto ma già "linkato" all'HTML.

Lo scopo di tale template è quello di impostare il necessario in cui si abbia già una struttura di base per avviare un sito Internet ma soprattutto ciò che serve a calare questo modello nel contesto di Firebase Studio. Sbirciando infatti il contenuto del file dev.nix troviamo l'importazione dei package Python 3 e Node.js che apparentemente non dovrebbero entrarci nulla con un semplice esempio HTML. Se però osserviamo la sezione dedicata all'anteprima notiamo:

previews = {
  enable = true;
  previews = {
    web = {
      command = ["python3" "-m" "http.server" "$PORT" "--bind" "0.0.0.0"];
      manager = "web";
    };
  };
};

in cui si vede l'avvio di un webserver di test già incluso nella distribuzione Python e spesso usato per provare pagine web in locale.

Nel catalogo dei template ufficiali troviamo Simple HTML con questa mattonella:

La struttura del repository che ci serve a capire come tutto nasce si basa su tre elementi:

• la cartella app che contiene tutto ciò che costituirà la base del progetto in Firebase Studio (in questo caso HTML, CSS e Javascript);
• il file idx-template.json che fornisce le istruzioni grazie alle quali nascerà la mattonella che abbiamo visto poc'anzi;
• il file idx-template.nix che guiderà alla costruzione dell'app in Firebase Studio.

Questo il contenuto di idx-template.json:

{
 "name": "Simle HTML",
 "description": "Create a new, simple web app with plain HTML, CSS and JS ( or TypeScript)",
 "categories": [
 "Web app"
 ],
 "icon": "https://www.gstatic.com/monospace/231115/logo_html.svg"
}

Se si osservano i testi e l'icona puntata dall'ultimo link ci si accorge come tutta questa presentazione venga usata per formattare la mattonella di presentazione del modello.

Le istruzioni che invece guideranno alla copia della cartella app nel progetto Firebase Studio saranno contenute nel file idx-template.nix, eccolo:

{ pkgs, ... }: {
 packages = [];
 bootstrap = ''
 cp -rf ${./app} "$out"
 chmod -R +w "$out"
 '';
}

Qui non ci sono package da importare ma le indicazioni di copia in fase di bootstrap del progetto.

Il contenuto di app inutile dire che corrisponderà a quello che troveremo nel progetto Simple HTML che avvieremo nel nostro ambiente al click della mattonella.

Creare i propri template

Quanto detto può essere una buona indicazione anche per creare i propri template. Ciò può essere utile per raccogliere tutte le nostre best practises di progettazione in un unico modello in modo che all'avvio di un tipo di applicazione specifico (che presumibilmente useremo spesso) potremo avviare il lavoro sempre nello stesso modo.

Avere una prassi consolidata con tutti i file di configurazione che abbiamo visto aiuta ad evitare i classici copia e incolla di file già pronti da dover configurare, sempre in maniera piuttosto simile, evitando sviste. I template Firebase Studio offrono la possibilità di porre l'architettura che preferiamo alla base ed impostare tutta la configurazione di costruzione del progetto iniziale come preferiamo.

Il tutto partirà dal caricamento del necessario in un repository Git per poi importarlo in Firebase Studio quando si ha la possibilità di importare da GitHub.