Przejdź do głównej zawartości

Rozwijaj i buduj

Masz już projekt Astro? To czas zacząć budować! 🚀

Aby wprowadzić zmiany w swoim projekcie, otwórz folder projektu w edytorze kodu. Praca w trybie develop z uruchomionym serwerem dev pozwala widzieć aktualizacje strony podczas edycji kodu.

Możesz również dostosować swoje środowisko deweloperskie, np. skonfigurować TypeScript lub zainstalować oficjalne rozszerzenia edytora dla Astro.

Astro posiada wbudowany serwer deweloperski, który ma wszystko, czego potrzebujesz do pracy nad projektem. Polecenie CLI astro dev uruchamia lokalny serwer deweloperski, dzięki czemu będziesz mógł po raz pierwszy zobaczyć swoją nową stronę w akcji.

Każdy szablon startowy zawiera wstępnie skonfigurowany skrypt, który uruchomi astro dev za Ciebie. Po przejściu do katalogu projektu, użyj swojego ulubionego menedżera pakietów, aby uruchomić to polecenie i wystartować serwer deweloperski Astro.

Okno terminala
npm run dev

Jeśli wszystko przebiegło pomyślnie, Astro będzie teraz wyświetlać Twój projekt pod adresem http://localhost:4321/. Odwiedź ten link w przeglądarce i zobacz swoją nową stronę!

Astro monitoruje zmiany plików na żywo w katalogu src/ i aktualizuje podgląd strony podczas edycji kodu, więc nie musisz ponownie uruchamiać serwera. Zawsze będziesz mógł zobaczyć aktualną wersję swojej strony w przeglądarce podczas, gdy serwer dev jest uruchomiony w tle.

Podczas przeglądania strony w przeglądarce masz dostęp do paska narzędzi dev Astro, który pomaga m.in. analizować wyspy, wykrywać problemy z dostępnością oraz wspiera w innych aspektach pracy nad projektem.

Jeśli nie możesz otworzyć swojego projektu w przeglądarce po uruchomieniu serwera dev, wróć do terminala, w którym uruchomiłeś komendę dev i sprawdź wyświetloną wiadomość. Powinna cię ona poinformować o ewentualnych błędach lub alternatywnym adresie URL (innym niż http://localhost:4321/).

Aby zobaczyć, jak będzie wyglądać Twoja strona po zbudowaniu, zatrzymaj serwer dev (Ctrl + C) i uruchom odpowiednią komendę build w terminalu, zależnie od używanego menedżera pakietów.

Okno terminala
npm run build

Astro zbuduje gotową do wdrożenia wersję Twojej strony w osobnym folderze (domyślnie dist/ ) i wyświetli postęp w terminalu. Pojawią się też ewentualne błędy kompilacji. Jeśli TypeScript jest ustawiony na strict lub strictest, skrypt build sprawdzi również poprawność typów w projekcie.

Po zakończeniu budowania uruchom komendę preview (np. npm run preview), aby lokalnie podejrzeć zbudowaną wersję strony w przeglądarce.

Pamiętaj, że to podgląd kodu w stanie, w jakim znajdował się podczas ostatniego uruchomienia komendy build. To symulacja wyglądu strony po wdrożeniu. Późniejsze zmiany w kodzie nie będą widoczne w podglądzie, dopóki ponownie nie zbudujesz projektu.

Użyj (Ctrl + C), aby zakończyć podgląd i wpisać inną komendę w terminalu, np. ponownie uruchomić serwer dev, by wrócić do trybu deweloperskiego, który aktualizuje się na żywo podczas edycji kodu.

Przeczytaj więcej o interfejsie CLI Astro (EN) i komendach terminalowych, których używasz podczas pracy z Astro.

Gotowe! Możesz teraz zacząć tworzyć z Astro! 🥳

Oto kilka rzeczy, które warto teraz poznać. Możesz je czytać w dowolnej kolejności – albo na chwilę zostawić dokumentację i poeksperymentować w swoim projekcie. W razie pytań czy problemów zawsze możesz tu wrócić.

Poznaj poniższe przewodniki, aby dostosować środowisko pracy.

Zbuduj w pełni funkcjonalny blog Astro zaczynając od pustej strony dzięki samouczkowi wprowadzającemu (EN).

To świetny sposób, aby zobaczyć, jak działa Astro — przeprowadzi Cię on przez podstawy stron, układów, komponentów, routingu, wysp i nie tylko. Zawiera też opcjonalną część przyjazną dla początkujących, która pokazuje jak zainstalować potrzebne aplikacje, założyć konto GitHub i wdrożyć stronę.

Pomóż nam Społeczność Sponsor