Salta ai contenuti

Crea il tuo primo progetto Astro

Preparati a…

  • Esegui la procedura guidata create astro per creare un nuovo progetto Astro
  • Avvia il server Astro in modalità di sviluppo (dev)
  • Visualizza un'anteprima live del tuo sito web nel tuo browser

Avvia la procedura guidata di installazione di Astro

Il modo preferito per creare un nuovo sito Astro è attraverso la nostra procedura guidata di installazione create astro.

  1. Nella riga di comando del tuo terminale, esegui il comando seguente utilizzando il tuo package manager preferito:

    # crea un nuovo progetto con npm
npm create astro@latest

  2. Digita y per installare create-astro.

  3. Quando il prompt ti chiede dove creare il progetto, digita il nome di una cartella per creare una nuova directory per il tuo progetto, es../tutorial

    :::noteUn nuovo progetto Astro può essere creato solo in una cartella completamente vuota, quindi scegli un nome per la tua cartella che non esista già!:::

  4. Vedrai un breve elenco di modelli di base tra cui scegliere. Usa i tasti freccia (su e giù) per navigare fino al template minimale (vuoto), quindi premi Invio (Enter) per inviare la tua scelta.

  5. Quando il prompt ti chiede se installare o meno le dipendenze, digita y.

  6. Quando il prompt ti chiede se inizializzare o meno un nuovo repository git, digita y.

Quando la procedura guidata di installazione è completa, non hai più bisogno di questo terminale. Ora puoi aprire VS Code per continuare.

Apri il tuo progetto in VS Code

  1. Apri VS Code. Ti verrà richiesto di aprire una cartella. Scegli la cartella che hai creato durante la procedura guidata di installazione.

  2. Se è la prima volta che apri un progetto Astro, dovresti vedere una notifica che ti chiede se desideri installare le estensioni raccomandate. Clicca per vedere le estensioni raccomandate e scegli l'estensione di supporto linguistico Astro. Questo fornirà evidenziazione della sintassi e completamenti automatici per il tuo codice Astro.

  3. Assicurati che il terminale sia visibile e di poter vedere il prompt dei comandi, come ad esempio:

    user@machine:~/tutorial$

    :::tip[Scorciatoia da tastiera]Per attivare/disattivare la visibilità del terminale, usa Ctrl + J (macOS: Cmd ⌘ + J).:::

Ora puoi usare il terminale integrato in questa finestra, invece dell'app Terminale del tuo computer, per il resto di questo tutorial.

Esegui Astro in modalità dev

Per visualizzare in anteprima i file del tuo progetto come un sito web mentre lavori, avrai bisogno che Astro sia in esecuzione in modalità di sviluppo (dev).

Avvia il server dev

  1. Esegui il comando per avviare il server dev di Astro digitando nel terminale di VS Code:

    npm run dev

    Ora dovresti vedere la conferma nel terminale che Astro è in esecuzione in modalità dev. 🚀

Visualizza un'anteprima del tuo sito web

I file del tuo progetto contengono tutto il codice necessario per visualizzare un sito web Astro, ma il browser è responsabile della visualizzazione del tuo codice come pagine web.

  1. Clicca sul link localhost nella finestra del tuo terminale per vedere un'anteprima live del tuo nuovo sito web Astro!

    (Astro utilizza http://localhost:4321 di default se la porta 4321 è disponibile.)

    Ecco come dovrebbe apparire il sito web starter "Progetto Vuoto" di Astro nell'anteprima del browser:

    Una pagina bianca vuota con la parola Astro in alto.

:::tip[Utilizzo del server dev di Astro]

Mentre il server Astro è in esecuzione in modalità dev, NON sarai in grado di eseguire comandi nella finestra del terminale. Invece, questo pannello ti darà un feedback mentre visualizzi l'anteprima del tuo sito.

Puoi interrompere il server dev in qualsiasi momento e tornare al prompt dei comandi digitando Ctrl + C nel terminale.

A volte il server dev si interrompe da solo mentre stai lavorando. Se la tua anteprima live smette di funzionare, torna al terminale e riavvia il server dev digitando npm run dev.:::

Checklist

Risorse

Contribuisci Comunità Sponsor