Salta ai contenuti

Installa Astro manualmente

Questa guida ti mostrerà come installare e configurare un nuovo progetto Astro manualmente.

Prerequisiti

Sezione intitolata Prerequisiti
  • Node.js - v18.14.1 o superiore.
  • Editor di testo - Raccomandiamo VS Code con la nostra Estensione Ufficiale Astro.
  • Terminale - Astro viene utilizzato tramite la sua interfaccia da riga di comando (CLI).

Installazione

Sezione intitolata Installazione

Se preferisi non usare il nostro strumento CLI automatico create astro, puoi impostare tu stesso il tuo progetto seguendo questa guida.

1. Crea la tua cartella

Sezione intitolata 1. Crea la tua cartella

Crea una cartella vuota con il nome del tuo progetto, e naviga al suo interno.

Terminal window
mkdir il-mio-progetto-astro
cd il-mio-progetto-astro

Una volta all’interno della cartella, crea il file package.json del tuo progetto. Questo servirà a gestire le dipendenze del tuo progetto, incluso Astro. Se questo formato di file non ti è familiare, esegui il seguente comando per crearne uno.

Terminal window
npm init --yes

2. Installa Astro

Sezione intitolata 2. Installa Astro

Per prima cosa, installa le dipendenze di un progetto Astro all’interno del tuo progetto.

Terminal window
npm install astro

Poi, sostituisci qualunque sezione segnaposto “scripts” all’interno del tuo file package.json con il seguente codice:

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },

Userai questi script più avanti nella guida per far partire Astro ed eseguire i suoi vari comandi.

3. Crea la tua prima pagina

Sezione intitolata 3. Crea la tua prima pagina

Nel tuo editor di testo, crea un nuovo file nella tua cartella al percorso src/pages/index.astro. Questa sarà la tua prima pagina Astro nel progetto.

Per questa guida, copia e incolla il seguente blocco di codice (inclusi i tre trattini ---) all’interno del tuo nuovo file:

src/pages/index.astro
---
// Benvenuto/a ad Astro! Tutto ciò che è delimitato da questi tre trattini
// è il tuo "avantesto del componente". Non viene mai eseguito nel browser.
console.log('Questo codice viene eseguito nel tuo terminale, non nel browser!');
---
<!-- Qua sotto c'è il tuo "template del componente". È solo HTML, con
     un po' di magia per aiutarti a costruire ottimi template. -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

4. Crea il tuo primo asset statico

Sezione intitolata 4. Crea il tuo primo asset statico

Avrai anche bisogno di creare una cartella public/ dove salvare i tuoi asset statici. Astro includerà sempre questi asset nella build finale, così da poterli referenziare in sicurezza dall’interno dei tuoi template.

Nel tuo editor di testo, crea un nuovo file nella tua cartella al percorso public/robots.txt. robots.txt è un semplice file che la maggior parte dei siti includono per dire ai bot di ricerca, come quello di Google, come trattare il tuo sito.

Per questa guida, copia e incolla il seguente blocco di codice all’interno del tuo nuovo file:

public/robots.txt
# Esempio: Permetti a tutti i bot di scansionare e indicizzare il tuo sito.
# Sintassi completa: https://developers.google.com/search/docs/advanced/robots/create-robots-txt?hl=it
User-agent: *
Allow: /

5. Crea il file astro.config.mjs

Sezione intitolata 5. Crea il file astro.config.mjs

Astro viene configurato tramite il file astro.config.mjs. Questo file è facoltativo se non hai bisogno di configurare Astro, ma potresti comunque volerlo creare ora.

Crea il file astro.config.mjs alla base del tuo progetto, e copia il seguente blocco di codice al suo interno:

astro.config.mjs
import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({});

Se vuoi includere componenti di framework UI come quelli di React, Svelte, ecc. o usare altri strumenti come Tailwind o Partytown nel tuo progetto, qua è dove importi e configuri manualmente le integrazioni.

Leggi la reference di Astro dell’API di configurazione per maggiori informazioni.

6. Aggiungi il supporto a TypeScript

Sezione intitolata 6. Aggiungi il supporto a TypeScript

TypeScript viene configurato tramite il file tsconfig.json. Anche se non scrivi codice TypeScript, questo file è importante affinché strumenti come Astro e VS Code sappiano come interpretare il tuo codice. Alcune funzionalità, come gli import dei pacchetti npm, non sono pienamente supportate nell’editor senza un file tsconfig.json.

Se intendi scrivere codice TypeScript, è consigliato usare i template strict o strictest di Astro. Puoi vedere e confrontare i tre template di configurazione all’indirizzo astro/tsconfigs/.

Crea il file tsconfig.json alla base del tuo progetto e copia il seguente blocco di codice al suo interno. (Puoi usare base, strict o strictest per il tuo template di TypeScript):

tsconfig.json
{
  "extends": "astro/tsconfigs/base"
}

Infine, crea il file src/env.d.ts per permettere a TypeScript di sapere quali tipi d’ambiente sono disponibili all’interno del tuo progetto Astro:

src/env.d.ts
/// <reference types="astro/client" />
Leggi la guida di Astro al setup di TypeScrip per maggiori informazioni.

7. Prossimi passi

Sezione intitolata 7. Prossimi passi

Se hai seguito tutti i passaggi, la cartella del tuo progetto ora dovrebbe avere questa struttura:

  • Directorynode_modules/
    • …
  • Directorypublic/
    • robots.txt
  • Directorysrc/
    • Directorypages/
      • index.astro
    • env.d.ts
  • astro.config.mjs
  • package-lock.json oppure yarn.lock, pnpm-lock.yaml, ecc.
  • package.json
  • tsconfig.json

Congratulazioni, ora sei pronto/a ad usare Astro!

Se hai seguito questa guida nella sua interezza, puoi saltare direttamente allo Step 2: Fai partire Astro per continuare e vedere come far partire Astro per la prima volta.