Startovací balíček pro nové projekty v rámci kurzu JavaScript #2 od Czechitas.
Pro správné fungování balíčku měj nainstalovanou LTS verzi Node.js (alespoň 10.x a novější)
- Vytvoř si na svém GitHubu nový repozitář a nějak si ho pojmenuj (např. js-lekce-6, ukol3-knihovna, apod.).
- Při vytváření repozitáře nezaškrtávej volbu Initialize this repository with README*.
- Objeví se tvůj nový prázdný repozitář, kde máš hned na úvodní stránce několik možností. Vyber poslední z nich Import code from another repository - klikni na tlačítko Import code.
- Na následující obrazovce do pole Your old repository’s clone URL zadej
https://github.com/lrolecek/javascript2-start
a klikni na zelené tlačítko Begin import. - Chvilku to potrvá, ale nakonec se objeví hlášení, že je vše hotovo. Kliknutím na odkaz se jménem tvého repozitáře ho otevřeš.
- V repozitáři s naimportovaným kódem klikni na zelené tlačítko Clone or download a vyber volbu Open in desktop, aby se ti repozitář zkopíroval k tobě na disk.
- V aplikaci GitHub Desktop kliknutím na Open in VS Code otevřeš složku s projektem v editoru.
- V editoru otevři terminál (příkazový řádek) - klávesovou zkratkou
Ctrl ~
nebo v menu volbouTerminal > New Terminal
. - Spusť
npm install
, aby se ti nainstaloval Webpack, Babel, a vše potřebné.
- HTML a CSS upravuj v kořenové složce projektu v souboru index.html
- JavaScript edituj uvnitř složky /src, výchozí soubor se vždy jmenuje index.js, ale podle potřeby můžeš vytvářet další .js soubory a do indexu je importovat.
- Pomocí příkazu
npm run serve
v terminálu spustíš sekvenci příkazů, která zkompiluje tvůj zdrojový kód, spustí lokální webový server a otevře tvůj projekt v prohlížeči. - Webový server automaticky čeká na jakékoliv změny v javascriptovém kódu. Pokud v editoru upravíš svůj program, proběhne automatická kompilace a samo se obnoví okno prohlížeče. V případě, že budeš měnit HTML nebo CSS, musíš obnovení okna provést ručně.
- Běžící server v terminálu ukončíš stiskem
Ctrl C
.
Lokální webový server pro vývoj (viz. výše) kompiluje zdrojový kód pouze do paměti počítače a výsledné soubory nikam neukládá. Pokud bys chtěla dokončený projekt vystavit někam do internetu, musíš projekt tzv. sestavit (build). Postupuj následovně:
- V terminálu zadej příkaz
npm run build
- to v projektu vytvoří složku /dist, do které se umístí zkopilovaný javascriptový kód. - Na webhosting dle tvého výběru zkopíruj:
- soubor index.html
- soubor style.css
- složku /dist