Pierwsze uruchomienie

Aby stworzyć nowy projekt na fronthacku użyj następującej komendy:

fronthack init

Po zapytaniu o nazwę katalogu, stworzy nową przestrzeń plików i pobierze wszystkie zależności. Utworzony projekt będzie na początku pusty. Znajdziesz w nim tylko jedną stronę index.html, oraz dwa przykładowe komponenty, które przydają się praktycznie na każdym projekcie.

Nawiguj do folderu, w którym stworzyłeś nowy projekt. Uruchom w nim następujący skrypt:

npm run dev

Uruchomiłeś właśnie po adresem localhost:8000 serwer na localhoście, który śledzi zmiany wprowadzane w plikach, kompiluje na bierząco Sass i Mustache do CSS i HTML, oraz robi więcej ciekawych rzeczy, ale o tym później. Dlaczego do wygenerowania używamy CLI, a do uruchamiania serwera skryptu Npm? Bo takie są standardy i warto się do nich przyzwyczajać. Tak działa chociażby create-react-app.

Teraz otwórz w swoim ulubiony code editorze plik src/sass/variables.sass. Zmień kolor zmiennej $brand-primary: na jakikolwiek inny, np red. Zapisz plik i przejdź do przeglądarki. Vuala! Zmieniony kolor już tam jest, bez odświeżania strony. Otwórz teraz plik src/index.html. Usuń z niego coś, zapisz. Przejdź do przeglądarki. Zniknęło? Świetnie! Znaczy, że Fronthack działa poprawnie.


Improve this page