Framework JavaScript

Di seguito sono riportati alcuni esempi di come impostare applicazioni che utilizzano framework JavaScript da distribuire sui servizi di Hosting di Applicazioni di Kinsta a partire da un repository GitHub. Sono inclusi:

Abbiamo anche degli esempi di applicazioni Node.js.

Prerequisiti

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

Astro SSR

Questo è un esempio di come configurare un sito Astro con rendering lato server (SSR) sui servizi di Hosting di Applicazioni di Kinsta da un repository GitHub.

Per impostazione predefinita, Astro è un costruttore di siti statici che si concentra su siti web ricchi di contenuti per offrire tempi di caricamento più rapidi con meno JavaScript. Abilitando l’SSR in Astro è possibile aggiungere al sito funzionalità dinamiche come le sessioni per il login, la connessione a un database e altro ancora. Maggiori informazioni sono disponibili sul sito web di Astro.

  1. Accedete a GitHub e create un nuovo repository da questo template (Use this template > Create a new repository): Kinsta – Hello World – SSR Site With Astro.
  2. In MyKinsta, cliccate su Applicazioni > Aggiungi applicazione > selezionate GitHub, cliccate su Connetti provider git > Autorizza e accedete al vostro account GitHub.
  3. Scegliete il repository Hello World Astro SSR e la posizione del data center. Lasciate tutte le altre impostazioni come predefinite e cliccate su Continua in ogni passaggio.
  4. Nella fase di riepilogo, cliccate su Distribuisci ora.

Durante la distribuzione, Kinsta rileva automaticamente il comando Start del processo web e installa le dipendenze definite nel file package.json. L’applicazione è disponibile non appena la distribuzione termina e la pagina di benvenuto di Kinsta viene caricata all’URL dell’applicazione.

Pagina di benvenuto di Kinsta dopo l'installazione di Astro.
Pagina di benvenuto di Kinsta dopo l’installazione di Astro.

Ecco la versione video:

Configurazione del server web

Porta

Kinsta imposta automaticamente la variabile d’ambiente PORT. Non è necessario definirla o codificarla nell’applicazione.

Comando Start

Quando si distribuisce l’applicazione, Kinsta crea automaticamente un processo web con npm start come comando Start. Assicuratevi di utilizzare questo comando per eseguire il vostro server.

Ciclo di vita del deployment

Ogni volta che viene avviata una distribuzione (attraverso la creazione di un’applicazione o una nuova distribuzione a causa di un commit in entrata), viene eseguito il comando npm build, seguito dal comando npm start.

Deno

Questo è un esempio di come impostare un’applicazione Deno da distribuire sui servizi di Hosting di Applicazioni di Kinsta a partire da un repository GitHub.

Deno è un runtime JavaScript, TypeScript e WebAssembly che permette di eseguire codice al di fuori di un browser web e di creare applicazioni sicure lato server. Maggiori informazioni sono disponibili sul sito web di Deno.

  1. Accedete a GitHub e create un nuovo repository da questo template (Use this template > Create a new repository): Kinsta – Hello World – Deno.
  2. In MyKinsta, cliccate su Applicazioni > Aggiungi applicazione > selezionate GitHub, cliccate su Connetti provider git > Autorizza e accedete al vostro account GitHub.
  3. Scegliete il repository Hello World – Deno e la posizione del data center. Lasciate tutte le altre impostazioni come predefinite e cliccate su Continua in ogni passaggio.
  4. Nella fase di riepilogo, cliccate su Distribuisci ora.

Durante la distribuzione, Kinsta rileva automaticamente il comando Start del processo web e installa le dipendenze definite nel file package.json. L’applicazione è disponibile non appena la distribuzione termina e viene caricata una pagina Hello World all’URL dell’applicazione.

La pagina Hello World di Deno dopo l'installazione.
La pagina Hello World di Deno dopo l’installazione.

Configurazione del server web

Porta

Kinsta imposta automaticamente la variabile d’ambiente PORT. Non è necessario definirla o codificarla nell’applicazione.

Comando Start

Quando si distribuisce un’applicazione, Kinsta crea automaticamente un processo web con npm start come comando Start.

Ciclo di vita del deployment

Ogni volta che viene avviata una distribuzione (attraverso la creazione di un’applicazione o un nuovo deployment a causa di un commit in entrata), viene eseguito il comando npm build command, seguito dal comando npm start.

Next.js con Prisma ORM

Questo è un esempio di come impostare un’applicazione Next.js e Prisma da distribuire sui servizi di Hosting di Applicazioni e Hosting di Database di Kinsta da un repository GitHub.

Prisma è un toolkit per database open-source che semplifica l’accesso ai database per gli sviluppatori fornendo un’API sicura e intuitiva. Supporta più database e genera query SQL efficienti e ottimizzate per prestazioni più veloci. Maggiori informazioni sono disponibili sul sito web prisma.io.

Per funzionare, questa applicazione richiede un database PostgreSQL.

  1. In MyKinsta, cliccate su Database > Aggiungi database > inserite un nome > in Tipo di database selezionate PostgreSQL, scegliete la posizione e la dimensione del data center e cliccate su Continua > Crea database.
  2. Accedete a GitHub e create un nuovo repository da questo template (Use this template > Create a new repository): Kinsta – Hello World – Prisma.
  3. In MyKinsta, cliccate su Applicazioni > Aggiungi applicazione > selezionate GitHub, cliccate su Connetti provider git > Autorizza e accedete al vostro account GitHub.
  4. Scegliete il repository Hello World – Prisma e la stessa posizione del data center del vostro database. Lasciate tutte le altre impostazioni come predefinite e cliccate su Continua in ogni passaggio.
  5. Nella fase di riepilogo, cliccate su Distribuisci ora.
  6. Una volta che il database sarà pronto per le connessioni (vedrete un segno di spunta verde accanto ad esso), dovrete aggiungere la connessione interna tra l’applicazione e il database. Cliccate su Applicazioni > nome dell’applicazione > Impostazioni > Aggiungi connessione.
  7. Selezionate il vostro database > selezionate Aggiungi variabili d’ambiente… > selezionate Aggiungi variabili d’ambiente all’applicazione > cliccate su Aggiungi connessione.
  8. Andate alla pagina Distribuzioni dell’applicazione e cliccate su Distribuisci ora > Distribuisci applicazione.

Durante la distribuzione, Kinsta rileva automaticamente il comando Start del processo web e installa le dipendenze definite nel file package.json. L’applicazione è disponibile non appena la distribuzione termina e la pagina di benvenuto di Kinsta viene caricata all’URL dell’applicazione.

Pagina di benvenuto di Kinsta dopo l'installazione di Next.js e Prisma.
Pagina di benvenuto di Kinsta dopo l’installazione di Next.js e Prisma.

Configurazione del server web

Porta

Kinsta imposta automaticamente la variabile d’ambiente PORT. Non è necessario definirla e non è necessario codificarla nell’applicazione.

Comando Start

Kinsta crea automaticamente un processo web quando distribuisce un’applicazione con npm start come comando Start. Assicuratevi di utilizzare questo comando per eseguire il vostro server.

Ciclo di vita del deployment

Ogni volta che viene avviata una distribuzione (tramite la creazione di un’applicazione o il reinserimento a causa di un commit in entrata), viene eseguito il comando npm build, seguito dal comando npm start.

React

Questo è un esempio di come impostare un’applicazione React da distribuire sui servizi di Hosting di Applicazioni di Kinsta a partire da un repository GitHub.

React è una popolare libreria JavaScript per la creazione di interfacce utente. Permette agli sviluppatori di creare componenti UI riutilizzabili e di aggiornare in modo efficiente l’UI in risposta alle modifiche dei dati. Maggiori informazioni sono disponibili sul sito web di 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, cliccate su Applicazioni > Aggiungi applicazione > selezionate GitHub, cliccate su Connetti provider git > Autorizza e accedete al vostro account GitHub.
  3. Scegliete il repository Hello World – React e la posizione del data center. Lasciate tutte le altre impostazioni come predefinite e cliccate su Continua in ogni passaggio.
  4. Nella fase di riepilogo, cliccate su Distribuisci ora.

Durante la distribuzione, Kinsta rileva automaticamente il comando Start del processo web e installa le dipendenze definite nel file package.json. L’applicazione è disponibile non appena la distribuzione termina e la pagina di benvenuto di Kinsta viene caricata all’URL dell’applicazione.

Pagina di benvenuto di Kinsta dopo la distribuzione di React.

Configurazione del server web

Porta

Kinsta imposta automaticamente la variabile d’ambiente PORT. Non è necessario definirla e non dovete codificarla nell’applicazione.

Comando Start

Kinsta crea automaticamente un processo web basato sul comando npm start nel file package.json quando distribuisce un’applicazione.

Ciclo di vita del deployment

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

React con Vite

Questo è un esempio di come impostare un’applicazione React con Vite per distribuirla sui servizi di Hosting di Applicazioni di Kinsta da un repository GitHub.

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

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

  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, cliccate su Applicazioni > Aggiungi applicazione > selezionate GitHub, cliccate su Connetti provider git > Autorizza e accedete al vostro account GitHub.
  3. Scegliete il repository Hello World – Vite + React e la posizione del data center. Lasciate tutte le altre impostazioni come predefinite e cliccate su Continua in ogni passaggio.
  4. Nella fase di riepilogo, cliccate su Distribuisci ora.

Durante la distribuzione, Kinsta rileva automaticamente il comando Start del processo web e installa le dipendenze definite nel file package.json. L’applicazione è disponibile non appena la distribuzione termina e la pagina di benvenuto di Kinsta viene caricata all’URL dell’applicazione.

Pagina di benvenuto di Kinsta dopo la distribuzione di React con Vite.

Configurazione del server web

Porta

Kinsta imposta automaticamente la variabile d’ambiente PORT. Non è necessario definirla e non dovete codificarla nell’applicazione.

Comando Start

Kinsta crea automaticamente un processo web basato sul comando npm start nel file package.json quando distribuisce un’applicazione.

Ciclo di vita del deployment

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.

Questo articolo ti è stato utile?