BLOG O DESIGNU, O FRONTENDU, O HUDBĚ A O ŽIVOTĚ

Jak nastavit FTP ve WebStormu

Když jsem objevil WebStorm, jeden z největších kamenů úrazu pro mne bylo nastavení FTP. Ač je to jinak skvělý editor, docela mi trvalo, než jsem přišel na to, jak v něm FTP zprovoznit – nějakého schopného návodu jsem se nedogooglil, takže jsem to nakonec musel chtě nechtě nějak vykoumat sám. A ono je to v podstatě hodně jednoduché, člověk jen musí vědět, kam se dívat (což jsem právě na začátku netušil). Rád bych se s Vámi tedy podělil o stručný “step-by-step” návod, jak projekt propojit s Vaším FTP.

Začněme vytvořením nového projektu. Ačkoliv je přímo v nabídce i možnost vytvoření projektu z existujících souborů na FTP, v mém návodu se budu věnovat vytvoření FTP spojení v rámci nového projektu.

 

Vytvoření nového projektu

Vytvoření nového projektu

 

Po vybrání možnosti WebStorm uživatele konfrontuje modálním oknem žadonícím o základní údaje o projektu. V mém případě jsem jako jméno projektu zvolil FTPTest (lokace se mi již doplnila dle používané cesty automaticky) a jelikož jsem nechtěl vytvářet prázdný projekt, zvolil jsem jako typ projektu HTML5 Boilerplate.

 

Nový projekt - základní informace

Nový projekt – základní informace

 

Po potvrzení volby se WebStorm ještě zeptá na verzi Boilerplate a pak už pro nás milostivě vytvoří kýžený projekt.

 

Základní struktura projektu

Základní struktura projektu

 

Nyní můžeme přistoupit k nastavení FTP. Slovo FTP ale v nabídkách WebStormu jen tak nenajdete – vše, co potřebujeme, se ukrývá pod nenápadným “Deployment“. Nejsnazší přístup k příslušnému nastavení je skrze ovládací lištu, viz následující obrázek. Jak vidno, všechny dostupné akce jsou zatím zašedlé.

 

Cesta k nastavení FTP

Cesta k nastavení FTP

 

Konečně můžeme přistoupit k samotnému nastavení propojení projektu s FTP serverem. Na následujícím obrázku je okno s konfigurací.

V seznamu vlevo je vidět seznam existujících FTP účtů. Jak asi tušíte, zeleným pluskem nahoře můžete přidat nový, mínusem ho můžete zase smazat, ikonka s dvěma dokumenty značí duplikace a poslední ikonkou lze vybrané spojení nastavit jako “default”, což se dost hodí, neboť pak není třeba pokaždé vybírat ručně, na který server ze seznamu se mají soubory nahrát.

 

Nastavení FTP serveru

Nastavení FTP serveru

 

V pravé části okna nás na kartě “Connection” čeká samotné nastavení zvoleného spojení. Předpokládám, že není potřeba příliš vysvětlovat účel jednotlivých inputů – každý, kdo FTP někdy někde nastavoval, tyto pojmy musí znát. Dobrou utilitkou je tlačítko “Test FTP connection“, které odhalí, zda jsou údaje zadány správně a na FTP se lze připojit.

Jen tato obrazovka nám však k úspěšné konfiguraci nestačí, ještě je třeba zavítat na kartu “Mappings“.

 

Konfigurace mapování cest

Konfigurace mapování cest

 

Na této obrazovce je zapotřebí nastavit cestu, kam se budou soubory ukládat lokálně, a cestu na Vašem serveru, kam se budou soubory z lokálu nahrávat. Mimo jiné lze také “dospecifikovat” URL projektu (což v mém případě není nutné, protože je v tomto konkrétním případě shodná s “Root URL” z předchozího screenshotu.

Nyní by již Vaše FTP spojení mělo být funkční, ale pro úplnost je dobré navštívit ještě jedno okno s nastavením, a to konkrétně “Tools – Deployment – Options“. Vybafne na Vás následující obrazovka:

 

Nastavení přenosu souborů

Nastavení přenosu souborů

 

Osobně si vždy nastavuji hodnotu pole “Upload changed files automatically to the default server” na “On explicit save action (CTRL+S)“, což zaručí, že se soubor po každém uložení automaticky nahraje na Váš server. A pracujete-li například se SASSem, je nutností zakliknout i “Upload external changes“, čímž docílíte toho, že se Vám na server budou automaticky uploadovat i soubory vzniklé kompilací. Ostatní položky nechávám v původních hodnotách a více je zde vysvětlovat nebudu, myslím že jejich názvy mluví samy za sebe.

Pak již stačí projekt překopírovat pomocí následujícího příkazu na server.

 

Upload na server

Upload na server

 

Pro kontrolu si můžete z nabídky otevřít obsah FTP přímo ve WebStormu příkazem “Browse Remote Host“. Pokud se vše zdařilo, měli byste vidět něco jako na následujícím screenshotu:

 

Zobrazení souborů na serveru

Zobrazení souborů na serveru

 

A to je vše, víc není třeba. Pokud jste nic nezkazili, máte v tomto momentě plně funkční FTP spojení a můžete vše vesele cpát rovnou na server. Tak ať to jde od ruky!