WordPress is een populair contentmanagementsysteem dat miljoenen websites over het hele internet aandrijft. Het biedt een gebruiksvriendelijke interface en een groot aantal aanpassingsmogelijkheden.
Het maken van WordPress sites kan tijdrovend zijn, vooral bij het handmatig uitvoeren van terugkerende taken. Kinsta heeft dit proces versneld en vereenvoudigd met het MyKinsta dashboard, dat ook een tijdelijk domein biedt om direct te testen. De introductie van de Kinsta API betekent echter dat developers hun workflow voor het maken van sites kunnen verbeteren en aangepaste interfaces kunnen ontwikkelen om aan specifieke behoeften te voldoen.
Deze tutorial gaat in op het benutten van de kracht van de Kinsta API om WordPress sites te maken. En we gebruiken de React JavaScript bibliotheek om te demonstreren hoe je een applicatie kunt bouwen die WordPress sites maakt zonder MyKinsta.
Hier zie je een live demo van de Sitebuilder applicatie.
De Kinsta API begrijpen
De Kinsta API is een krachtig hulpmiddel waarmee je programmatisch kunt communiceren met Kinsta’s Managed WordPress Hosting platform. Het kan helpen bij het automatiseren van verschillende taken met betrekking tot de diensten van Kinsta, waaronder het maken van sites, het ophalen van site-informatie, het opvragen van de status van een site en nog veel meer.
Deze API vereenvoudigt het opzetten van WordPress sites, wat het tot een tool van onschatbare waarde maakt voor developers. Om de API van Kinsta te gebruiken, moet je een account hebben met ten minste één WordPress site, applicatie of database in MyKinsta. Je moet ook een API-sleutel genereren om je te authenticeren en toegang te krijgen tot je account via de API.
Om een API-sleutel te genereren:
- Ga naar je MyKinsta dashboard.
- Navigeer naar de pagina API sleutels (Je naam > Bedrijfsinstellingen > API sleutels).
- Klik op API sleutel genereren.
- Kies een vervaldatum of stel een aangepaste begindatum in en het aantal uren dat de sleutel moet verlopen.
- Geef de sleutel een unieke naam.
- Klik op Genereer.
Nadat je een API sleutel hebt gemaakt, moet je deze kopiëren en ergens veilig opslaan (we raden aan een wachtwoordmanager te gebruiken), omdat dit de enige keer is dat de sleutel wordt getoond binnen MyKinsta. Je kunt meerdere API sleutels genereren – ze staan vermeld op de pagina API sleutels. Als je een API sleutel wilt intrekken, klik je op Intrekken naast de sleutel die je wilt intrekken.
Een WordPress site maken met de Kinsta API
Nu je API sleutel klaar is, gaan we een WordPress site maken met de Kinsta API. Om dit te doen gebruik je het /sites endpoint, dat een payload verwacht met de volgende gegevens:
- company: Deze parameter verwacht een unieke bedrijfs-ID die je kunt vinden in de instellingen van MyKinsta. Het helpt bij het identificeren van het bedrijf dat is gekoppeld aan de WordPress site.
- display_name: De displaynaam, die hetzelfde is als de sitenaam op MyKinsta, helpt bij het identificeren van je site. Alleen gebruikt in MyKinsta. Het wordt gebruikt voor het tijdelijke domein van je WordPress site en WordPress admin (voor de Kinsta API is het display_name.kinsta.cloud en display_name.kinsta.cloud/wp-admin).
- region: Met deze parameter kun je kiezen uit 37 datacenterlocatie voor je website. Door een regio te kiezen die het dichtst bij je doelgroep ligt, kun je de prestaties en snelheid van je website verbeteren (Zie de lijst met beschikbare regio’s).
- install_mode: Deze parameter bepaalt het type WordPress installatie. De standaardwaarde is “plain”, waarmee een gewone WordPress site wordt opgezet. Andere opties zijn “new” voor een nieuwe installatie en aanvullende modi afhankelijk van specifieke vereisten.
- is_subdomain_multisite: Deze booleaanse (waar/onwaar) parameter geeft aan of de WordPress site moet worden geconfigureerd als een multisite met behulp van subdomeinen.
- admin_email: Deze parameter verwacht het e-mailadres van de WordPress admin. Het wordt gebruikt voor administratieve doeleinden en het ontvangen van belangrijke meldingen.
- admin_password: Deze parameter wordt gebruikt om het wachtwoord voor de WordPress admin gebruikersaccount in te stellen. Kies een veilig wachtwoord om je site te beschermen.
- admin_user: Deze parameter stelt de gebruikersnaam in voor het WordPress admin gebruikersaccount. Deze wordt gebruikt om in te loggen op het WordPress dashboard en de site te beheren.
- is_multisite: Vergelijkbaar met
is_subdomain_multisite, deze boolean parameter bepaalt of de WordPress site als multisite moet worden geconfigureerd. - site_title: Deze parameter staat voor de titel van je WordPress site. Hij verschijnt bovenaan elke pagina van de site. Je kunt hem later altijd nog wijzigen.
- woocommerce: Deze boolean parameter geeft aan of je de WooCommerce plugin wilt installeren tijdens het maken van de WordPress site.
- wordpressseo: Deze parameter regelt de installatie van de Yoast SEO plugin tijdens het maken van de site.
- wp_language: Deze parameter verwacht een stringwaarde die de taal/locale van je WordPress site weergeeft (ontdek hier je WordPress taal).
Nu begrijp je hopelijk elke parameter. Dit is een voorbeeld van hoe de payload die je naar de Kinsta API stuurt eruit ziet:
{
"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"
}Als je de modus van je voorkeur gebruikt, kun je een POST verzoek naar de Kinsta API sturen; je hoeft alleen je API sleutel in te stellen om een WordPress site te maken. Laten we voor dit voorbeeld de JavaScript Fetch API gebruiken:
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);
}De bovenstaande code gebruikt de JavaScript Fetch API om een POST verzoek naar de Kinsta API te sturen voor het maken van een WordPress site. De createWPSite functie handelt het proces af. Binnen de functie wordt een Fetch verzoek gedaan naar de Kinsta API’s /sites met de benodigde data.
Het antwoord wordt geparst als JSON met resp.json() en het resultaat wordt gelogd op de console. Zorg ervoor dat je <YOUR_KEY_HERE> vervangt door je API sleutel, pas de payload waarden aan en call createWPSite() om een WordPress site te maken met behulp van de Kinsta API.
Zo ziet het antwoord eruit:
{
"operation_id": "sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"message": "Adding site in progress",
"status": 202
}Bewerkingen controleren met de Kinsta API
Zodra je een site aanmaakt met de Kinsta API, is het belangrijk om de voortgang van de operatie te volgen. Dit kan programmatisch worden gedaan zonder MyKinsta te controleren met het Kinsta API /operations endpoint.
Om bewerkingen te monitoren, gebruik je de operation_id die je krijgt bij het initiëren van een bewerking, zoals het maken van een WordPress site. Geef de operation_id als parameter door aan het /operations endpoint.
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);De bovenstaande code haalt informatie op over een bewerking door een GET verzoek te sturen naar het /operations endpoint met de juiste operation_id. Het verzoek bevat de API sleutel voor authenticatie.
Wanneer de responsgegevens van de API worden ontvangen, worden deze naar de console gelogd. Het antwoord geeft waardevolle informatie over de status en voortgang van de operatie. Als bijvoorbeeld het aanmaken van de WordPress site nog bezig is, ziet het antwoord er als volgt uit:
{
"status": 202,
"message": "Operation in progress",
"data": null
}Als de bewerking met succes is voltooid, is dit de respons:
{
"message": "Successfully finished request",
"status": 200,
"data": null
}je kan nu programmatisch een WordPress site maken en de werking ervan controleren met behulp van de Kinsta API. Om deze functionaliteit te verbeteren, gaan we nog een stap verder en ontwikkelen we een aangepaste gebruikersinterface (UI) die deze bewerkingen kan uitvoeren. Op deze manier kunnen zelfs mensen zonder technische expertise profiteren van de mogelijkheden van de API.
Een React applicatie bouwen om een WordPress site te maken met Kinsta API
Om te beginnen zet je een React projectstructuur op en installeer je de benodigde dependencies. Integreer de Kinsta API in je React applicatie met Fetch API of andere HTTP request libraries, zoals Axios.
Vereiste
Om dit project te kunnen volgen, is het raadzaam om een basiskennis te hebben van HTML, CSS en JavaScript en enige bekendheid met React. De belangrijkste focus van dit project is het demonstreren van het gebruik van de Kinsta API, dus dit artikel gaat niet in op de details van het maken van UI of styling.
Aan de slag
Om het opzetten van het project te stroomlijnen, is er een startersproject voor je voorbereid. Volg deze stappen om te beginnen:
1. Creëer een Git repository met behulp van deze template op GitHub. Selecteer Use this template > Create a new repository om de startcode naar een nieuwe repository binnen je GitHub account te kopiëren, en zorg ervoor dat je het vakje om alle branches mee te nemen aanvinkt.
2. Trek het repository naar je lokale computer en schakel over naar de startbestanden branch met het onderstaande commando:
git checkout starter-files3. Installeer de benodigde dependencies door het commando npm install uit te voeren. Als de installatie voltooid is, kun je het project op je lokale computer starten met npm run start. Dit opent het project op http://localhost:3000/.
De projectbestanden begrijpen
Binnen de src map van dit project zijn twee belangrijke submappen: components en pages. De components map bevat herbruikbare componenten, zoals de header en footer, die worden gebruikt in zowel de Home als de Details pagina.
In dit project ligt je primaire focus op het implementeren van de logica op de Home en Details pagina’s, omdat de styling en routing al klaar zijn.
De Homepage heeft een formulier dat verschillende gegevensvelden verzamelt die worden doorgegeven aan de Kinsta API. Het antwoord van deze pagina wordt opgeslagen in de localStorage (je kunt alternatieve methoden onderzoeken voor het opslaan van de ID van de operatie, die cruciaal is voor het controleren van de status van de operatie).
Op de Details pagina wordt de ID van de operatie opgehaald uit loaclStoage en doorgegeven aan het /operation endpoint van de Kinsta API als parameter om de status van de operatie te controleren. In dit project nemen we een knop op waarmee gebruikers de status met tussenpozen kunnen controleren (je kunt de methode setInterval gebruiken om dit proces te automatiseren).
Interactie met de Kinsta API in React
Nu de gebruikersinterface (UI) klaar is, is de volgende stap het afhandelen van de formulierindiening op de homepage en het sturen van een POST-verzoek naar het /sites endpoint van de Kinsta API. Dit verzoek bevat de verzamelde formuliergegevens als payload, waardoor we een WordPress site kunnen maken.
Voor interactie met de Kinsta API heb je je bedrijfs-ID en API sleutel nodig. Zodra je deze gegevens hebt, kun je ze het beste veilig opslaan als omgevingsvariabelen in je React applicatie.
Om de omgevingsvariabelen in te stellen, maak je een .env bestand aan in de hoofdmap van je project. Voeg in dit bestand de volgende regels toe:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Om toegang te krijgen tot deze omgevingsvariabelen binnen je project, kun je de syntax process.env.THE_VARIABLE gebruiken. Om bijvoorbeeld toegang te krijgen tot REACT_APP_KINSTA_COMPANY_ID, gebruik je process.env.REACT_APP_KINSTA_COMPANY_ID.
Formuliergegevens ophalen in React
In het Home.jsx bestand staat een formulier. Je moet logica aan het formulier toevoegen om gegevens op te halen en deze te valideren als ze worden verzonden. Om de formuliergegevens in je React applicatie op te halen, gebruik je de gecontroleerde componenten aanpak van React samen met de useState haak. Met deze aanpak kun je een status maken voor elk formulierveld en deze bijwerken als de gebruiker gegevens invoert.
Importeer eerst de useState hook bovenaan je bestand:
import React, { useState } from 'react';Stel vervolgens een state variabele in voor elk formulierveld binnen je functionele component. Als je bijvoorbeeld een invoerveld hebt voor de “Title of the site”, kun je een state variabele maken met de naam siteTitle:
const [siteTitle, setSiteTitle] = useState('');Hier is siteTitle de state variabele die de waarde van het invoerveld “Title of the site” bevat, en setSiteTitle is de bijbehorende functie voor het bijwerken van de state.
Om de formuliervelden aan hun respectievelijke toestandswaarden te binden, voeg je de attributen value en onChange toe aan elk invoerelement. Bijvoorbeeld het invoerveld “Title of the website”:
<input
type="text"
className="form-control"
value={siteTitle}
onChange={(event) => setSiteTitle(event.target.value)}
/>In dit voorbeeld is het value attribuut ingesteld op de siteTitle state variabele, zodat het invoerveld de huidige waarde van siteTitle weergeeft. De onChange event handler is ingesteld op de setSiteTitle functie, die de siteTitle state bijwerkt met de nieuwe waarde telkens als de gebruiker in het invoerveld typt.
Door deze aanpak voor elk formulierveld te volgen, kun je de benodigde state variabelen maken en ze bijwerken als de gebruiker interactie heeft met het formulier. Hierdoor kun je eenvoudig toegang krijgen tot de ingevoerde waarden wanneer het formulier wordt verzonden en verdere acties of validatie uitvoeren met de formuliergegevens.
Als je dit voor alle formuliervelden doet, ziet je Home.jsx bestand er als volgt uit:
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;Validatie formuliervelden implementeren met useRef hook
Om formulierveldvalidatie in React te implementeren, kunnen we de volgende stappen volgen. Laten we ons richten op het implementeren van validatie voor de velden “Display name” en “WordPress admin email”.
Eerst moeten we referenties maken met de useRef hook om de weergave van de foutmeldingen te regelen. Importeer de useRef hook en maak de benodigde refs aan voor elk veld:
import { useRef } from 'react';
const displayNameRef = useRef(null);
const wpEmailRef = useRef(null);Vervolgens koppelen we de refs aan de overeenkomstige foutberichtelementen in de formuliervelden. Bijvoorbeeld, voor het veld “Display name” voeg je de ref toe aan de tag span, die de foutmelding bevat:
<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>Op dezelfde manier voor het veld “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>Nu kunnen we de validatiefuncties maken die de invoerwaarden controleren en beslissen of de foutmeldingen moeten worden weergegeven. Hier zijn de functies voor “Display name” en “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';
}
}Deze functies worden gecalled wanneer de corresponderende invoervelden worden gewijzigd. Ze vergelijken de invoerwaarden met de validatiecriteria en werken de weergave van de foutmeldingen bij door de eigenschap style.display van de foutberichtelementen te manipuleren.
Voel je vrij om extra validaties te implementeren of de validatielogica aan te passen aan je eisen.
Afhandeling van formulierverzending in React
Bij het afhandelen van het formulierverzendingsevent voor het maken van een site moeten we verschillende taken uitvoeren. Eerst voegen we een onSubmit event handler toe aan het <form> element. Binnen de createSite functie voorkomen we het standaard verzendgedrag door event.preventDefault() te callen. Hierdoor kunnen we de indiening programmatisch afhandelen.
Om er zeker van te zijn dat de formuliergegevens geldig zijn voordat we verder gaan met verzenden, roepen we de validatiemethoden checkDisplayName en checkWpAdminEmail aan. Deze methoden controleren of de verplichte velden voldoen aan de opgegeven criteria.
const createSite = (e) => {
e.preventDefault();
checkDisplayName();
checkWpAdminEmail();
// Additional logic
};Ervan uitgaande dat alle validaties slagen en de vereiste velden geldige gegevens bevatten, gaan we verder met het leegmaken van de localStorage om te zorgen voor een schone state voor het opslaan van de API respons en de display name.
Doe vervolgens een API verzoek aan de Kinsta API met de fetch functie. Het verzoek is een POST methode naar het https://api.kinsta.com/v2/sites endpoint. Zorg ervoor dat je de nodige headers en payload als JSON meestuurt.
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
};De payload bevat verschillende gegevensvelden die de Kinsta API nodig heeft, zoals de bedrijfs-ID, display name, regio, installatiemodus, admin e-mail, admin wachtwoord, enz. Deze waarden worden verkregen uit de bijbehorende state variabelen.
Nadat we het API verzoek hebben gedaan, wachten we op de respons met await resp.json() en extraheren we de relevante gegevens. We maken een nieuw object newData, met het bedrijfs-ID en de display name, dat vervolgens wordt opgeslagen in de localStorage met 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');
}Tot slot callen we de functie createSiteWithKinstaAPI , zodat wanneer een gebruiker het formulier invult en op de knop klikt, er een WordPress site wordt gemaakt met behulp van de Kinsta API. Bovendien wordt in de code vermeld dat de gebruiker wordt doorgestuurd naar de details.jsx pagina om de werking met de Kinsta API bij te houden. Om de navigatiefunctionaliteit in te schakelen, importeer je useNavigate van react-router-dom en initialiseer je deze.
Herinnering: Je kunt de volledige code voor deze pagina vinden op de GitHub repository.
Operationele statuscontrole implementeren met de Kinsta API
Om de status van de bewerking met de Kinsta API te controleren, gebruiken we de bewerkings ID die is opgeslagen in de localStorage. Dit ID van de operatie wordt opgehaald uit de localStorage met JSON.parse(localStorage.getItem('state')) en toegewezen aan een variabele.
Om de status van de operatie te controleren, doe je nog een API verzoek naar de Kinsta API door een GET verzoek te sturen naar het /operations/{operationId} endpoint. Dit verzoek bevat de nodige headers, zoals de Authorization header die de API sleutel bevat.
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);
}Zodra we de respons ontvangen, halen we de relevante gegevens uit de respons met await resp.json(). De bewerkingsgegevens worden vervolgens bijgewerkt in de status met setOperationData(data).
In het return statement van de component geven we het bericht over de bewerking weer met operationData.message. We bieden ook een knop waarmee de gebruiker handmatig de controle van de status van de operatie kan starten door checkOperation te callen.
Bovendien kan de gebruiker, als de status van de bewerking aangeeft dat deze met succes is voltooid, de toegevoegde links gebruiken om toegang te krijgen tot de WordPress admin en de site zelf. De links worden gemaakt met behulp van de stateData.display_name die is verkregen uit 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>Als je op deze links klikt, worden respectievelijk de WordPress admin en de URL van de site in een nieuw tabblad geopend, zodat de gebruiker ze kan openen zonder naar MyKinsta te hoeven navigeren.
Nu kun je eenvoudig een WordPress site maken via je custom applicatie.
Je React applicatie deployen met Kinsta
Om je React project te deployen op Kinsta’s Applicatie Hosting, moet je het project pushen naar de Git provider van je voorkeur. Als je project is gehost op GitHub, GitLab of Bitbucket, kun je het deployen naar Kinsta.
Om je repository naar Kinsta te deployen, volg je deze stappen:
- Log in of maak je Kinsta account aan op het MyKinsta dashboard.
- Klik in de linker zijbalk op “Applicaties” en vervolgens op “Dienst toevoegen”.
- Selecteer “Applicatie” in het vervolgkeuzemenu om een React applicatie te deployen op Kinsta.
- Kies in het venster dat verschijnt de repository die je wilt deplyen. Als je meerdere branches hebt, kun je de gewenste branch selecteren en een naam geven aan je applicatie.
- Selecteer een van de beschikbare datacenterlocaties uit de lijst met 25 opties. Kinsta detecteert automatisch het start commando voor je applicatie.
Tot slot: het is niet veilig om API sleutels naar publieke hosts zoals je Git provider te pushen. Bij het hosten kun je ze toevoegen als omgevingsvariabelen met dezelfde variabelennaam en waarde die zijn opgegeven in het .env bestand.
Zodra je de deployment van je applicatie start, begint het proces en is meestal binnen een paar minuten klaar. Een succesvolle deployment genereert een link naar je applicatie, zoals https://site-builder-ndg9i.kinsta.app/.
Samenvatting
In dit artikel heb je geleerd hoe je de Kinsta API programmatisch kunt gebruiken om een WordPress site te maken en de API te integreren in een React applicatie. Denk er altijd aan om je API sleutel veilig te bewaren en wanneer je het gevoel hebt dat je hem publiekelijk hebt gedeeld, trek hem dan in en maak een nieuwe aan.
Kinsta API kan niet alleen worden gebruikt om een WordPress site te maken, maar ook om informatie op te halen over je WordPress sites, domeinen en nog veel meer. Je hebt ook toegang tot Kinsta diensten zoals databases en applicaties.
Welk endpoint zou jij graag als volgende toegevoegd zien aan de Kinsta API, en wat zou jij graag zien dat we als volgende bouwen met de Kinsta API? Laat het ons weten in de reacties.
Laat een reactie achter