Tworzenie podstawowego projektu AstroJS.

W tym samouczku nauczysz się, jak stworzyć swój pierwszy projekt z AstroJS . Wykorzystamy narzędzie npm create astro do wygenerowania aplikacji serwerowej, która może współpracować z API OpenAI. Będziesz miał okazję zbadać strukturę wygenerowanego projektu i uzyskać krótki przegląd tego, jak go uruchomić. Zaczynajmy!

Najważniejsze wnioski

• Tworzenie nowego projektu w AstroJS jest proste i jest wspierane przez interaktywny kreator.
• Tworzenie projektu obejmuje konfigurację zależności (modułów NPM) oraz określenie nazwy projektu.
• Wbudowana funkcja Hot-Reload w AstroJS umożliwia przeglądanie zmian na żywo, bez konieczności ręcznego odświeżania strony.

Instrukcja krok po kroku

Aby skonfigurować swój projekt AstroJS, postępuj zgodnie z poniższymi krokami:

Najpierw otwórz swoje terminal. Upewnij się, że możesz wykonywać polecenia. Pierwszym krokiem jest wpisanie polecenia npm create astro. To polecenie uruchamia kreatora, który pomoże Ci w tworzeniu nowego projektu. 

Początek kreatora może wymagać potwierdzenia instalacji określonego pakietu npm. Jeśli zostaniesz o to poproszony, potwierdź instalację.

Następnie zostaniesz poproszony o podanie nazwy dla nowego projektu. W naszym przypadku nazwę projektu po prostu nazywam ai-chat. Wprowadź wybraną nazwę i naciśnij klawisz Enter.

Następnie zostaniesz zapytany, czy chcesz zainstalować pliki przykładowe (sample files). Ponieważ nie jest to konieczne, wybierz n dla "nie" i kontynuuj.

Kolejnym krokiem jest instalacja niezbędnych zależności. Będziesz zapytany, czy chcesz zainstalować odpowiednie moduły npm bezpośrednio. Zaleca się potwierdzenie tej instalacji, aby zautomatyzować proces instalacji.

Po zainstalowaniu zależności kreator zapyta, czy chcesz użyć TypeScript. Zaleca się odrzucenie używania TypeScript, ponieważ może to zwiększyć złożoność. Możesz zawsze dodać TypeScript później, jeśli będzie to konieczne.

Następnym krokiem jest decyzja, czy chcesz użyć repozytorium początkowego. Zazwyczaj na początku nie jest to konieczne, więc także wybierz n dla "nie".

Po udzieleniu odpowiedzi na wszelkie pytania, dostaniesz miłą wiadomość końcową od kreatora. Z potwierdzeniem tym podstawowa część projektu została zakończona.

Teraz przyjrzymy się strukturze utworzonego projektu. Przejdź do katalogu projektu za pomocą cd ai-chat, aby zbadać utworzoną strukturę.

Możesz wyświetlić strukturę projektu za pomocą polecenia tree. To pozwoli Ci zobaczyć, jakie pliki i foldery zostały utworzone.

W katalogu projektu znajdziesz w folderze src właściwe kody Astro. Tutaj jest plik index.astro, który działa jako Twoja strona startowa i niedługo się nią zajmiemy.

Aby uruchomić lokalnie swoją aplikację Astro, musisz wywołać skrypt. Użyj polecenia npm run dev. To uruchamia serwer deweloperski, który udostępnia aplikację.

Po uruchomieniu serwera deweloperskiego zostanie wyświetlony adres, zazwyczaj localhost:3000. Możesz otworzyć ten adres w przeglądarce internetowej, aby wyświetlić aplikację.

Możesz skopiować adres i wkleić go do przeglądarki. Alternatywnie możesz kliknąć prawym przyciskiem myszy (lub użyć Command + Klik na Macu) na adresie w terminalu, aby otworzyć go bezpośrednio w przeglądarce.

Jeśli wszystko zostało poprawnie skonfigurowane, powinieneś zobaczyć swoją stronę Astro, co oznacza, że serwer działa poprawnie.

Aby pokazać, jak łatwo wprowadzić zmiany, możesz zmienić tekst w pliku index.astro. Zmieńmy tekst na ai Chatbot i sprawdźmy w przeglądarce, czy zmiana jest widoczna.

Po zapisaniu zmian, strona zostanie automatycznie zaktualizowana w przeglądarce, bez konieczności ręcznego przeładowania. Jest to jedna z wielu fantastycznych funkcji AstroJS!

Ta funkcja Hot-Reload pozwala na bieżące widzenie zmian, co znacząco przyspiesza proces rozwoju.

Twoje pierwsze projekt Astro jest teraz gotowe do użycia i możesz wprowadzać dalsze dostosowania lub nadal na nim budować. Plik index.astro zostanie przekonwertowany na stronę HTML i dostarczony do przeglądarki. Możesz teraz rozpocząć rozwój i dodawanie nowych funkcji.

Do zobaczenia następnym razem, gdy odkryjemy kolejne kroki tego ekscytującego projektu!

Podsumowanie

W tym samouczku nauczyłeś się, jak utworzyć nowy projekt AstroJS za pomocą npm create astro. Od instalacji zależności po korzystanie z funkcji Hot-Reload, przeszedłeś wszystkie podstawowe kroki, aby uruchomić swoją pierwszą stronę Astro.