1. Primi passi

1.4 Il primo progetto, passo per passo

Un percorso completo in dieci minuti: creare un progetto, avviarlo, vederlo nel browser e aprirlo nell'editor.

Nell'app: «Nuovo progetto»

In breve

  • Un esempio completo: un piccolo sito in TypeScript con Vite, dalla creazione al browser.
  • Servono solo il componente Node.js, che il kit installa da solo se manca, e una connessione a Internet.
  • Alla fine saprai creare un progetto, avviarlo, aprirlo nel browser e modificarlo nell'editor.

1. Crea il progetto

  1. Apri la pagina «Progetti» dalla barra delle attività.
  2. Nel «Pannello rapido», sotto «Nuovo progetto», nel riquadro «Web», fai clic su «Vite» (sotto «Web con JavaScript e TypeScript»). Si apre la scheda «Nuovo progetto».
  3. In «1. Base» la scheda «Vite» («Sito o applicazione web in TypeScript») è già scelta.
  4. In «2. Aggiunte» non serve niente per questa prova.
  5. In «3. Nome» scrivi primo-sito. Il nome diventa la cartella projects\primo-sito.
  6. Guarda il «Riepilogo»: vedrai che il kit userà Node.js, eseguirà npm create vite nella cartella projects e poi npm install nel progetto, e salverà le azioni «Avvia» e «Build».
  7. Premi «Crea il progetto». Nella parte «Avanzamento» scorrono i comandi e il loro output.
  8. Quando compare «Progetto primo-sito creato.» premi «Apri il progetto».

2. Avvialo e aprilo nel browser

  1. La pagina del progetto si apre sulla sezione «Avvio». In basso, l'elenco «Azioni» mostra ciò che il progetto sa fare: le azioni riconosciute dal file package.json (npm run dev, npm run build, npm install) e quelle della ricetta (Avvia, Build).
  2. Premi ▶ accanto a «npm run dev». È un'azione web: il kit le assegna una porta, la avvia e aspetta che risponda. Lo stato passa da «in avvio» a «in ascolto».
  3. Premi «Apri nel browser»: si apre il sito di prova di Vite all'indirizzo http://localhost:<porta>/, dove la porta è un numero tra 7100 e 7999 scelto dal kit e tenuto uguale a ogni avvio.
  4. Vuoi che il grande pulsante «Avvia» in alto avvii sempre questa azione? Selezionala e premi la stella «Predefinita».

3. Modificalo nell'editor

  1. Premi «Editor» in alto nella pagina del progetto. Il kit avvia l'editor (la prima volta può richiedere qualche secondo) e apre una finestra di Atollo con la cartella del progetto.
  2. Apri src/main.ts, cambia un testo e salva con Ctrl+S.
  3. Torna al browser: Vite aggiorna la pagina da solo.
  4. Per fermare il sito torna su Atollo e premi «Ferma» (o ■ accanto all'azione). Chiudendo Atollo si ferma comunque tutto.

E adesso?