WordPress est un système de gestion de contenu populaire qui équipe des millions de sites web sur l’internet. Il offre une interface conviviale et un large éventail d’options de personnalisation.
La création de sites WordPress peut prendre beaucoup de temps, en particulier lorsqu’il s’agit d’effectuer manuellement des tâches répétitives. Kinsta a simplifié et accéléré ce processus avec le tableau de bord MyKinsta, qui fournit également un domaine temporaire pour des tests immédiats. Cependant, l’introduction de l’API de Kinsta signifie que les développeurs peuvent améliorer le flux de travail de création de sites et développer des interfaces personnalisées pour répondre à des besoins spécifiques.
Ce tutoriel vise à exploiter la puissance de l’API Kinsta pour créer des sites WordPress. Nous utilisons la bibliothèque React JavaScript pour montrer comment construire une application qui crée des sites WordPress sans MyKinsta.
Voici une démonstration en direct de l’application de création de sites.
Comprendre l’API de Kinsta
L’API de Kinsta est un outil puissant qui vous permet d’interagir avec la plateforme d’hébergement WordPress infogéré de Kinsta de manière programmatique. Il peut vous aider à automatiser diverses tâches liées aux services fournis par Kinsta, y compris la création de sites, la récupération d’informations sur les sites, l’obtention du statut d’un site, et bien plus encore.
Cette API simplifie la création de sites WordPress, ce qui en fait un outil précieux pour les développeurs. Pour utiliser l’API de Kinsta, vous devez avoir un compte avec au moins un site, une application ou une base de données WordPress dans MyKinsta. Vous devez également générer une clé API pour vous authentifier et accéder à votre compte via l’API.
Pour générer une clé API :
- Allez sur votre tableau de bord MyKinsta.
- Naviguez jusqu’à la page des clés API (Votre nom > Réglages de l’entreprise > Clés API).
- Cliquez sur Créer une clé API.
- Choisissez une date d’expiration ou définissez une date de début personnalisée et un nombre d’heures pour l’expiration de la clé.
- Donnez un nom unique à la clé.
- Cliquez sur Générer.
Après avoir créé une clé API, copiez-la et conservez-la dans un endroit sûr (nous vous recommandons d’utiliser un gestionnaire de mot de passe), car c’est la seule fois où elle sera révélée dans MyKinsta. Vous pouvez générer plusieurs clés API – elles sont listées sur la page Clés API. Si vous devez révoquer une clé API, cliquez sur Révoquer à côté de celle que vous souhaitez révoquer.
Créer un site WordPress avec l’API Kinsta
Maintenant que votre clé API est prête, créons un site WordPress avec l’API Kinsta. Pour cela, utilisez le point de terminaison /sites qui attend une charge utile contenant les données suivantes :
- company : Ce paramètre attend un identifiant unique de l’entreprise qui peut être trouvé dans les réglages de MyKinsta. Il permet d’identifier la société associée au site WordPress.
- display_name : Le nom d’affichage, qui est le même que le nom du site sur MyKinsta, vous aide à identifier votre site. Utilisé uniquement dans MyKinsta. Il est utilisé pour le domaine temporaire de votre site WordPress et de votre administrateur WordPress (pour l’API Kinsta, il s’agit de display_name.kinsta.cloud et display_name.kinsta.cloud/wp-admin).
- region : Ce paramètre vous permet de choisir parmi 37 l’emplacement du centre de données pour votre site web. La sélection d’une région proche de votre public cible peut contribuer à améliorer les performances et la vitesse du site web (voir la liste des régions disponibles).
- install_mode : Ce paramètre détermine le type d’installation de WordPress. La valeur par défaut est « plain », ce qui permet de créer un site WordPress normal. D’autres options incluent « new » pour une nouvelle installation et d’autres modes en fonction des besoins spécifiques.
- is_subdomain_multisite : Ce paramètre booléen (true/false) indique si le site WordPress doit être configuré comme un multisite utilisant des sous-domaines.
- admin_email : Ce paramètre attend l’adresse e-mail de l’administrateur de WordPress. Il est utilisé à des fins administratives et pour recevoir des notifications importantes.
- admin_password : Ce paramètre est utilisé pour définir le mot de passe du compte utilisateur de l’administrateur de WordPress. Choisissez un mot de passe sûr pour protéger votre site.
- admin_user : Ce paramètre définit le nom d’utilisateur du compte d’utilisateur administrateur de WordPress. Il est utilisé pour se connecter au tableau de bord de WordPress et gérer le site.
- is_multisite : Similaire à
is_subdomain_multisite, ce paramètre booléen détermine si le site WordPress doit être configuré comme un multisite. - site_title : Ce paramètre représente le titre de votre site WordPress. Il apparaît en haut de chaque page du site. Vous pouvez toujours le modifier ultérieurement.
- woocommerce : Ce paramètre booléen indique si vous souhaitez installer l’extension WooCommerce lors de la création du site WordPress.
- wordpressseo : Ce paramètre contrôle l’installation de l’extension Yoast SEO lors de la création du site.
- wp_language : Ce paramètre attend une chaîne de caractères qui représente la langue/locale de votre site WordPress (découvrez votre locale WordPress ici).
Maintenant que vous comprenez chaque paramètre. Voici un exemple de ce à quoi ressemble la charge utile que vous envoyez à l’API 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"
}En utilisant votre mode préféré, vous pouvez envoyer une requête POST à l’API de Kinsta ; il vous suffit de définir votre clé API pour créer un site WordPress. Pour cet exemple, utilisons l’API JavaScript Fetch:
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);
}Le code ci-dessus utilise l’API JavaScript Fetch pour envoyer une requête POST à l’API Kinsta afin de créer un site WordPress. La fonction createWPSite gère le processus. Dans la fonction, une requête Fetch est faite à l’adresse /sites endpoint with the necessary data.
La réponse est analysée en JSON à l’aide de resp.json(), et le résultat est enregistré dans la console. Assurez-vous de remplacer <YOUR_KEY_HERE> par votre clé API, ajustez les valeurs de la charge utile et appelez createWPSite() pour créer un site WordPress à l’aide de l’API Kinsta.
Voici à quoi ressemble la réponse :
{
"operation_id": "sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"message": "Adding site in progress",
"status": 202
}Suivi des opérations avec l’API Kinsta
Une fois que vous avez lancé la création d’un site avec l’API Kinsta, il est important de suivre la progression de l’opération. Cela peut être fait de manière programmatique sans avoir à vérifier MyKinsta avec le point de terminaison de l’API Kinsta /operations de l’API Kinsta.
Pour suivre les opérations, utilisez operation_id obtenu lors de l’initiation d’une opération, comme la création d’un site WordPress. Passez le operation_id comme paramètre au point de terminaison /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);Le code ci-dessus récupère des informations sur une opération en envoyant une requête GET au point de terminaison /operations avec l’adresse operation_id appropriée. La requête inclut la clé API pour l’authentification.
Lorsque les données de réponse sont reçues de l’API, elles sont enregistrées dans la console. La réponse fournit des informations précieuses sur l’état et la progression de l’opération. Par exemple, si la création d’un site WordPress est toujours en cours, la réponse ressemble à ceci :
{
"status": 202,
"message": "Operation in progress",
"data": null
}De même, une fois l’opération terminée avec succès, voici la réponse :
{
"message": "Successfully finished request",
"status": 200,
"data": null
}À ce stade, vous pouvez créer un site WordPress de manière programmatique et vérifier son fonctionnement à l’aide de l’API de Kinsta. Pour améliorer cette fonctionnalité, allons plus loin et développons une interface utilisateur (IU) personnalisée qui peut gérer ces opérations. De cette façon, même les personnes sans expertise technique peuvent profiter des capacités de l’API.
Création d’une application React pour créer un site WordPress avec l’API Kinsta
Pour commencer, mettez en place une structure de projet React et installez les dépendances nécessaires. Intégrez l’API Kinsta dans votre application React avec Fetch API ou d’autres bibliothèques de requêtes HTTP, comme Axios.
Pré-requis
Pour suivre ce projet, il est conseillé d’avoir une compréhension de base de HTML, CSS et JavaScript et une certaine familiarité avec React. L’objectif principal de ce projet est de démontrer l’utilisation de l’API Kinsta, c’est pourquoi cet article n’entre pas dans les détails de la création ou du style de l’interface utilisateur.
Pour commencer
Pour simplifier le processus de configuration du projet, un projet de démarrage a été préparé pour vous. Suivez les étapes suivantes pour commencer :
1. Créez un dépôt Git en utilisant ce modèle sur GitHub. Sélectionnez Utiliser ce modèle > Créer un nouveau dépôt pour copier le code de démarrage dans un nouveau dépôt au sein de votre compte GitHub, et assurez-vous de cocher la case pour inclure toutes les branches.
2. Transférez le dépôt sur votre ordinateur local et passez au répertoire starter-files à l’aide de la commande ci-dessous :
git checkout starter-files3. Installez les dépendances nécessaires en exécutant la commande npm install. Une fois l’installation terminée, vous pouvez lancer le projet sur votre ordinateur local en exécutant la commande npm run start. Le projet s’ouvre alors à l’adresse http://localhost:3000/.
Comprendre les fichiers du projet
Le dossier src de ce projet comprend deux sous-dossiers principaux : components et pages. Le dossier components contient des composants réutilisables, tels que le header et le footer, utilisés dans les pages Home et Details.
Dans ce projet, vous vous concentrerez principalement sur la mise en œuvre de la logique sur les pages Accueil et Détails, car le style et le routage sont déjà réalisés.
La page d’accueil comporte un formulaire qui recueille divers champs de données qui sont transmis à l’API Kinsta. La réponse de cette page est stockée dans localStorage (vous pouvez explorer d’autres méthodes pour stocker l’identifiant de l’opération, qui est crucial pour vérifier le statut de l’opération).
Sur la page Détails, l’identifiant de l’opération est extrait de loaclStoage et transmis au point de terminaison /operation de l’API Kinsta en tant que paramètre pour vérifier l’état de l’opération. Dans ce projet, nous incluons un bouton qui permet aux utilisateurs de vérifier le statut par intermittence (vous pouvez utiliser la méthode setInterval pour automatiser ce processus).
Interagir avec l’API Kinsta dans React
L’interface utilisateur (UI) étant maintenant en place, votre prochaine étape consiste à gérer l’envoi du formulaire sur la page d’accueil et à envoyer une requête POST au point de terminaison /sites de l’API Kinsta. Cette requête inclut les données du formulaire collectées en tant que charge utile, ce qui nous permet de créer un site WordPress.
Pour interagir avec l’API Kinsta, vous avez besoin de l’id de votre entreprise et de la clé API. Une fois que vous avez ces informations d’identification, il est préférable de les stocker en toute sécurité en tant que variables d’environnement dans votre application React.
Pour configurer les variables d’environnement, créez un fichier .env dans le dossier racine de votre projet. Dans ce fichier, ajoutez les lignes suivantes :
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Pour accéder à ces variables d’environnement dans votre projet, vous pouvez utiliser la syntaxe process.env.THE_VARIABLE. Par exemple, pour accéder à REACT_APP_KINSTA_COMPANY_ID, vous devez utiliser process.env.REACT_APP_KINSTA_COMPANY_ID.
Récupération des données du formulaire dans React
Le fichier Home.jsx contient un formulaire. Vous devez ajouter une logique au formulaire pour obtenir des données et les valider lorsqu’elles sont soumises. Pour récupérer les données du formulaire dans votre application React, utilisez l’approche des composants contrôlés de React avec le useState hook. Cette approche vous permet de créer un état pour chaque champ du formulaire et de le mettre à jour au fur et à mesure que l’utilisateur saisit des données.
Tout d’abord, importez le hook useState au début de votre fichier :
import React, { useState } from 'react';Ensuite, configurez une variable d’état pour chaque champ de formulaire dans votre composant fonctionnel. Par exemple, si vous avez un champ de saisie pour le titre du site, vous pouvez créer une variable d’état appelée siteTitle:
const [siteTitle, setSiteTitle] = useState('');Ici, siteTitle est la variable d’état qui contient la valeur du champ de saisie titre du site et setSiteTitle est la fonction de mise à jour d’état correspondante.
Pour lier les champs du formulaire à leurs valeurs d’état respectives, ajoutez les attributs value et onChange à chaque élément de saisie. Par exemple, le champ de saisie de titre du site :
<input
type="text"
className="form-control"
value={siteTitle}
onChange={(event) => setSiteTitle(event.target.value)}
/>Dans cet exemple, l’attribut value est associé à la variable d’état siteTitle, ce qui garantit que le champ de saisie affiche la valeur actuelle de siteTitle. Le gestionnaire d’événements onChange est associé à la fonction setSiteTitle, qui met à jour l’état siteTitle avec la nouvelle valeur chaque fois que l’utilisateur tape dans le champ de saisie.
En suivant cette approche pour chaque champ de formulaire, vous pouvez créer les variables d’état nécessaires et les mettre à jour au fur et à mesure que l’utilisateur interagit avec le formulaire. Cela vous permet d’accéder facilement aux valeurs saisies lorsque le formulaire est soumis et d’effectuer d’autres actions ou validations avec les données du formulaire.
Lorsque vous procédez ainsi pour tous les champs du formulaire, votre fichier Home.jsx ressemble à ceci :
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;Mise en œuvre de la validation des champs de formulaire avec le hook useRef
Pour mettre en œuvre la validation des champs de formulaire dans React, nous pouvons suivre les étapes suivantes. Concentrons-nous sur l’implémentation de la validation pour les champs « Display name » et « WordPress admin email ».
Tout d’abord, nous devons créer des références en utilisant le hook useRef pour contrôler l’affichage des messages d’erreur. Importez le hook useRef et créez les références nécessaires pour chaque champ :
import { useRef } from 'react';
const displayNameRef = useRef(null);
const wpEmailRef = useRef(null);Ensuite, nous attachons les références aux éléments de message d’erreur correspondants dans les champs du formulaire. Par exemple, pour le champ « Display name », vous ajoutez le ref à la balise span, qui contient le message d’erreur :
<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>De même, pour le champ « 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>Nous pouvons maintenant créer les fonctions de validation qui vérifient les valeurs saisies et décident d’afficher ou non les messages d’erreur. Voici les fonctions pour « Display name » et « WordPress admin email » :
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';
}
}Ces fonctions sont appelées chaque fois que les champs de saisie correspondants sont modifiés. Elles comparent les valeurs de saisie aux critères de validation et mettent à jour l’affichage des messages d’erreur en manipulant la propriété style.display des éléments du message d’erreur.
N’hésitez pas à mettre en œuvre des validations supplémentaires ou à personnaliser la logique de validation en fonction de vos besoins.
Gestion de l’envoi de formulaire dans React
Lorsque nous traitons l’événement d’envoi de formulaire pour la création d’un site, nous devons effectuer plusieurs tâches. Tout d’abord, nous attachons un gestionnaire d’événement onSubmit à l’élément <form>. À l’intérieur de la fonction createSite, nous empêchons le comportement d’envoi de formulaire par défaut en appelant event.preventDefault(). Cela nous permet de gérer l’envoi de manière programmatique.
Pour nous assurer que les données du formulaire sont valides avant de procéder à la soumission, nous invoquons les méthodes de validation checkDisplayName et checkWpAdminEmail. Ces méthodes vérifient que les champs obligatoires répondent aux critères spécifiés.
const createSite = (e) => {
e.preventDefault();
checkDisplayName();
checkWpAdminEmail();
// Additional logic
};Si toutes les validations sont réussies et que les champs obligatoires contiennent des données valides, nous procédons à l’effacement de localStorage afin de garantir un état propre pour le stockage de la réponse de l’API et du nom d’affichage.
Ensuite, faites une demande d’API à l’API Kinsta à l’aide de la fonction fetch. La requête est une méthode POST vers le point de terminaison https://api.kinsta.com/v2/sites. Assurez-vous d’inclure les en-têtes nécessaires et la charge utile en 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
};La charge utile contient divers champs de données dont l’API Kinsta a besoin, tels que l’ID de l’entreprise, le nom d’affichage, la région, le mode d’installation, l’e-mail de l’administrateur, le mot de passe de l’administrateur, etc. Ces valeurs sont obtenues à partir des variables d’état correspondantes.
Après avoir effectué la requête API, nous attendons la réponse à l’aide de await resp.json() et extrayons les données pertinentes. Nous créons un nouvel objet newData, avec l’ID de l’opération et le nom d’affichage, qui est ensuite stocké dans le localStorage à l’aide de 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');
}Enfin, nous invoquons la fonction createSiteWithKinstaAPI de sorte que lorsqu’un utilisateur remplit le formulaire et clique sur le bouton, un site WordPress est créé à l’aide de l’API Kinsta. De plus, dans le code, il est mentionné que l’utilisateur est redirigé vers la page details.jsx pour garder une trace de l’opération avec l’API Kinsta. Pour activer la fonctionnalité de navigation, importez useNavigate depuis react-router-dom et initialisez-le.
Rappel : Vous pouvez trouver le code complet de cette page sur le dépôt GitHub.
Mise en œuvre de la vérification de l’état de l’opération avec l’API Kinsta
Afin de vérifier le statut de l’opération avec l’API Kinsta, nous utilisons l’identifiant de l’opération qui a été stocké dans le localStorage. Cet identifiant d’opération est extrait du localStorage à l’aide de JSON.parse(localStorage.getItem('state')) et assigné à une variable.
Pour vérifier le statut de l’opération, faites une autre requête à l’API Kinsta en envoyant une requête GET au point de terminaison /operations/{operationId}. Cette requête comprend les en-têtes nécessaires, tels que l’en-tête Authorization contenant la clé 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);
}Une fois que nous avons reçu la réponse, nous extrayons les données pertinentes de la réponse à l’aide de await resp.json(). Les données de l’opération sont ensuite mises à jour dans l’état à l’aide de setOperationData(data).
Dans l’instruction de retour du composant, nous affichons le message de l’opération à l’aide de operationData.message. Nous fournissons également un bouton qui permet à l’utilisateur de déclencher manuellement la vérification de l’état de l’opération en appelant checkOperation.
En outre, si l’état de l’opération indique qu’elle s’est bien terminée, l’utilisateur peut utiliser les liens ajoutés pour accéder à l’administration de WordPress et au site lui-même. Les liens sont construits à l’aide du site stateData.display_name obtenu à partir de 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>En cliquant sur ces liens, l’administrateur de WordPress et l’URL du site s’ouvrent respectivement dans un nouvel onglet, ce qui permet à l’utilisateur d’y accéder sans avoir à naviguer vers MyKinsta.
Vous pouvez désormais créer un site WordPress facilement via votre application personnalisée.
Comment déployer votre application React avec Kinsta
Pour déployer votre projet React sur l’hébergement d’application de Kinsta, vous devez pousser le projet sur votre fournisseur Git préféré. Lorsque votre projet est hébergé sur GitHub, GitLab ou Bitbucket, vous pouvez procéder au déploiement sur Kinsta.
Pour déployer votre référentiel sur Kinsta, suivez les étapes suivantes :
- Connectez-vous ou créez votre compte Kinsta sur le tableau de bord MyKinsta.
- Dans la colonne latérale de gauche, cliquez sur « Applications », puis sur « Ajouter un service ».
- Sélectionnez « Application » dans le menu déroulant pour déployer une application React sur Kinsta.
- Dans la fenêtre modale qui s’affiche, choisissez le référentiel que vous souhaitez déployer. Si vous avez plusieurs branches, vous pouvez sélectionner la branche souhaitée et donner un nom à votre application.
- Sélectionnez l’un des emplacements de centre de données disponibles dans la liste des options 25. Kinsta détecte automatiquement la commande de démarrage de votre application.
Enfin, il n’est pas sûr d’envoyer les clés d’API à des hôtes publics comme votre fournisseur Git. Lors de l’hébergement, vous pouvez les ajouter en tant que variables d’environnement en utilisant le même nom de variable et la même valeur que ceux spécifiés dans le fichier .env.
Une fois que vous avez lancé le déploiement de votre application, le processus commence et se termine généralement en quelques minutes. Un déploiement réussi génère un lien vers votre application, comme https://site-builder-ndg9i.kinsta.app/.
Résumé
Dans cet article, vous avez appris à utiliser l’API Kinsta de manière programmatique pour créer un site WordPress et intégrer l’API dans une application React. N’oubliez pas de garder votre clé API en sécurité et, lorsque vous pensez l’avoir partagée publiquement, révoquez-la et créez-en une nouvelle.
L’API Kinsta peut être utilisée non seulement pour créer un site WordPress, mais aussi pour récupérer des informations sur vos sites WordPress, vos domaines et bien d’autres choses encore. Elle peut également accéder aux services Kinsta tels que les bases de données et les applications.
Quel point de terminaison aimeriez-vous voir ajouté à l’API Kinsta, et qu’aimeriez-vous que nous construisions avec l’API Kinsta ? Faites-le nous savoir dans les commentaires.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire