WordPress su Google Project IDX: Un Primo Approccio al Futuro dello Sviluppo Web

Come agenzia di sviluppo web sempre attenta alle innovazioni tecnologiche, abbiamo recentemente esplorato Google Project IDX, un ambiente di sviluppo cloud che promette di rivoluzionare il modo in cui creiamo e gestiamo i progetti web. In questo articolo, condivideremo la nostra esperienza nella configurazione di WordPress su questa piattaforma, includendo successi, sfide e lezioni apprese.

Cos’è Google Project IDX?

Google Project IDX rappresenta una rivoluzionaria piattaforma di sviluppo cloud-native, attualmente in fase beta. È un ambiente di sviluppo integrato (IDE) basato su browser che combina le migliori caratteristiche di Visual Studio Code con potenti capacità cloud e integrazione AI attraverso Google Gemini.

Caratteristiche principali di Project IDX:

• IDE completamente basato su browser
• Integrazione nativa con i servizi Google Cloud
• Supporto AI per il completamento del codice e debugging
• Sistema di preview integrato per le applicazioni web
• Collaborazione in tempo reale
• Gestione delle dipendenze attraverso Nix

Disclaimer e Considerazioni

È importante notare che questa guida rappresenta il nostro primo approccio a Project IDX. Data la natura beta della piattaforma e la documentazione ancora limitata, potrebbero esserci modi migliori per configurare WordPress in questo ambiente.

Problemi Noti:

• La preview parte sulla porta 9000 ma dovrebbe partire sulla porta dettata dall’env (finora è sempre stata la 9002)
• La documentazione ufficiale è ancora acerba
• Alcuni aspetti della configurazione potrebbero richiedere ottimizzazioni

Funzionalità migliorabili:

• Non esiste ancora un metodo semplice per avere un link pubblico da condividere (attualmente forse il difetto più grosso)
• Gemini non è ancora al livello dei concorrenti (ma già offre un “contesto” molto ampio e sinceramente non dubitiamo che in futuro migliorerà significativamente)

Funzionalità Verificate:

• La preview sia interna che con link “esterno” funziona perfettamente una volta cambiata la porta da 9000 a 9002 nella barra degli indirizzi
• L’ambiente di sviluppo è stabile e performante
• Il supporto AI sembra promettere bene

Configurazione Base dell’Ambiente

Il nostro ambiente di sviluppo è definito in un file di configurazione Nix che specifica tutti i componenti necessari:

{ pkgs, ... }: {
  channel = "stable-24.05";
  
  packages = [
    pkgs.php82
    pkgs.php82Packages.composer
    pkgs.wp-cli
    pkgs.nodejs_20
    pkgs.nodePackages.nodemon
    pkgs.mariadb
  ];
}

Configurazione del Database

Per MariaDB, abbiamo configurato:

services.mysql = {
  enable = true;
  package = pkgs.mariadb;
};

Estensioni VSCode Essenziali

Abbiamo incluso alcune estensioni utili per lo sviluppo WordPress ma la libertà è assoluta da questo punto di vista:

extensions = [
  "bmewburn.vscode-intelephense-client"
  "xdebug.php-debug" 
  "mtxr.sqltools"
  "mtxr.sqltools-driver-mysql"
];

Configurazione del server di Preview

Una delle parti più interessanti è stata la configurazione del server di preview:

previews = {
  enable = true;
  previews = {
    web = {
      command = ["wp" "server" "--host=127.0.0.1" "--port=$PORT" "--allow-root"];
      manager = "web";
      env = { 
        PORT = "$PORT";
      };
    };
  };
};

Dato che si tratta semplicemente di un ambiente di sviluppo abbiamo optato per utilizzare il web server interno di PHP, attraverso il tool dedicato a wordpress “wp cli”, in questo modo per ora non dobbiamo preoccuparci di un web server vero e proprio e della sua configurazione rendendo il nostro ambiente di sviluppo anche più agnostico.

Un problema particolarmente insidioso è stato il loop di reindirizzamento in WordPress, in particolare sul pannello di amministrazione, e il funzionamento in contemporanea della preview interna e del link “esterno”. Abbiamo risolto configurando correttamente WP_HOME e WP_SITEURL

Gestione Dinamica della Porta

Abbiamo implementato un sistema che utilizza la variabile d’ambiente PORT fornita da IDX, permettendo una configurazione dinamica dell’URL del sito.

Processo di Installazione Automatizzato

La parte più critica è stata l’automazione dell’installazione di WordPress. Abbiamo creato una sequenza di comandi che gestisce l’intero processo:

workspace = {
  onCreate = {
    wpSetup = "
      mkdir -p ./.wp-cli &&
      wp core download &&
      wp config create --dbname=test --dbuser=root --dbhost=127.0.0.1 &&
      sed -i \"/That's all, stop editing/i define('WP_HOME', 'http://127.0.0.1:' . getenv('PORT'));\" wp-config.php &&
      sed -i \"/That's all, stop editing/i define('WP_SITEURL', 'http://127.0.0.1:' . getenv('PORT'));\" wp-config.php &&
      wp core install --url=localhost:$PORT --title='My WordPress Site' --admin_user=studioup --admin_password=admin --admin_email=info@studioup.it &&
      wp rewrite structure '/%postname%/' &&
      wp rewrite flush --hard
    ";
  };
};

Sfide Superate

1. Gestione della Porta Dinamica

• Inizialmente avevamo hardcodato la porta 5173
• Abbiamo poi implementato una soluzione che usa getenv(‘PORT’) per la configurazione dinamica
• Questo permette al sito di funzionare correttamente indipendentemente dalla porta assegnata

2. Sequenza di Installazione

• Abbiamo semplificato e reso istantanea la installazione e configurazione di wordpress
• Utilizziamo strumenti ufficiali e scarichiamo sempre l’ultima versione

3. Configurazione wp-config.php

• Abbiamo implementato una soluzione elegante per inserire le definizioni WP_HOME e WP_SITEURL
• Utilizziamo sed per inserire le configurazioni nel punto corretto del file
• La configurazione dinamica dell’URL permette il funzionamento corretto delle preview

Vantaggi della Soluzione

1. Automazione Completa

• L’intero processo di setup richiede un solo comando
• Riduce significativamente il tempo di configurazione
• Elimina errori umani nel processo di setup

2. Flessibilità

• La configurazione dinamica della porta permette il riutilizzo del workspace
• Facilita il lavoro in team su progetti condivisi
• Si adatta automaticamente all’ambiente IDX

3. Manutenibilità

• Configurazione centralizzata in un unico file
• Semplice da modificare e aggiornare

Prossimi Passi

Open Source

Stiamo pianificando di pubblicare questa configurazione su GitHub ma prima abbiamo ancora alcune sfide da risolvere:

• Test approfonditi
• Fix della porta sulla preview

Miglioramenti Pianificati

• Gestione più robusta delle variabili d’ambiente
• Template per diversi tipi di progetti WordPress
• Template per l’installazione automatizzata di plugin

Conclusioni

Project IDX rappresenta un’interessante evoluzione negli strumenti di sviluppo web, e la sua integrazione con WordPress apre nuove possibilità per lo sviluppo collaborativo. Sebbene la nostra implementazione attuale funzioni, riconosciamo che c’è spazio per miglioramenti e ottimizzazioni.

Continueremo ad aggiornare questa guida man mano che acquisiamo più esperienza con la piattaforma e scopriamo approcci migliori. Nel frattempo, vi invitiamo a seguire il nostro repository GitHub (presto disponibile) per rimanere aggiornati sugli sviluppi e contribuire al miglioramento di questa soluzione.

Nota: Questa configurazione è stata testata con Project IDX in versione beta (ottobre 2024). Data la natura in rapida evoluzione della piattaforma, alcuni aspetti potrebbero cambiare nelle versioni future.