Samotná instalace je popsána v oficiální dokumentaci - https://ionicframework.com/docs/intro/cli

Instalace níže je pouze přepis toho co je v oficiální dokumentaci. Bohužel pro některé části je třeba být administrátorem systému! - to většinou nejste na školních Windows a je třeba přidávat systémové proměnné pro váš účet do PATH.

<aside> ⚠️

Osobně doporučuji na Windows používat CMD místo PowerShell - jde o osobní preferenci a méně chybovou variantu u většiny problémů.

</aside>

Instalace přímo do vašeho environmentu

Pro instalaci Laravelu je nutné mít na vašem počítači nainstalované Node.js (NPM ). NPM a Node je nutné mít v přístupné pomocí příkazového řádku! Tedy před instalací musí fungovat tyto příkazy - verze se mohou lišit - doporučení je mít nejnovější verze.

• node -v (číslo verze musí být sudé! Liché jsou vývojové a nestabilní)
• npm -v

<aside> ⚠️

Pokud jediný příkaz nefunguje (nelze jej najít) nemůžete pokračovat dál!

Na Windows je potřeba přidat složku, kde je daný příkaz nainstalován do proměnných prostředí a to konkrétně do PATH. Pokud nejste administrátoři je nutné toto nastavit pouze pro váš účet.

Stejný problém může být i na jiných OS, na googlu najdete jak problém vyřešit přidáním částí do .bashrc nebo .zshrc (Linux, Mac) nebo do jiného terminálového Shellu řádku který používáte.

</aside>

Specifické problémy na MacOS

Skrze bezpečnost někdy bývá problém s instalací globálních modulů do NPM. je několik řešení jak to vyřešit, jedno z možných řešení je dostupné zde: https://dev.to/osalumense/fixing-global-npm-install-permissions-on-macos-21ll - na internetu existuje mnoho takových návodů, před tím něž něco děláte si zjistěte co vlastně děláte a co daný příkaz provede!

Samotná instalace Ionicu (s Angular frameworkem)

1. npm install -g @ionic/cli Tímto příkazem nainstalujeme globální balík pro instalaci Ionic CLI do NPM.

   1. POZOR! Příkaz ionic musí být opět dostupný jako npm nebo node! Pokud dostupný není, nastavte PATH tak aby obsahoval i globální složku s NPM moduly!

2. cd do složky kde chci vytvořit projekt (složka projektu se vytváří v dalším kroku).

3. ionic start <project-name> Vytvoříme projekt s názvem. <project-name> je námy dosazený název projektu (nepoužívejte háčky, čárky a mezery v názvu projektu).

   1. Pokud chceme generovat přímo i se šablonou, třeba tabs zvolíme ionic start <project-name> tabs
   2. Instalace skrze ionic start je popsána v oficiální dokumentafci. https://ionicframework.com/docs/developing/starting

   <aside> ☝ ionic start spustí většinou wizard v prohlížeči, tento wizard nedoporučuji používat!

   </aside>

4. Nastavíme si projekt dle potřeb

   1. Zvolit framework Angular
   2. Zvolit Standalone - režim NgModules je již deprecated!
   3. Další kroky podle vás a čekat na instalaci
   4. Instalace se nás může zeptat na některé akci, je potřeba učinit rozhodnutí. Pokud nevíte co daná akce dělá podívejte se na Google.

5. Přejdeme do složky projektu skrze cd a složka projektu která se vytvořila - viz postup popsaný v instalátoru.

6. ionic serve, npm start nebo ng serve Spustíme vývojový server.

   1. ten se zapne na nějaké adrese localhost nebo 127.0.0.1 a portu 8100 (4200 - ng). Pokud je port obsazený, zapne se druhý, většinou 8101 atd… (zeptá se jestli to má udělat nebo to přímo zapne). Port se může lišit podle použitého příkazu pro zapnutí!

<aside> ⚠️

Kroky 5. a 6. za normálních okolností vykonávám v IDE, tedy složku která se vytvořila otevřu v WebStormu a příkaz ionic serve zapínám až v příkazovém řádku uvnitř WebStormu. Jednodušší řešení je zapnout tlačítko play přímo ve WebStormu. Tím je vše na jednom místě a nemám milion otevřených oken.

Zapnutím tlačítka play místo příkazového řádku získáte možnost debugování (ikona brouka vedle play) - fyzicky provede npm start, který je jen alias pro ionic serve a ten zase pro ng serve a zapne run terminal, který nemá samostatné ovládání jako v případě klasického terminalu - výhoda je že vidím co běží jako proces v IDE a je v tom větší pořádek.

</aside>