WordPress è un popolare sistema di gestione dei contenuti che alimenta milioni di siti web su Internet. Offre un’interfaccia semplice e un’ampia gamma di opzioni di personalizzazione.
Creare siti WordPress può richiedere molto tempo, soprattutto quando si eseguono manualmente attività ripetitive. Kinsta ha reso pià semplici queste operazioni grazie al cruscotto MyKinsta, che fornisce anche un dominio temporaneo per eseguire un test immediato. Tuttavia, l’introduzione dell’API di Kinsta consente agli sviluppatori di migliorare il flusso di lavoro per la creazione del sito e di sviluppare interfacce personalizzate per soddisfare esigenze specifiche.
In questo tutorial spieghiamo come sfruttare la potenza dell’API di Kinsta per creare siti WordPress. Inoltre, utilizzeremo la libreria JavaScript React per sviluppare un’applicazione che crea siti WordPress senza MyKinsta.
Ecco una demo live dell’applicazione per la creazione di siti.
L’API di Kinsta
L’API di Kinsta è un potente strumento che permette di interagire con la piattaforma di Hosting WordPress Gestito di Kinsta in modo programmatico. Permette di automatizzare diverse attività relative ai servizi offerti da Kinsta, come la creazione di un sito, il recupero di informazioni sul sito, lo stato di un sito e molto altro.
Questa API rende più semplice la creazione di siti WordPress e può essere uno strumento prezioso per gli sviluppatori. Per utilizzare l’API di Kinsta, è necessario avere un account con almeno un sito, un’applicazione o un database WordPress in MyKinsta. Sarà inoltre necessario generare una chiave API per l’autenticazione e l’accesso all’account.
Per generare una chiave API:
- Andate alla dashboard di MyKinsta.
- Andate alla pagina delle chiavi API (nome > Impostazioni azienda > Chiavi API).
- Cliccate su Crea chiave API.
- Scegliete una scadenza o impostate una data di inizio personalizzata e un numero di ore per la scadenza della chiave.
- Assegnate un nome univoco alla chiave.
- Cliccate su Genera.
Dopo aver creato la chiave API, copiatela e conservatela in un luogo sicuro (vi consigliamo di utilizzare un gestore di password), perché sarà visibile una sola volta all’interno di MyKinsta. È possibile generare più chiavi API: sono elencate nella pagina delle chiavi API. Se avete bisogno di revocare una chiave API, cliccate su Revoca accanto a quella che volete revocare.
Creare un sito WordPress con l’API di Kinsta
Ora che la vostra chiave API è pronta, creiamo un sito WordPress con l’API di Kinsta. Per farlo, useremo l’endpoint /sites che si aspetta un payload contenente i seguenti dati:
- company: questo parametro si aspetta un ID aziendale unico visibile nelle impostazioni di MyKinsta. Serve a identificare l’azienda associata al sito WordPress.
- display_name: il nome visualizzato, che è lo stesso del nome del sito su MyKinsta, aiuta a identificare il sito. Viene utilizzato solo in MyKinsta. Viene utilizzato per il dominio temporaneo del sito WordPress e del pannello di amministrazione di WordPress (per l’API di Kinsta, è display_name.kinsta.cloud e display_name.kinsta.cloud/wp-admin).
- region: questo parametro permette di scegliere tra i 37 data center disponibili per i siti web. Una regione più vicina al vostro pubblico di riferimento può migliorare le prestazioni e la velocità del sito (ecco l’elenco delle regioni disponibili).
- install_mode: questo parametro determina il tipo di installazione di WordPress. Il valore predefinito è “plain”, che consente di creare un normale sito WordPress. Altre opzioni includono “new” per una nuova installazione e altre modalità in base a requisiti specifici.
- is_subdomain_multisite: questo parametro booleano (vero/falso) specifica se il sito WordPress deve essere configurato come multisito utilizzando i sottodomini.
- admin_email: questo parametro richiede l’indirizzo e-mail dell’amministratore di WordPress. Viene utilizzato per scopi amministrativi e per ricevere notifiche importanti.
- admin_password: questo parametro serve per impostare la password dell’account utente amministratore di WordPress. Scegliete una password sicura per proteggere il sito.
- admin_user: questo parametro imposta il nome utente dell’account amministratore di WordPress. Viene utilizzato per accedere alla bacheca di WordPress e gestire il sito.
- is_multisite: simile a
is_subdomain_multisite, questo parametro booleano determina se il sito WordPress deve essere configurato come multisito. - site_title: Questo parametro rappresenta il titolo del sito WordPress. Appare nella parte superiore di ogni pagina del sito. Potrete sempre modificarlo in seguito.
- woocommerce: impostando questo parametro booleano è possibile installare il plugin WooCommerce durante la creazione del sito.
- wordpressseo: questo parametro controlla l’installazione del plugin Yoast SEO durante la creazione del sito.
- wp_language: questo parametro accetta un valore stringa che rappresenti la lingua/locale del vostro sito WordPress (potete individuare la vostra versione locale di WordPress qui).
Ora che abbiamo analizzato tutti i parametri, ecco come appare il payload che inviate all’API di Kinsta:
{
"company": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"display_name": "First site",
"region": "us-central1",
"install_mode": "new",
"is_subdomain_multisite": false,
"admin_email": "[email protected]",
"admin_password": "vJnFnN-~v)PxF[6k",
"admin_user": "admin",
"is_multisite": false,
"site_title": "My First Site",
"woocommerce": false,
"wordpressseo": false,
"wp_language": "en_US"
}Utilizzando la modalità che preferite, potete inviare una richiesta POST all’API di Kinsta; dovete solo impostare la vostra chiave API per creare un sito WordPress. Per questo esempio, utilizziamo la Fetch API di JavaScript:
const createWPSite = async () => {
const resp = await fetch(
`https://api.kinsta.com/v2/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer <YOUR_KEY_HERE>'
},
body: JSON.stringify({
company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',
display_name: 'First site',
region: 'us-central1',
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: '[email protected]',
admin_password: 'vJnFnN-~v)PxF[6k',
admin_user: 'admin',
is_multisite: false,
site_title: 'My First Site',
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
const data = await resp.json();
console.log(data);
}Il codice qui sopra utilizza la Fetch API JavaScript per inviare una richiesta POST all’API di Kinsta per creare un sito WordPress. La funzione createWPSite gestisce il processo. All’interno della funzione, viene effettuata una richiesta Fetch all’API di Kinsta /sites endpoint with the necessary data.
Viene eseguito il parsing della risposta utilizzando resp.json() e il risultato viene registrato nella console. Sostituite <YOUR_KEY_HERE> con la vostra chiave API, regolate i valori del payload e invocate createWPSite() per creare un sito WordPress utilizzando l’API di Kinsta.
Ecco come appare la risposta:
{
"operation_id": "sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"message": "Adding site in progress",
"status": 202
}Monitoraggio delle operazioni con l’API di Kinsta
Una volta avviata la creazione di un sito con l’API di Kinsta, è importante monitorare l’avanzamento dell’operazione. Questo può essere fatto in modo programmatico senza dover controllare MyKinsta con l’endpoint /operations.
Per monitorare le operazioni, usate l’operation_id ottenuto quando avviate un’operazione, come la creazione di un sito WordPress. Passate operation_id come parametro all’endpoint /operations.
const operationId = 'YOUR_operation_id_PARAMETER';
const resp = await fetch(
`https://api.kinsta.com/v2/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: 'Bearer <YOUR_TOKEN_HERE>'
}
}
);
const data = await resp.json();
console.log(data);Il codice precedente recupera le informazioni su un’operazione inviando una richiesta GET all’endpoint /operations con l’appropriato operation_id. La richiesta include la chiave API per l’autenticazione.
I dati di risposta ricevuti dall’API vengono registrati nella console. La risposta fornisce informazioni preziose sullo stato e sull’avanzamento dell’operazione. Ad esempio, se la creazione di un sito WordPress è ancora in corso, la risposta appare come segue:
{
"status": 202,
"message": "Operation in progress",
"data": null
}Allo stesso modo, una volta che l’operazione è stata completata con successo, la risposta è questa:
{
"message": "Successfully finished request",
"status": 200,
"data": null
}È possibile, a questo punto, creare programmaticamente un sito WordPress e verificarne il funzionamento utilizzando l’API di Kinsta. Per migliorare questa funzionalità, facciamo un ulteriore passo avanti e sviluppiamo un’interfaccia utente (UI) personalizzata in grado di gestire queste operazioni. In questo modo, anche chi non ha competenze tecniche può sfruttare le funzionalità dell’API.
Creare un’applicazione React per creare un sito WordPress con l’API di Kinsta
Per iniziare, create la struttura di un progetto React e installate le dipendenze necessarie. Integrate l’API di Kinsta nell’applicazione React con la Fetch API o altre librerie di richieste HTTP, come Axios.
Prerequisiti
Per seguire questo progetto, è consigliabile avere una conoscenza base di HTML, CSS e JavaScript e una certa familiarità con React. L’obiettivo principale di questo progetto è dimostrare l’utilizzo dell’API di Kinsta, quindi questo articolo non si addentra nei dettagli della creazione o dello stile dell’interfaccia utente.
Come iniziare
Per rendere più semplice la configurazione del progetto, abbiamo creato un template. Seguite questi passaggi:
1. Create un repository Git utilizzando questo template su GitHub. Selezionate Use this template > Create a new repository per copiare il codice di partenza in un nuovo repository all’interno del vostro account GitHub e selezionate la casella per includere tutti i branch.
2. Estraete il repository sul computer locale e passate alla cartella starter-files utilizzando il comando che segue:
git checkout starter-files3. Installate le dipendenze necessarie eseguendo il comando npm install. Una volta completata l’installazione, potete lanciare il progetto sul vostro computer locale con npm run start. In questo modo si apre il progetto all’indirizzo http://localhost:3000/.
I file del progetto
All’interno della cartella src del progetto ci sono due sottocartelle principali: components e pages. La cartella components contiene componenti riutilizzabili, come l’header e il footer, utilizzati nelle pagine Home e Details.
In questo progetto, l’obiettivo principale è quello di implementare la logica delle pagine Home e Details, perché lo stile e il routing sono già stati realizzati.
La pagina Home ha un modulo che raccoglie diversi campi di dati che vengono passati all’API di Kinsta. La risposta di questa pagina viene memorizzata nel localStorage (ci sono metodi alternativi per memorizzare l’ID dell’operazione, fondamentale per verificare lo stato dell’operazione).
Nella pagina Details, l’ID dell’operazione viene recuperato da loacalStorage e passato all’endpoint /operation dell’API di Kinsta come parametro per verificare lo stato dell’operazione. In questo progetto, aggiungiamo un pulsante che permette agli utenti di controllare lo stato a intermittenza (potete utilizzare il metodo setInterval per automatizzare la procedura).
Interagire con l’API di Kinsta in React
Dopo aver realizzato l’interfaccia utente (UI), il passo successivo è quello di gestire l’invio del modulo nella pagina Home e inviare una richiesta POST all’endpoint /sites dell’API di Kinsta. Questa richiesta contiene i dati del modulo raccolti come payload e ci permette di creare un sito WordPress.
Per interagire con l’API di Kinsta, avrete bisogno del vostro ID aziendale e della vostra chiave API. Una volta ottenute queste credenziali, è meglio memorizzarle in modo sicuro come variabili d’ambiente nella vostra applicazione React.
Per impostare le variabili d’ambiente, create un file .env nella cartella principale del progetto. All’interno di questo file, aggiungete le seguenti righe:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Per accedere a queste variabili d’ambiente all’interno del progetto, potete utilizzare la sintassi process.env.THE_VARIABLE. Ad esempio, per accedere a REACT_APP_KINSTA_COMPANY_ID, dovete usare process.env.REACT_APP_KINSTA_COMPANY_ID.
Recuperare i dati del modulo in React
Nel file Home.jsx è presente un modulo. Dovrete aggiungere al modulo una logica che consenta di ottenere i dati e convalidarli quando vengono inviati. Per recuperare i dati del modulo nella vostra applicazione React, seguite l’approccio dei componenti controllati di React insieme all’hook useState . Questo approccio permette di creare uno stato per ogni campo del modulo e di aggiornarlo quando l’utente inserisce i dati.
Per prima cosa, importate l’hook useState all’inizio del file:
import React, { useState } from 'react';Quindi, impostate una variabile di stato per ogni campo del modulo all’interno del vostro componente funzionale. Ad esempio, se avete un campo di input per il “Titolo del sito”, potete creare una variabile di stato chiamata siteTitle:
const [siteTitle, setSiteTitle] = useState('');Qui, siteTitle è la variabile di stato che contiene il valore del campo di input “Titolo del sito” e setSiteTitle è la funzione che aggiorna lo stato corrispondente.
Per legare i campi del modulo ai rispettivi valori di stato, aggiungete gli attributi value e onChange a ciascun elemento di input. Ad esempio, il campo di input “Site title”:
<input
type="text"
className="form-control"
value={siteTitle}
onChange={(event) => setSiteTitle(event.target.value)}
/>In questo esempio, l’attributo value è impostato sulla variabile di stato siteTitle. Questo fa sì che il campo di input visualizzi il valore corrente di siteTitle. L’event handler onChange è impostato sulla funzione setSiteTitle, che aggiorna lo stato siteTitle con il nuovo valore ogni volta che l’utente digita nel campo.
Seguendo questo approccio per ogni campo del modulo, potete creare le variabili di stato necessarie e aggiornarle man mano che l’utente interagisce con il modulo. Questo permette di accedere facilmente ai valori inseriti quando il modulo viene inviato e di eseguire ulteriori azioni o convalide con i dati del modulo.
Se lo fate per tutti i campi del modulo, avrete questo file Home.jsx:
import Header from '../components/Header';
import Footer from '../components/Footer';
const Home = () => {
return (
<div className="app-container">
<Header />
<div className="container">
<div className="container-title">
<h1> className="title">Site Builder with Kinsta API</h1>
<p> className="description">
This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.
</p>
</div>
<form>
<div className="form-container">
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-div">
<label> WordPress site title</label>
<span>Appears across the top of every page of the site. You can always change it later.</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-flex">
<div className="input-div">
<label>WordPress admin username</label>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>WordPress admin email</label>
<input type="email" className="form-control" />
<span> className='error-message'>Ensure this is a valid email</span>
</div>
</div>
<div className="input-div">
<label>WordPress admin password</label>
<span>Ensure you remember this password as it is what you'll use to log into WP-admin</span>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>Data center location</label>
<span>Allows you to place your website in a geographical location closest to your visitors.</span>
<select className="form-control">
<option> value=""></option>
{/* add options */}
</select>
</div>
<div className="checkbox-flex">
<div className="checkbox-input">
<input type="checkbox" />
<label>Install WooCommerce</label>
</div>
<div className="checkbox-input">
<input type="checkbox" />
<label>Install Yoast SEO</label>
</div>
</div>
<button> className='btn'>Create Site</button>
</div>
</form>
</div>
<Footer />
</div >
)
}
export default Home;Implementare la convalida dei campi del modulo con l’hook useRef
Per implementare la convalida dei campi del modulo in React, potete seguire questi passaggi. Concentriamoci sull’implementazione della convalida per i campi “Nome visualizzato” e “E-mail amministratore WordPress”.
Per prima cosa, dovete creare dei riferimenti utilizzando l’hook useRef per controllare la visualizzazione dei messaggi di errore. Importate l’hook useRef e create i riferimenti necessari per ogni campo:
import { useRef } from 'react';
const displayNameRef = useRef(null);
const wpEmailRef = useRef(null);Successivamente, colleghiamo i riferimenti agli elementi dei messaggi di errore corrispondenti nei campi del modulo. Ad esempio, per il campo “Nome visualizzato”, aggiungete ref al tag span che contiene il messaggio di errore:
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
<span className='error-message' ref={displayNameRef}>Ensure this has more than 4 characters</span>
</div>Allo stesso modo, per il campo “WordPress admin email”:
<div className="input-div">
<label>WordPress admin email</label>
<input
type="email"
className="form-control"
value={wpAdminEmail}
onChange={(e) => setWpAdminEmail(e.target.value)}
/>
<span> className='error-message' ref={wpEmailRef}>Ensure this is a valid email</span>
</div>Ora possiamo creare le funzioni di convalida che controllano i valori inseriti e decidono se visualizzare i messaggi di errore. Ecco le funzioni per “Nome visualizzato” e “E-mail amministratore WordPress”:
const checkDisplayName = () => {
if (displayName.length < 4) {
displayNameRef.current.style.display = 'block';
} else {
displayNameRef.current.style.display = 'none';
}
}
const checkWpAdminEmail = () => {
let regex = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if (!wpAdminEmail.match(regex)) {
wpEmailRef.current.style.display = 'block';
} else {
wpEmailRef.current.style.display = 'none';
}
}Queste funzioni vengono richiamate ogni volta che i campi di input corrispondenti vengono modificati. Confrontano i valori di input con i criteri di validazione e aggiornano la visualizzazione dei messaggi di errore manipolando la proprietà style.display degli elementi del messaggio di errore.
Potrete implementare altre convalide o personalizzare la logica di convalida in base alle vostre esigenze.
Gestire l’invio di un modulo in React
Quando si gestisce l’evento di invio del modulo per la creazione di un sito, è necessario eseguire diverse operazioni. Innanzitutto, bisognerà collegare l’event handler onSubmit all’elemento <form>. All’interno della funzione createSite, bisognerà prevenire il comportamento predefinito di invio del modulo invocando event.preventDefault(). Questo permetterà di gestire l’invio in modo programmatico.
Per essere sicuri che i dati del modulo siano validi prima di procedere con l’invio, invocherete i metodi di convalida checkDisplayName e checkWpAdminEmail. Questi metodi verificano che i campi obbligatori soddisfino i criteri specificati.
const createSite = (e) => {
e.preventDefault();
checkDisplayName();
checkWpAdminEmail();
// Additional logic
};Supponendo che tutte le convalide passino e che i campi obbligatori contengano dati validi, si procede con lo svuotamento del localStorage per garantire uno stato pulito per la memorizzazione della risposta dell’API e del nome visualizzato.
A questo punto, effettuate una richiesta all’API di Kinsta utilizzando la funzione fetch. La richiesta è un metodo POST all’endpoint https://api.kinsta.com/v2/sites. Aggiungete le intestazioni necessarie e il payload in formato JSON.
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
`${KinstaAPIUrl}/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
},
body: JSON.stringify({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
display_name: displayName,
region: centerLocation,
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: wpAdminEmail,
admin_password: wpAdminPassword,
admin_user: wpAdminUsername,
is_multisite: false,
site_title: siteTitle,
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
// Handle the response data
};Il payload contiene vari campi di dati richiesti dall’API di Kinsta, come l’ID dell’azienda, il nome visualizzato, la regione, la modalità di installazione, l’email dell’amministratore, la password dell’amministratore, ecc. Questi valori sono ottenuti dalle variabili di stato corrispondenti.
Dopo aver effettuato la richiesta all’API, si rimane in attesa della risposta utilizzando await resp.json() si estraggono i dati rilevanti. Create un nuovo oggetto newData, con l’ID dell’operazione e il nome visualizzato, che viene poi memorizzato nel localStorage utilizzando localStorage.setItem.
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
// Fetch request here
);
const data = await resp.json();
let newData = { operationId: data.operation_id, display_name: displayName };
localStorage.setItem('state', JSON.stringify(newData));
navigate('/details');
}Infine, invocate la funzione createSiteWithKinstaAPI in modo che, quando un utente compila il modulo e clicca sul pulsante, venga creato un sito WordPress con l’API di Kinsta. Inoltre, nel codice è indicato che l’utente viene reindirizzato alla pagina details.jsx per tenere traccia dell’operazione. Per attivare la funzionalità di navigazione, importate useNavigate da react-router-dom e inizializzatelo.
Ricordate: potete trovare il codice completo di questa pagina sul repository GitHub.
Implementare la verifica dello stato dell’operazione con l’API di Kinsta
Per verificare lo stato dell’operazione con l’API di Kinsta, utilizziamo l’ID dell’operazione memorizzato nel localStorage. L’ID dell’operazione viene recuperato dal localStorage utilizzando JSON.parse(localStorage.getItem('state')) e assegnato a una variabile.
Per verificare lo stato dell’operazione, fate un’altra richiesta all’API di Kinsta inviando una richiesta GET all’endpoint /operations/{operationId}. Questa richiesta include le intestazioni necessarie, come l’intestazione Authorization contenente la chiave API.
const [operationData, setOperationData] = useState({ message: "Operation in progress" });
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const stateData = JSON.parse(localStorage.getItem('state'));
const checkOperation = async () => {
const operationId = stateData.operationId;
const resp = await fetch(
`${KinstaAPIUrl}/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
setOperationData(data);
}Una volta ricevuta la risposta, estraete i dati rilevanti dalla risposta utilizzando await resp.json(). I dati dell’operazione vengono poi aggiornati nello stato utilizzando setOperationData(data).
Nella dichiarazione di ritorno del componente, visualizzate il messaggio dell’operazione utilizzando operationData.message. Fornite anche un pulsante che consente all’utente di attivare manualmente la verifica dello stato dell’operazione chiamando checkOperation.
Se lo stato dell’operazione indica che è stata completata con successo, l’utente può utilizzare i link aggiunti per accedere alla bacheca di WordPress e al sito stesso. I link sono costruiti utilizzando stateData.display_name ottenuto da localStorage.
<a href={`http://${stateData.display_name}.kinsta.cloud/wp-admin/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open WordPress admin</p>
<FiExternalLink />
</a>
<a href={`http://${stateData.display_name}.kinsta.cloud/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open URL</p>
<FiExternalLink />
</a>Cliccando su questi link, la bacheca di WordPress e l’URL del sito si aprono rispettivamente in una nuova scheda, permettendo all’utente di accedervi senza dover navigare in MyKinsta.
Ora potete creare facilmente un sito WordPress tramite la vostra applicazione personalizzata.
Come distribuire un’applicazione React con Kinsta
Per distribuire il progetto React sull’Hosting di Kinsta, dovete inviare il progetto al vostro provider Git preferito. Quando il progetto sarà su GitHub, GitLab o Bitbucket, potrete procedere al deploy su Kinsta.
Per distribuire il repository su Kinsta, seguite questi passaggi:
- Accedete o create un account Kinsta nella dashboard MyKinsta.
- Nella barra laterale di sinistra, cliccate su “Applicazioni” e poi su “Aggiungi servizio”.
- Per distribuire un’applicazione React su Kinsta, selezionate “Applicazione” dal menu a tendina.
- Nella finestra di dialogo, scegliete il repository che volete distribuire. Se avete più branch, potete selezionare il branch desiderato e dare un nome alla vostra applicazione.
- Selezionate uno dei 25 data center disponibili. Kinsta rileva automaticamente il comando di avvio dell’applicazione.
Infine, non è sicuro inviare le chiavi API a host pubblici come il vostro provider Git. Potete però aggiungerle come variabili d’ambiente utilizzando lo stesso nome e valore della variabile specificata nel file .env.
Una volta avviata la distribuzione dell’applicazione, il processo inizia e in genere si conclude in pochi minuti. Una distribuzione riuscita genera un link all’applicazione, del tipo https://site-builder-ndg9i.kinsta.app/.
Riepilogo
In questo articolo abbiamo visto come utilizzare programmaticamente l’API di Kinsta per creare un sito WordPress e integrare l’API in un’applicazione React. Ricordate sempre di tenere al sicuro la vostra chiave API e ogni volta che ritienete di averla condivisa pubblicamente, revocatela e createne una nuova.
L’API di Kinsta può essere utilizzata non solo per creare un sito WordPress ma anche per recuperare informazioni sui vostri siti WordPress, sui domini e per moltre altre operazioni. Permette anche di accedere ai servizi Kinsta come database e applicazioni.
Quale endpoint vi piacerebbe che aggiungessimo alle API di Kinsta e cosa vorreste veder realizzato con le API di Kinsta? Scrivetecelo nei commenti.
Lascia un commento