AstroJS baasprojekti loomine

Selles õpetuses saate teada, kuidas luua oma esimene projekt AstroJS-iga. Kasutame tööriista npm-loodud astro, et luua serverirakendus, mis suudab suhelda OpenAI API-ga. Saate tutvuda genereeritud projekti struktuuriga ja saada lühikese ülevaate selle käivitamisest. Alustame kohe!

Põhilised järeldused

• AstroJS-is uue projekti loomine on lihtne ja seda toetab interaktiivne viisard.
• Projekti loomine hõlmab sõltuvuste (NPM-moodulite) seadistamist ja projekti nime määramist.
• AstroJS-i sisseehitatud kuumlaadimisfunktsioon võimaldab teil muudatusi reaalajas näha, ilma et peaksite lehte käsitsi uuesti laadima.

Samm-sammult juhend

AstroJS-projekti seadistamiseks järgige neid samme:

Esiteks avage oma terminal. Veenduge, et saate käsuviiba käskusid täita. Esimene samm on käsu npm create astro sisestamine. See käsk käivitab viisardi, mis aitab teil uue projekti loomisel. 

Viisardi käivitamisel võidakse teil paluda teatud npm-paketi installimist kinnitada. Kui teil seda küsitakse, kinnitage installimine.

Järgmisena küsitakse teilt uue projekti nime. Meie puhul on projekti nimi lihtsalt ai-chat. Sisestage soovitud nimi ja vajutage sisestusklahvi.

Seejärel küsib viisard, kas soovite installida näidisfailid. Kuna me seda vajalikuks ei pea, valige "n" ehk "ei" ja jätkake.

Järgmine samm on vajalike sõltuvuste installimine. Küsitakse, kas soovite vastavad npm-moodulid otse installida. Soovitatav on kinnitada, et automatiseerida installimisprotsess.

Pärast sõltuvuste installimist küsib viisard, kas soovite kasutada TypeScript'i. Soovitatav on TypeScript'i kasutamine keelata, kuna see võib suurendada keerukust. Vajadusel saate hiljem alati TypeScript'i lisada.

Järgmine samm on otsustada, kas soovite kasutada algset repositooriumi. Tavaliselt pole see alguses vajalik, seega valige siingi "n" ehk "ei".

Kui kõik küsimused on vastatud, saate viisardilt kena lõpusõnumi. Selle kinnitusega on projekti põhiosa nüüd lõpule viidud.

Nüüd vaatame lähemalt loodud projekti struktuuri. Avage projekti kaust cd ai-chat, et uurida loodud struktuuri.

Projekti kaustast src leiate tegelikud Astro-koodid. Siin on fail nimega index.astro, mis toimib teie avalehena ja sellega tegeleme kohe.

Astro-projekti kohalikul käivitamiseks peate käivitama skripti. Kasutage käsku npm run dev. See käivitab arendusserveri, mis pakub rakenduse.

Kui arendusserver töötab, kuvatakse teile aadress, tavaliselt localhost:3000. Saate selle aadressi avada oma veebibrauseris, et rakendust vaadata.

Saate aadressi kopeerida ja brauserisse sisestada. Alternatiivselt võite terminalis aadressil teha juhtklõpsu (või Macil käsku klõpsata), et see otse brauseris avada.

Kui kõik on õigesti seadistatud, peaksid nägema oma Astro lehte, mis näitab, et server töötab edukalt.

Näiteks, kuidas lihtne muudatusi teha, saate muuta teksti index.astro-siseselt. Muudame tekstile ai Chatbot ja kontrollige brauseris, kas muudatus on nähtav.

Pärast muudatuse salvestamist värskendatakse lehte brauseris automaatselt, ilma et peaksite seda käsitsi uuesti laadima. See on üks AstroJS suurepärasemaid funktsioone!

See Hot-Reload funktsioon võimaldab teil muudatusi reaalajas näha, mis kiirendab oluliselt arendusprotsessi.

Teie esimene Astro projekt on nüüd töökorras ja saate teha täiendavaid kohandusi või sellele rajada. Index.astro fail teisendatakse HTML leheks ja tarnitakse brauserile. Nüüd saate arendusega alustada ja lisada uusi funktsioone.

Järgmise korrani, kui uurime selle põneva projekti järgmisi samme!

Kokkuvõte

Selles õpetuses olete õppinud, kuidas luua uus AstroJS projekt käsu abil npm create astro. Alates sõltuvuste installimisest kuni kuumjaotuse kasutamiseni olete läbinud kõik põhietapid, et käivitada oma esimene Astro leht.