Esercizio - Attività iniziali

Completato

App Web statiche di Azure pubblica siti Web in un ambiente di produzione compilando app da un repository GitHub. In questo esercizio si compilerà un'applicazione Web usando il framework front-end preferito da un repository GitHub.

Creare un repository

Questo modulo semplifica la creazione di un nuovo repository usando un repository di modelli GitHub. È disponibile una serie di modelli in cui ogni modello contiene un'app di avvio con un framework front-end diverso.

1. Passare alla pagina di creazione da modello per l'archivio dei modelli. Se viene visualizzato un errore 404: Pagina non trovata , accedere a GitHub e riprovare.

2. Scegli uno dei tuoi account GitHub nella casella a discesa Proprietario.

3. Assegnare al repository il nome my-static-web-app.

4. Selezionare il pulsante Crea repository .

Eseguire l'app

Hai appena creato un repository GitHub chiamato my-static-web-app nel tuo account GitHub. Si clonerà quindi il repository e si eseguirà il codice in locale nel computer.

1. Aprire un terminale nel computer.

2. Iniziare a clonare il repository GitHub nella directory desiderata nel computer.

   git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
   

3. Passare alla cartella per il codice sorgente.

   cd my-static-web-app
   

4. Passare quindi alla cartella del framework front-end preferito, come mostrato di seguito.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Installare ora le dipendenze dell'applicazione.

   npm install
   

   Nota

   Se viene visualizzato un errore Impossibile trovare PATH , assicurarsi di aver installato Node.js da https://nodejs.org. Potrebbe essere necessario eseguire un'installazione personalizzata che include l'installazione dell'opzione Aggiungi a PATH .

   

6. Infine, eseguire l'applicazione client front-end.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Passare all'app

È arrivato il momento di osservare l'applicazione in esecuzione in locale. Ogni applicazione front-end viene eseguita su una porta diversa.

Selezionare il collegamento per passare all'applicazione.

Passare a http://localhost:4200.

Passare a http://localhost:3000.

Passare a http://localhost:5000.

Passare a http://localhost:8080.

Nota

Negli esercizi di questo modulo verrà distribuita un'app senza un'API. Vedere la sezione Passaggi successivi alla fine di questo modulo per informazioni sul modulo successivo, in cui si distribuirà un'API insieme all'app.

A questo punto, arrestare l'app in esecuzione premendo CTRL+C nel terminale.

Passaggi successivi

È stata compilata l'applicazione che è ora in esecuzione in locale nel browser.

Si pubblicherà ora l'applicazione in App Web statiche di Azure.