Nelle precedenti lezioni abbiamo visto passo a passo come sviluppare un sito Web grazie all'utilizzo di Visual Studio Code che, come abbiamo capito, è un grande alleato di sviluppatori e Web designer in quanto fornisce tantissimi strumenti che facilitano il lavoro e permettono di ottimizzare i tempi.
Tra le estensioni disponibili all'interno del repository di Visual Studio Code abbiamo testato Live Server che consente di visualizzare i file direttamente all'interno del browser. Permettendo quindi di osservare l'effettivo risultato finale.
Questo strumento è molto comodo e utile in quanto consente di visualizzare in uno spazio locale il lavoro che stiamo svolgendo. Cosa dovremmo fare però se invece volessimo visualizzare e modificare il nostro lavoro online?
Come modificare un sito Web online con Visual Studio Code
La gestione e la modifica di un sito Web pubblicato online (in produzione) sono parte integrante del lavoro degli sviluppatori. Tuttavia, trovare gli strumenti giusti per semplificare questo processo può fare la differenza in termini di efficienza e produttività.
In questa lezione, esploreremo quindi Visual Studio Code, uno degli editor di codice più popolari, insieme all'estensione FTP-Simple, per apportare modifiche a un sito Web in modo rapido e conveniente direttamente sul server dell'hosting.
Quando si tratta di modificare un sito Web in remoto, il download dei file, la modifica locale e poi il caricamento sul server possono essere dispendiosi in termini di tempo e complicati. Fortunatamente, con l'aiuto di Visual Studio Code troviamo diverse estensioni in grado di aiutarci e semplificare la procedura.
Prima di concentrarci sul funzionamento della nuova nuova estensione è fondamentale disporre di uno spazio hosting dove poter pubblicare i nostri file. In particolare avremo bisogno delle seguenti informazioni:
- Host.
- Username.
- Password.
Come pubblicare un sito Web online con Visual Studio Code?
Partiamo quindi con l'installazione dell'estensione protagonista di questa lezione chiamata FTP-simple disponibile all'interno del repository di Visual Studio Code.
A seguito dell'attivazione possiamo analizzare le attività che ci permetterà di effettuare:
- caricamento dei file all'interno di uno specifico spazio Web.
- Modifica di file caricati online.
- Cancellazione dei file presenti online.
- Rinominare file di lavoro online.
- Download dei file dal server.
Ora che abbiamo introdotto questo nuovo strumento di Visual Studio Code siamo pronti ad effettuare la nostra prima configurazione. Utilizziamo la scorciatoia da tastiera F1, digitiamo ftp-simple e selezioniamo la voce "CONFIG".
Si aprirà un nuovo file di codice con le seguenti informazioni:
[
{
"name": "localhost",
"host": "",
"port": 21,
"type": "ftp",
"username": "",
"password": "",
"path": "/",
"autosave": true,
"confirm": true
}
]Come avrai intuito, non dovremo far altro che inserire le nostre credenziali di configurazione all'interno dei campi richiesti. In questo modo potremo definire all'interno di quale server saranno caricati i file che abbiamo creato. Una volta terminata la configurazione, possiamo salvare le modifiche effettuate.
A questo punto andiamo all'interno del file index.html che compone la home page del nostro sito. Clicchiamo con il tasto destro del mouse e selezioniamo l'opzione "Upload to FTP server".
Fatto ciò selezioniamo la configurazione che abbiamo creato poco fa, raggiungiamo il percorso all'interno del quale vogliamo che il nostro file venga caricato ed il gioco è fatto.
A questo punto non dovremo far altro che raggiungere l'indirizzo del nostro sito direttamente online e la pagina HTML appena caricata sarà visibile.
Noteremo che la visualizzazione non sarà ottimale in quanto mancano alcuni elementi da aggiungere, ovvero il file CSS e tutte le immagini. Procediamo quindi con l'upload di tutto il resto.
Ci posizioniamo sulla cartella images (che contiene tutte le immagini del sito) e, sempre cliccando con il tasto destro del mouse, selezioniamo l'opzione "Upload to FTP server".
Facciamo la stessa cosa con il file css ed otteniamo in questo modo la corretta visualizzazione del sito Web in quanto tutto è di nuovo correttamente collegato.
Possiamo infine caricare anche tutti gli altri file in un'unica volta selezionando gli elementi rimanenti ed effettuando ancora una volta l'upload attraverso l'estensione FTP-simple.
A questo punto il nostro progetto è stato pienamente caricato online all'interno dello spazio server Questo vuol dire che per ogni aggiornamento o modifica che faremo da qui in avanti potremo centralizzare le operazioni direttamente attraverso Visual Studio Code.
Rinominare e cancellare file online
FTP-simple permette anche di rinominare i file e di cancellarli all'occorrenza. Ancora una volta senza dover passare da un programma di ftp transfer e gestendo direttamente le modifiche attraverso il code editor Visual Studio Code.
Per rinominare un file non dovremo far altro che selezionarlo, cliccare su di esso con il tasto destro del mouse e selezionare la voce "Change the file name from FTP".
Arrivati a questo punto dovremo selezionare il percorso che riconduce al file in questione all'interno del nostro spazio FTP.
Indichiamo quindi il nome che vogliamo dare al file e clicchiamo il tasto invio.
A questo punto anche all'interno della cartella presente online sarà cambiato il nome del file.
Infine, se avessimo la necessità di cancellare un file presente all'interno del hosting potremo ancora una volta utilizzare le funzionalità di FTP-simple tramite la voce chiamata "Delete File".
In questo modo elimineremo il file dalla directory presente all'interno dello spazio hosting.
In conclusione Visual Studio Code è un ottimo alleato per la scritture di codice. Grazie all'estensione FTP-simple sarà possibile caricare online e mantenere aggiornati i file con un unico programma, risparmiando tempo e ottimizzando il nostro lavoro.
