Creatie van het AstroJS-basisproject

In deze handleiding leer je hoe je je eerste project met AstroJS kunt maken. We gebruiken de tool npm create astro om een servertoepassing te genereren die kan communiceren met de OpenAI API. Je zult de structuur van het gegenereerde project verkennen en een kort overzicht krijgen van hoe je het kunt laten werken. Laten we meteen beginnen!

Belangrijkste inzichten

• Het maken van een nieuw project in AstroJS is eenvoudig en wordt ondersteund door een interactieve wizard.
• Het maken van het project omvat het configureren van afhankelijkheden (NPM-modules) en het instellen van de projectnaam.
• De ingebouwde Hot-Reload-functie van AstroJS stelt je in staat om wijzigingen in real-time te zien, zonder dat je de pagina handmatig hoeft te herladen.

Stap-voor-stap-instructies

Om je AstroJS-project op te zetten, volg je deze stappen:

Open eerst je terminal. Zorg ervoor dat je commando's kunt uitvoeren. De eerste stap is om het commando npm create astro in te voeren. Dit commando start een wizard die je door het proces van het maken van het nieuwe project helpt. 

Bij het starten van de wizard wordt je mogelijk gevraagd om de installatie van een specifiek npm-pakket te bevestigen. Bevestig de installatie indien gevraagd.

Vervolgens wordt er om een naam voor je nieuwe project gevraagd. In ons geval noem ik het project gewoon ai-chat. Voer de gewenste naam in en druk op Enter.

De wizard vraagt vervolgens of je voorbeeldbestanden wilt installeren. Aangezien we dat niet nodig hebben, kies je voor n voor "nee" en ga je verder.

De volgende stap is het installeren van de benodigde afhankelijkheden. Je krijgt de vraag of je de bijbehorende npm-modules direct wilt installeren. Het wordt aanbevolen om dit te doen om het installatieproces te automatiseren.

Nadat de afhankelijkheden zijn geïnstalleerd, vraagt de wizard of je TypeScript wilt gebruiken. Het wordt aanbevolen om het gebruik van TypeScript te weigeren omdat dit de complexiteit kan verhogen. Je kunt altijd later TypeScript toevoegen als je het nodig hebt.

Een volgende stap is de beslissing of je een initiële repository wilt gebruiken. Over het algemeen is dit in het begin niet nodig, dus kies ook hier voor n voor "nee".

Zodra alle vragen zijn beantwoord, ontvang je een leuke afrondingsmelding van de wizard. Met deze bevestiging is het basisgedeelte van het project nu voltooid.

Laten we nu eens kijken naar de structuur van het gegenereerde project. Navigeer naar de projectdirectory met cd ai-chat om de gemaakte structuur te verkennen.

Je kunt de structuur van het project bekijken met het commando tree. Dit geeft je een overzicht van welke bestanden en mappen zijn gemaakt.

In je projectdirectory vind je onder src de daadwerkelijke Astro-broncodes. Hier is het bestand index.astro, dat als je startpagina fungeert en daar zullen we zo meteen meer over leren.

Om je Astro-project lokaal te laten draaien, moet je een script uitvoeren. Gebruik het commando npm run dev. Hiermee start je een ontwikkelingsserver die de applicatie beschikbaar maakt.

Zodra de ontwikkelingsserver actief is, wordt er een adres weergegeven, meestal localhost:3000. Je kunt dit adres in je webbrowser openen om de applicatie te bekijken.

Je kunt het adres kopiëren en in de browser plakken. Als alternatief kun je met een control+klik (of Command+klik op Mac) op het adres in de terminal klikken om het rechtstreeks in de browser te openen.

Als alles correct is ingesteld, zou je je Astro-pagina moeten zien, die aantoont dat de server succesvol draait.

Om te laten zien hoe eenvoudig het is om wijzigingen aan te brengen, kun je de tekst binnen index.astro aanpassen. Laten we de tekst veranderen in ai Chatbot en in de browser controleren of de wijziging zichtbaar is.

Nadat je de wijziging hebt opgeslagen, wordt de pagina in de browser automatisch vernieuwd, zonder dat je deze handmatig hoeft te herladen. Dit is een van de geweldige functies van AstroJS!

Deze Hot-Reload-functie maakt het mogelijk om wijzigingen in realtime te zien, wat het ontwikkelingsproces aanzienlijk versnelt.

Je eerste Astro-project is nu operationeel en je kunt verdere aanpassingen doen of erop voortbouwen. Het index.astro-bestand wordt geconverteerd naar een HTML-pagina en naar de browser gestuurd. Je kunt nu beginnen met ontwikkelen en nieuwe functies toevoegen.

Tot de volgende keer, wanneer we de volgende stappen in dit spannende project verkennen!

Samenvatting

In deze tutorial heb je geleerd hoe je met npm create astro een nieuw AstroJS-project creëert. Van het installeren van de afhankelijkheden tot het gebruik van de Hot-Reload, heb je alle basisstappen doorlopen om je eerste Astro-pagina online te krijgen.