Skapandet av det grundläggande AstroJS-projektet

I den här självstudie lär du dig hur du skapar ditt första projekt med AstroJS. Vi använder verktyget npm create astro för att generera en serverapplikation som kan interagera med OpenAI API. Du kommer att utforska strukturen av det genererade projektet och få en kort översikt över hur du kan få det att fungera. Låt oss börja!

Viktigaste insikter

• Att skapa ett nytt projekt i AstroJS är enkelt och stöds av en interaktiv guide.
• Projektskapandet involverar konfiguration av beroenden (NPM-moduler) och att ange projektets namn.
• AstroJS inbyggda Hot-Reload-funktion möjliggör att du kan se ändringar i realtid utan att behöva ladda om sidan manuellt.

Steg-för-steg-guide

För att sätta upp ditt AstroJS-projekt, följ följande steg:

Först och främst bör du öppna din terminal. Se till att du kan köra kommandon. Första steget är att ange kommandot npm create astro. Detta kommando startar en guide som hjälper dig att skapa det nya projektet. 

När guiden startas kan du bli ombedd att bekräfta installationen av ett specifikt npm-paket. Om du ombeds, bekräfta installationen.

Därefter kommer du att ombedd att ange ett namn för ditt nya projekt. I vårt fall kallar jag helt enkelt projektet ai-chat. Ange det önskade namnet och tryck på returtangenten.

Guiden kommer sedan att fråga om du vill installera exempel-filer (sample files). Eftersom vi inte behöver det, välj n för "nej" och fortsätt.

Nästa steg är att installera de nödvändiga beroendena. Du kommer att frågas om du vill installera de aktuella npm-modulerna direkt. Det rekommenderas att du svarar ja för att automatisera installationsprocessen.

Efter att beroendena har installerats kommer guiden att fråga om du vill använda TypeScript. Det rekommenderas att neka användningen av TypeScript eftersom detta kan öka komplexiteten. Du kan alltid lägga till TypeScript senare om du behöver det.

Ytterligare ett steg är att besluta om du vill använda ett initialt repository. I allmänhet är detta inte nödvändigt i början, så välj även här n för "nej".

När alla frågor har besvarats får du ett trevligt avslutningsmeddelande från guiden. Med den här bekräftelsen är den grundläggande delen av projektet nu klar.

Nu ska vi titta på strukturen i det skapade projektet. Byt till projektmappen med cd ai-chat för att utforska den skapade strukturen.

Du kan visa projektstrukturen med kommandot tree. Det ger dig en översikt över vilka filer och mappar som har skapats.

I din projektmapp hittar du under källkoden src den faktiska Astro-koden. Här finns filen index.astro, som fungerar som din startsida och vi kommer att gå igenom den strax.

För att köra ditt Astro-projekt lokalt måste du köra ett skript. Använd kommandot npm run dev. Detta kommando startar en utvecklingsserver som tillhandahåller applikationen.

När utvecklingsservern körs kommer en adress att visas, oftast localhost:3000. Du kan öppna denna adress i din webbläsare för att visa applikationen.

Du kan kopiera adressen och klistra in den i webbläsaren. Alternativt kan du högerklicka (eller cmd-klicka på Mac) på adressen i terminalen för att öppna den direkt i webbläsaren.

När allt är korrekt inställt bör du se din Astro-sida som visar att servern körs korrekt.

För att visa hur enkelt det är att göra ändringar, kan du redigera texten i index.astro. Låt oss ändra texten till ai Chatbot och kontrollera i webbläsaren om ändringen är synlig.

När du har sparat ändringen kommer sidan att uppdateras automatiskt i webbläsaren, utan att du behöver ladda om den manuellt. Det är en av de fantastiska funktionerna i AstroJS!

Denna Hot-Reload-funktion gör att du kan se ändringar i realtid, vilket markant snabbar upp utvecklingsprocessen.

Ditt första Astro-projekt är nu funktionsdugligt och du kan göra fler anpassningar eller bygga vidare på det. index.astro-filen konverteras till en HTML-sida och levereras till webbläsaren. Du kan nu börja utveckla och lägga till nya funktioner.

Vi ses nästa gång när vi utforskar nästa steg i detta spännande projekt!

Sammanfattning

I den här handledningen har du lärt dig hur du skapar ett nytt AstroJS-projekt med npm create astro. Från installation av beroenden till användning av Hot-Reload har du gått igenom alla grundläggande steg för att få din första Astro-sida att fungera.