React

Di seguito sono riportati alcuni esempi di configurazione di un sito statico React e un sito statico React con Vite da distribuire sui servizi di Hosting di Siti Statici di Kinsta a partire da un repository GitHub.

React è una popolare libreria JavaScript per la creazione di interfacce utente. Permette di creare componenti dell’interfaccia utente riutilizzabili e di aggiornare l’interfaccia utente in risposta alle modifiche dei dati. Maggiori informazioni sono disponibili sul sito web di React.

È possibile utilizzare questo template di avvio rapido anche sull’Hosting di Applicazioni di Kinsta senza configurazione aggiuntiva. Se si utilizza l’Hosting di Applicazioni, il comando Start può essere lasciato vuoto per il processo web poiché Kinsta rileva automaticamente il comando richiesto durante la prima distribuzione.

Prerequisiti

• I template di avvio rapido di Kinsta sono archiviati e gestiti su GitHub; pertanto, per accedervi è necessario avere un account GitHub.
• È necessario creare un account MyKinsta per distribuire l’applicazione.

Distribuire un sito statico React

1. Accedete a GitHub e create un nuovo repository da questo template (Use this template > Create a new repository): Kinsta – Hello World – React.
2. In MyKinsta, fate clic su Siti statici > Aggiungi sito > selezionare GitHub, fate clic su Connetti provider git > Autorizza e accedete all’account GitHub.
3. Scegliete il repository Hello World – React, cliccate su Continua e inserite quanto segue nelle impostazioni di Build:
   • Comando di build: npm run build
   • Versione Node: 18.16.0
   • Directory di pubblicazione: build

Durante la distribuzione, Kinsta installa automaticamente le dipendenze definite nel file package.json. Il sito è disponibile non appena la distribuzione termina e la pagina di benvenuto di Kinsta viene caricata all’URL del sito.

Ciclo di vita della distribuzione

Ogni volta che viene avviata una distribuzione (attraverso la creazione di un’applicazione o la nuova distribuzione a causa di un commit in entrata), vengono eseguiti i comandi npm start e npm build.

React con Vite

In questo esempio mostriamo come configurare un sito statico React con Vite per distribuirlo sui servizi di hosting di siti statici di Kinsta da un repository GitHub.

Vite è uno strumento che aiuta a creare applicazioni decentralizzate; fornisce strumenti per sviluppatori e API che semplificano il processo di sviluppo e supporta diversi linguaggi di programmazione. Maggiori informazioni sono disponibili sul sito web di Vite.

Durante la distribuzione, Kinsta installa automaticamente le dipendenze definite nel file package.json.

1. Accedete a GitHub e create un nuovo repository da questo template (Use this template > Create a new repository): Kinsta – Hello World – Vite + React.
2. In MyKinsta, aggiungete un sito statico con il repository Hello World – Vite + React e le seguenti impostazioni di Build:
   • Comando di build: npm run build
   • Versione Node: 18.16.0
   • Directory di pubblicazione: dist
3. Il sito è disponibile non appena la build termina e la pagina di benvenuto di Kinsta viene caricata all’URL del sito.

Ciclo di vita della distribuzione

Ogni volta che viene avviata una distribuzione (attraverso la creazione di un’applicazione o la nuova distribuzione a causa di un commit in entrata), vengono eseguiti i comandi npm install e npm build.