Integrare SASS in NetBeans

In questo post vedremo come installare SASS in ambiente Ruby per Windows, per poi integrarlo con l’IDE NetBeans.

Installare Ruby e SASS (in ambiente Windows)

Sul sito rubyinstaller.org è possibile scaricare la versione più aggiornata di Ruby per Windows a 32 e a 64 bit (la 2.2.2 ad agosto 2015). Eseguire l’installazione, avendo l’unica accortezza di evitare path contenenti spazi (fig. 1).

fig.1 - Pannello di opzioni visualizzato dall'installazione di Ruby
fig.1 – Pannello di opzioni visualizzato dall’installazione di Ruby

Al termine dell’installazione, l’elenco dei programmi comprenderà il prompt dei comandi con Ruby (fig. 2).

fig.2 - Link al prompt dei comandi con Ruby
fig.2 – Link al prompt dei comandi con Ruby

Lanciare il prompt dei comandi con Ruby, quindi digitare il comando per il download e l’installazione di SASS (fig. 3):

gem install sass
fig.3 – Comando di installazione di SASS in ambiente Ruby.

Per verificare l’esito della installazione digitare il comando:

sass -v

(ovvero: visualizza la versione di SASS installata). Si otterrà una stringa di testo simile alla seguente (fig. 4):

Sass 3.4.17 (Selective Steve)
fig.4 - Comando di visualizzazione della versione SASS installata.
fig.4 – Comando di visualizzazione della versione SASS installata.

A questo punto SASS è disponibile sul computer ed è possibile eseguire la compilazione da riga di comando.

Integrare SASS in NetBeans

Anche l’integrazione di SASS in NetBeans risulta molto semplice. Seguire i passi elencati di seguito, facendo riferimento alle figure associate:

  1. Aprire NetBeans, aprire un progetto e selezionare la voce di menu: File > Project Properties (<nomeProgetto>)
  2. Selezionare la categoria “CSS Preprocessor” (fig. 5)
  3. Cliccare sul bottone “Configure Executables…” in alto a destra (sempre fig. 5)
  4. Nel campo “Sass path” inserire il percorso completo del file “sass.bat”, che è collocato nella sottocartella “bin” del path specificato in fase di installazione di Ruby (fig. 1). Vedere fig. 6 in merito alla compilazione del campo “Sass path”.
  5. Uscire cliccando sui bottoni “OK” e “OK”.
fig.5 - Proprietà progetto in NetBeans
fig.5 – Proprietà progetto in NetBeans
fig.6 - Opzioni per i CSS preprocessor in NetBeans
fig.6 – Opzioni per i CSS preprocessor in NetBeans

A questo punto è possibile compilare i file .scss in NetBeans.

Se si mantiene l’opzione “Compile Sass File on Save” (vedere fig.5) i file .css verranno rigenerati ad ogni salvataggio dei corrispondenti file .scss.

Di default è previsto che i file .scss siano inseriti nella cartella scss nella root del progetto e i file .css compilati nella cartella css, sempre nella root del progetto. Se si utilizzano cartelle diverse, indicarle nelle opzioni del preprocessore (fig. 5).

Come utilizzare GIT via SSH

Premessa

Questo post descrive come ho attivato il protocollo SSH su register.it per poter utilizzare il software di controllo di versione GIT sul mio sito WordPress.

Perché utilizzare WordPress con GIT

Quando si utilizza un ambiente di sviluppo per un sito WordPress, prima o poi si incorre nella necessità di riportare non solo le nuove modifiche dallo sviluppo alla produzione, ma anche gli aggiornamenti fatti direttamente in produzione, come le nuove release di WordPress, temi e plugin, nell’ambiente di sviluppo (unitamente alle variazioni al database).

Un modo per gestire la bidirezionalità degli aggiornamenti può essere quello di utilizzare il software per il controllo di versione GIT.
Per poter eseguire i comandi GIT sull’host di produzione è necessario aprire una shell testuale (detta bash) tramite il protocollo SSH. Vediamo come fare.

Predisporre l’host di produzione all’uso di SSH

Per chi si utilizza register.it per l’hosting del proprio sito web, per poter attivare il protocollo SSH è necessario acquistare l’hosting (nel mio caso Linux) “advanced”; costa un po’ di più, ma permette di gestire fino a 10 diversi domini, invece dei 5 permessi dall’hosting “base”.
Una volta acquistata l’opzione “advanced”, nel pannello di controllo compare la voce “Accesso SSH”, che permette l’accesso alla pagina di configurazione di SSH:

Voce "Accesso SSH" del CPanel di register.it
Voce “Accesso SSH” del CPanel di register.it

Nella pagina di configurazione sono indicati il nome dell’host e della porta per la connessione SSH e si viene subito avvisati che l’accesso via password non è consentito, mentre è consentito quello via chiave.

Ciò significa che deve essere generata una coppia di chiavi, di cui una (detta “pubblica”) rimane sul server e una (detta “privata”) dev’essere copiata sul computer client, ovvero quello che deve accedere via SSH all’host (per maggiori informazioni sulle chiavi pubbliche/private vedere cos’è la crittografia asimmetrica).

  • Per generare le chiavi, cliccare sul bottone “Gestisci chiavi SSH” in fondo alla pagina.
  • Il sito apre la nuova pagina “Gestisci chiavi SSH” in cui si deve cliccare su “Genera una nuova chiave”.
  • Il sito apre la nuova pagina “Generazione di una chiave pubblica” in cui si deve inserire:
    • il nome della chiave (il valore predefinito è “id_rsa”, io utilizzo “id_rsa_2048_nomeutente” (dove nomeutente è l’utente che utilizzo per accedere all’hosting linux);
    • una password sicura (in terminologia SSH “passphrase”), che deve essere ripetuta nel campo successivo della form e salvata in un cassetto protetto della propria scrivania (si è caldamente invitati a utilizzare il generatore di password presente nella pagina);
    • il tipo e la lunghezza della chiave che sarà generata (io lascio i valori predefiniti RSA e 2048).
  • Infine, cliccare sul bottone “Genera chiave” per ottenere la coppia di chiavi pubblica/privata, che vengono salvate nella cartella “.ssh” nella root del proprio sito.
  • Il sito fornisce una pagina con l’esito dell’operazione; cliccare su “”indietro”.
  • Il sito ritorna sulla pagina “Gestisci chiavi SSH”, dove adesso compaiono i nomi delle due chiavi generate.
  • Nella sezione “Chiavi pubbliche” cliccare sul link “Gestione” a destra della chiave, quindi il bottone “Authorize” nella nuova pagina e infine il bottone “Indietro” dopo la risposta “Per la chiave “id_rsa_2048_nomeutente.pub” è stata concessa l’autorizzazione”.
  • Il sito ritorna sulla pagina “Gestisci chiavi SSH”, dove adesso a destra del nome della chiave compare la scritta “authorized”.

Predisporre il computer client all’uso di SSH

Si deve ora configurare il client per accedere all’host via SSH e poter digitare i comandi di GIT. Innanzitutto si deve scaricare la chiave privata sul proprio computer.

  • Nella sezione “Chiavi private” cliccare il link “Visualizza/scarica” in fondo a destra nella riga della chiave.
  • Il sito apre la pagina  “Visualizza o scarica chiavi SSH”. Cliccare il bottone “Scarica chiave” e salvare la chiave “id_rsa_2048_nomeutente” in una cartella sicura (ovvero di cui viene tenuto un backup) del proprio computer.
  • Salvare anche la chiave in formato .ppk (viene utilizzata dal tool puTTY, trattato più avanti): inserire nell’apposito campo la password generata in precedenza (la passphrase) e cliccare su  “Converti”.
  • Il sito apre una pagina con visualizzata la chiave in formato .ppk; cliccare su “Scarica chiave” e salvare la chiave .ppk nella stessa cartella sicura dove è stata salvata la chiave privata, quindi cliccare su “Torna a gestisci chiavi”.

Si deve ora configurare un client SSH. il software più diffuso a questo scopo in ambiente Windows è il tool gratuito puTTY,  scaricabile da qui sia a 32-bit che a 64-bit. Dopo aver scaricato ed installato puTTY è necessario configurarlo, impostando le seguenti opzioni:

  • Sezione “Session”: impostare il nome e la porta dell’host (quelli indicati nella pagina di configurazione sul sito di produzione):
  • Sezione “Connection > Data”: impostare lo username per l’Auto-login (lo stesso utilizzato per accedere al CPanel sul sito di produzione). Dato che l’autenticazione è fatta via chiave, il nome utente serve solo ad indicare all’host a quale directory accedere.
  • Sezione “Connection > SSH > Auth”: inserire il nome della chiave .ppk scaricata in precedenza, completo dell’intero path:
  • Tornare alla sezione “Session”, inserire un nome per la sessione appena configurata nel campo “Saved session” (io inserisco un mnemonico dell’host di produzione, ad esempio “register.it”) e cliccare sul bottone “Save” (per le sessioni successive, cliccare su “Load”, per ricaricare i parametri).

Per avviare una sessione, cliccare sul bottone “Open”. puTTY apre una bash nella quale va inserita la password con cui si è generata la chiave (“passphrase”). L’host restituisce il prompt “~” (ambiente Linux), che indica che si è posizionati nella home dell’utente. Ora è sufficiente spostarsi sulla cartella che contiene la root del proprio sito e digitare i comandi GIT.

Accedere al repository GIT sull’host di produzione da NetBeans

Dopo averlo inizializzato sull’host di produzione, il repository GIT deve essere clonato sul computer utilizzato per lo sviluppo. Se si utilizza l’IDE NetBeans, questa operazione si può eseguire selezionando sul menu principale le voci Team > Remote > Clone. NetBeans apre una form per l’accesso al repository di produzione. Compilare i diversi campi come indicato di seguito:

  • Repository URL – inserire il valore: ssh://nomehost:porta/~/cartella
  • Username – inserire il nome utente utilizzato per accedere al CPanel
  • Private Key File – inserire il nome della chiave privata (non quella con suffisso .ppk) scaricata in precedenza, completo dell’intero path
  • Passphrase: inserire la passphrase
  • Clone into: inserire il path locale che conterrà il progetto di sviluppo (dev’essere una directory vuota)

Cliccare sul bottone “Successivo”, quindi compilare le form seguenti. Al termine, NetBeans crea una copia del repository in locale.

A questo punto è possibile trasferire le modifiche dallo sviluppo alla produzione e viceversa, tramite i comandi di GIT.

Come attivare XDebug su Ubuntu-XAMPP

Se hai necessità di attivare XDebug su un server Ubuntu con un ambiente XAMPP e hai provato a cercare supporto in rete, avrai già avuto modo di scoprire che in Internet ci sono ben poche informazioni su come farlo. E quelle che ci sono, sono tra loro discordanti, se non errate.

Ecco allora qui di seguito le istruzioni su come attivare XDebug in una installazione XAMPP su Ubuntu.
Leggi tutto “Come attivare XDebug su Ubuntu-XAMPP”