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.

Nella riga di comando del tuo terminale, esegui il comando seguente utilizzando il tuo package manager preferito:
- npm
- pnpm
- Yarn
Finestra del terminale
# crea un nuovo progetto con npm npm create astro@latest
Finestra del terminale
# crea un nuovo progetto con pnpm pnpm create astro@latest
Finestra del terminale
# crea un nuovo progetto con yarn yarn create astro
Digita y per installare create-astro.
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

Un nuovo progetto Astro può essere creato solo in una cartella completamente vuota, quindi scegli un nome per la tua cartella che non esista già!
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.
Quando il prompt ti chiede se installare o meno le dipendenze, digita y.
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

Apri VS Code. Ti verrà richiesto di aprire una cartella. Scegli la cartella che hai creato durante la procedura guidata di installazione.
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.
Assicurati che il terminale sia visibile e di poter vedere il prompt dei comandi, come ad esempio:
Finestra del terminale
```
user@machine:~/tutorial$
```
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

Esegui il comando per avviare il server dev di Astro digitando nel terminale di VS Code:
- npm
- pnpm
- Yarn
Finestra del terminale
npm run dev
Finestra del terminale
pnpm run dev
Finestra del terminale
yarn 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.

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:

Checklist

Posso creare un nuovo progetto Astro.
Posso avviare il server dev di Astro.

Risorse

Introduzione a Visual Studio Code external — un video tutorial per installare, configurare e lavorare con VS Code

Contribuisci Comunità Sponsor