Sviluppo e build

Quando hai ottenuto un progetto Astro, sei pronto a fare la build con Astro! 🚀

Modifica il tuo progetto

Per apportare modifiche al tuo progetto, apri la cartella del progetto nel tuo editor di codice. Lavorare in modalità di sviluppo con il server dev in esecuzione ti consente di vedere gli aggiornamenti al tuo sito mentre modifichi il codice.

Puoi anche personalizzare aspetti del tuo ambiente di sviluppo come la configurazione di TypeScript o l’installazione delle estensioni ufficiali dell’editor Astro.

Avvia Astro dev server

Astro include un server di sviluppo integrato che ha tutto il necessario per lo sviluppo del progetto. Il comando CLI astro dev avvierà il server di sviluppo locale in modo che tu possa vedere il tuo nuovo sito in azione per la prima volta.

Ogni modello di partenza viene fornito con uno script preconfigurato che eseguirà astro dev per te. Dopo essere entrato nella directory del tuo progetto, utilizza il tuo gestore di pacchetti preferito per eseguire questo comando e avviare il server di sviluppo Astro.

npm run dev

pnpm run dev

yarn run dev

Se tutto va bene, Astro ora servirà il tuo progetto su http://localhost:4321/. Visita quel link nel tuo browser e vedrai il tuo nuovo sito!

Lavorare in modalità di sviluppo

Astro sarà in ascolto per le modifiche ai file live nella tua directory src/ e aggiornerà l’anteprima del tuo sito mentre crei, quindi non sarà necessario riavviare il server mentre apporti modifiche durante lo sviluppo. Sarai sempre in grado di vedere una versione aggiornata del tuo sito nel browser quando il server di sviluppo è in esecuzione.

Quando visualizzi il tuo sito nel browser, avrai accesso alla Toolbar di sviluppo Astro (EN). Mentre costruisci, ti aiuterà a ispezionare le tue Isole Astro, individuare problemi di accessibilità e altro ancora.

Se non sei in grado di aprire il tuo progetto nel browser dopo aver avviato il server di sviluppo, torna al terminale in cui hai eseguito il comando dev e controlla il messaggio visualizzato. Dovrebbe dirti se si è verificato un errore o se il tuo progetto viene servito a un URL diverso da http://localhost:4321/.

Fase di Build e anteprima del tuo sito

Per verificare la versione del tuo sito che verrà creata al momento della build, interrompi il server dev (Ctrl + C) ed esegui il comando di build appropriato per il tuo gestore di pacchetti nel tuo terminale:

npm run build

pnpm build

yarn run build

Astro creerà una build pronta per il deploy del tuo sito in una cartella separata (dist/ per impostazione predefinita) e potrai seguire il suo progresso nel terminale. Questo ti avviserà di eventuali errori di build nel tuo progetto prima di effettuare il deploy in produzione. Se TypeScript è configurato su strict o strictest, lo script build controllerà anche il tuo progetto per errori di tipo.

Quando la build è terminata, esegui il comando preview appropriato (ad esempio npm run preview) nel tuo terminale e potrai visualizzare la versione compilata del tuo sito in locale nella stessa finestra di anteprima del browser.

Nota che questa anteprima mostra il tuo codice come era quando è stato eseguito l’ultimo comando di build. Questo è pensato per darti un’anteprima di come apparirà il tuo sito quando verrà distribuito sul web. Eventuali modifiche successive che apporti al tuo codice dopo la fase di build non verranno riflesse durante l’anteprima del tuo sito finché non esegui nuovamente il comando di build.

Usa (Ctrl + C) per uscire dall’anteprima e avviare un altro comando nel terminale, ad esempio riavviare il server di sviluppo per tornare a lavorare in modalità di sviluppo che si aggiorna mentre modifichi per mostrarti un’anteprima live delle modifiche al codice.

Scopri di più sull’ Interfaccia da riga di comando Astro (EN) e sui comandi del terminale che userai mentre costruisci con Astro.

Prossimi passi

Congratulazioni! Sei ora pronto per iniziare a costruire con Astro! 🥳

Ecco qualche piccolo suggerimento su cosa esplorare in seguito. Puoi leggerli in qualsiasi ordine. Puoi anche lasciare la nostra documentazione per un po’ e giocare nel codice del tuo nuovo progetto Astro, tornando qui ogni volta che incontri problemi o hai domande.

Configura il tuo ambiente di sviluppo

Esplora le guide qui sotto per personalizzare la tua esperienza di sviluppo.

Configurazione dell'editor Personalizza il tuo editor di codice per migliorare l'esperienza di sviluppo con Astro e sbloccare nuove funzionalità.

Toolbar di sviluppo Esplora le utili funzionalità della toolbar di sviluppo.

Configurazione con TypeScript Configura le opzioni per il type-checking, l'IntelliSense e altro ancora.

Esplora le funzionalità di Astro

Comprendi il tuo codice Scopri la struttura dei file di Astro nella nostra guida alla Struttura del Progetto.

Crea collezioni di contenuti Aggiungi contenuti al tuo nuovo sito con la validazione dell'avantesto `frontmatter` e la sicurezza automatica dei tipi.

Aggiungi transizioni di visualizzazione Crea transizioni e animazioni di pagina fluide.

Scopri le Isole Astro Leggi l'Architettura a Isole in Astro.

Svolgi il tutorial introduttivo

Costruisci un blog Astro completamente funzionale partendo da una singola pagina vuota nel nostro tutorial introduttivo (EN).

Questo è un ottimo modo per vedere come funziona Astro e ti guiderà attraverso i concetti di base delle pagine, layout, componenti, routing, Astro Isole e altro ancora. Include anche un’unità opzionale per principianti, che guiderà coloro che sono nuovi ai concetti di sviluppo web in generale, attraverso l’installazione delle applicazioni necessarie sul tuo computer, la creazione di un account GitHub e il deploy del tuo sito.

Contribuisci Comunità Sponsor