O WordPress é um sistema popular de gerenciamento de conteúdo que alimenta milhões de sites na Internet. Ele oferece uma interface fácil de usar e uma ampla gama de opções de personalização.

A criação de sites WordPress pode ser demorada, especialmente quando você executa manualmente tarefas repetitivas. A Kinsta simplificou e agilizou esse processo com o painel MyKinsta, que também fornece um domínio temporário para testes imediatos. No entanto, com a introdução da API da Kinsta, os desenvolvedores podem aprimorar o fluxo de trabalho de criação de sites e desenvolver interfaces personalizadas para atender a necessidades específicas.

Neste tutorial, você aprenderá como utilizar todo o potencial da API da Kinsta para criar facilmente sites WordPress. Também demonstraremos como você pode integrar essa API para um aplicativo React em JavaScript, permitindo a criação de sites WordPress sem depender do MyKinsta.

Aqui está uma demonstração em tempo real do aplicativo construtor de sites.

Aplicativo do construtor de sites
Aplicativo do construtor de sites.

Entendendo a API da Kinsta

A API da Kinsta é uma ferramenta poderosa que permite que você interaja com a plataforma de Hospedagem Gerenciada de WordPress da Kinsta de forma programática. Ela pode ajudar você a automatizar várias tarefas relacionadas aos serviços fornecidos pela Kinsta, incluindo a criação de sites, a recuperação de informações do site, a obtenção do status de um site e muito mais.

Essa API simplifica a configuração de sites WordPress, tornando uma ferramenta inestimável para os desenvolvedores. Para usar a API da Kinsta, você deve ter uma conta com pelo menos um site, aplicativo ou banco de dados do WordPress no MyKinsta. Você também precisa gerar uma chave de API para autenticar e acessar sua conta por meio da API.

Para gerar uma chave de API:

  1. Vá para o painel MyKinsta.
  2. Navegue até a página Chaves API (Seu nome > Configurações da empresa > Chaves API).
  3. Clique em Criar chave API.
  4. Escolha uma expiração ou defina uma data de início personalizada e o número de horas para a chave expirar.
  5. Dê à chave um nome exclusivo.
  6. Clique em Gerar.
Criar chave API no MyKinsta
Criar chave API no MyKinsta.

Após criar uma chave API, copie e armazene em um local seguro (recomendamos o uso de um gerenciador de senhas), pois esta é a única vez em que ela é revelada no MyKinsta. Você pode gerar várias chaves de API – elas são listadas na página de Chaves API. Se precisar revogar uma chave de API, clique em Revogar ao lado daquela que deseja revogar.

Criando um site WordPress com a API da Kinsta

Agora que sua chave de API está pronta, vamos criar um site do WordPress usando a API da Kinsta. Para fazer isso, utilize o endpoint /sites, que espera um payload contendo os seguintes dados:

  • company: Esse parâmetro espera um ID exclusivo da empresa que pode ser encontrado nas configurações do MyKinsta. Ele ajuda a identificar a empresa associada ao site do WordPress.
  • display_name: O nome de exibição, que é o mesmo que o nome do site no MyKinsta, ajuda você a identificar seu site. Usado somente no MyKinsta. É usado para o domínio temporário do seu site WordPress e do administrador do WordPress (para a API Kinsta, é display_name.kinsta.cloud e display_name.kinsta.cloud/wp-admin).
  • region: Esse parâmetro permite que você escolha entre 37 localizações de centros de dados para o seu site. Selecionar uma região mais próxima do seu público-alvo pode ajudar a melhorar o desempenho e a velocidade do site (consulte a lista de regiões disponíveis).
  • install_mode: Esse parâmetro determina o tipo de instalação do WordPress. O valor padrão é “plain”, que configura um site normal do WordPress. Outras opções incluem “new” para uma nova instalação e modos adicionais, dependendo de requisitos específicos.
  • is_subdomain_multisite: Esse parâmetro booleano (true/false) especifica se o site do WordPress deve ser configurado como um site múltiplo usando subdomínios.
  • admin_email: Esse parâmetro espera o endereço de e-mail do administrador do WordPress. Ele é usado para fins administrativos e para receber notificações importantes.
  • admin_password: Esse parâmetro é usado para definir a senha da conta de usuário admin do WordPress. Escolha uma senha segura para proteger o seu site.
  • admin_user: Esse parâmetro define o nome de usuário para a conta de usuário administrador do WordPress. Ele é usado para fazer login no painel do WordPress e gerenciar o site.
  • is_multisite: Semelhante a is_subdomain_multisite, esse parâmetro booleano determina se o site do WordPress deve ser configurado como um multisite.
  • site_title: Esse parâmetro representa o título do seu site do WordPress. Ele aparece na parte superior de todas as páginas do site. Você sempre pode alterá-lo posteriormente.
  • woocommerce: Esse parâmetro booleano indica se você deseja instalar o plugin WooCommerce durante a criação do site do WordPress.
  • wordpressseo: Esse parâmetro controla a instalação do plugin Yoast SEO durante a criação do site.
  • wp_language: Esse parâmetro espera um valor de string de caracteres que represente o idioma/localização  do seu site WordPress (descubra a localização do seu site WordPress aqui).

Agora que você entende cada parâmetro, este é um exemplo de como o payload que você envia para a API da Kinsta deve ser estruturado:

{
  "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"
}

Usando seu modo preferido, você pode enviar uma solicitação POST para a API da Kinsta; você só precisa definir sua chave de API para criar um site WordPress. Para este exemplo, vamos usar a 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);
}

O código acima usa a API JavaScript Fetch para enviar uma solicitação POST à API Kinsta para você criar um site WordPress. A função createWPSite lida com o processo. Dentro da função, uma solicitação Fetch é feita para a API Kinsta /sites endpoint with the necessary data.

A resposta é analisada como JSON usando resp.json(), e o resultado é registrado no console. Certifique-se de que você substitua <YOUR_KEY_HERE> por sua chave de API, ajuste os valores de payload útil e chame createWPSite() para criar um site WordPress usando a API Kinsta.

Esta é a aparência da resposta:

{
    "operation_id": "sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
    "message": "Adding site in progress",
    "status": 202
}

Monitoramento de operações com a API da Kinsta

Depois que você iniciar a criação de um site com a API da Kinsta, é importante acompanhar o progresso da operação. Isso pode ser feito de forma programática sem que você precise verificar o MyKinsta com o ponto de extremidade da API Kinsta /operations da API Kinsta.

Para monitorar as operações, use o operation_id obtido ao iniciar uma operação, como a criação de um site WordPress. Passe o operation_id como um parâmetro para o ponto de extremidade /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);

O código acima recupera informações sobre uma operação enviando uma solicitação GET para o ponto de extremidade /operations com o operation_id apropriado. A solicitação inclui a chave API para autenticação.

Quando os dados de resposta são recebidos da API, eles são registrados no console. A resposta fornece informações valiosas sobre o status e o progresso da operação. Por exemplo, se a criação do site WordPress ainda estiver em andamento, a resposta será semelhante a esta:

{
    "status": 202,
    "message": "Operation in progress",
    "data": null
}

Da mesma forma, quando a operação for concluída com êxito, esta será a resposta:

{
    "message": "Successfully finished request",
    "status": 200,
    "data": null
}

Neste ponto, você pode criar programaticamente um site WordPress e verificar sua operação usando a API da Kinsta. Para aprimorar essa funcionalidade, vamos dar um passo adiante e desenvolver uma interface de usuário (UI) personalizada que possa lidar com essas operações. Dessa forma, até mesmo pessoas sem conhecimento técnico podem aproveitar os recursos da API.

Criando um aplicativo React para criar um site WordPress com a API da Kinsta

Para começar, configure uma estrutura de projeto React e instale as dependências necessárias. Integre a API da Kinsta em seu aplicativo React com a API Fetch ou outras bibliotecas de solicitação HTTP, como a Axios.

Pré-requisito

Para acompanhar este projeto, é aconselhável que você tenha um conhecimento básico de HTML, CSS e JavaScript e alguma familiaridade com o React. O foco principal deste projeto é demonstrar a utilização da API Kinsta, portanto, este artigo não se aprofunda nos detalhes da criação ou do estilo da interface do usuário.

Primeiros passos

Para simplificar o processo de configuração do projeto, um projeto inicial foi preparado para você. Siga estas etapas para você começar:

1. Crie um repositório Git usando este template no GitHub. Selecione Usar este template > Criar um novo repositório para copiar o código inicial em um novo repositório na sua conta do GitHub e verifique se você marcou a caixa para incluir todas as branches.

2. Faça o clone do repositório para seu computador local e mude para o diretório starter-files usando o comando abaixo:

git checkout starter-files

3. Instale as dependências necessárias executando o comando npm install. Após a conclusão da instalação, você pode iniciar o projeto em seu computador local com npm run start. Isso abrirá o projeto em http://localhost:3000/.

Formulário do construtor de sites
Formulário do construtor de sites.

Entendendo os arquivos do projeto

Na pasta src deste projeto, há duas subpastas principais: components e pages. A pasta de componentes contém componentes reutilizáveis, como o header e o footer, utilizados nas páginas Home e Details.

Neste projeto, você deve se concentrar principalmente na implementação da lógica nas páginas Home e Details, pois o estilo e o roteamento já estão prontos.

A página Home tem um formulário que coleta vários campos de dados que são passados para a API da Kinsta. A resposta dessa página é armazenada no localStorage (você pode explorar métodos alternativos para armazenar o ID da operação, que é crucial para verificar o status da operação).

Na página Details, o ID da operação é recuperado do loaclStoage e passado para o ponto de extremidade /operation da API da Kinsta como um parâmetro para verificar o status da operação. Neste projeto, incluímos um botão que permite que os usuários verifiquem o status de forma intermitente (você pode utilizar o método setInterval para automatizar esse processo).

Informações sobre a operação do construtor de sites
Informações sobre a operação do construtor de sites.

Interagindo com a API Kinsta no React

Com a interface do usuário (UI) pronta, sua próxima etapa é lidar com o envio do formulário na página Home e enviar uma solicitação POST para o ponto de extremidade /sites da API da Kinsta. Essa solicitação inclui os dados coletados do formulário como payload útil, o que nos permite criar um site WordPress.

Para interagir com a API da Kinsta, você precisa do ID da sua empresa e da chave API. Depois que você tiver essas credenciais, é melhor armazená-las com segurança como variáveis de ambiente em seu aplicativo React.

Para configurar as variáveis de ambiente, crie um arquivo .env na pasta raiz do seu projeto. Dentro desse arquivo, adicione as seguintes linhas:

REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID' 
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'

Para acessar essas variáveis de ambiente em seu projeto, você pode usar a sintaxe process.env.THE_VARIABLE. Por exemplo, para acessar REACT_APP_KINSTA_COMPANY_ID, você usaria process.env.REACT_APP_KINSTA_COMPANY_ID.

Recuperação de dados de formulário no React

No arquivo Home.jsx, há um formulário. Você precisa adicionar lógica ao formulário para obter dados e validá-los quando forem enviados. Para recuperar os dados do formulário em seu aplicativo React, utilize a abordagem de componentes controlados do React juntamente com o hook useState. Essa abordagem permite criar um estado para cada campo do formulário e atualizá-lo à medida que o usuário insere dados.

Primeiro, importe o hook useState na parte superior do seu arquivo:

import React, { useState } from 'react';

Em seguida, configure uma variável de estado para cada campo do formulário dentro do seu componente funcional. Por exemplo, se você tiver um campo de entrada para o “Site title”, você pode criar uma variável de estado chamada siteTitle:

const [siteTitle, setSiteTitle] = useState('');

Aqui, siteTitle é a variável de estado que contém o valor do campo de entrada “Site title” e setSiteTitle é a função atualizadora de estado correspondente.

Para vincular os campos de formulário a seus respectivos valores de estado, adicione os atributos value e onChange a cada elemento de entrada. Por exemplo, o campo de entrada “Site title”:

<input
  type="text"
  className="form-control"
  value={siteTitle}
  onChange={(event) => setSiteTitle(event.target.value)}
/>

Neste exemplo, o atributo value é definido como a variável de estado siteTitle, garantindo que o campo de entrada exiba o valor atual de siteTitle. O manipulador de eventos onChange é definido como a função setSiteTitle, que atualiza o estado siteTitle com o novo valor sempre que o usuário digitar o campo de entrada.

Seguindo essa abordagem para cada campo do formulário, você pode criar as variáveis de estado necessárias e atualizá-las à medida que o usuário interage com o formulário. Isso permite que você acesse facilmente os valores inseridos quando o formulário for enviado e execute outras ações ou validações com os dados do formulário.

Quando você fizer isso para todos os campos do formulário, o arquivo Home.jsx terá a seguinte aparência:

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;

Implementação da validação de campo de formulário com o Hook useRef

Para implementar a validação de campo de formulário no React, você pode seguir estas etapas. Vamos nos concentrar na implementação da validação dos campos “Display name” e “WordPress admin email”.

Primeiro, precisamos criar referências usando o hook useRef para controlar a exibição das mensagens de erro. Importe o hook useRef e crie as referências necessárias para cada campo:

import { useRef } from 'react';

const displayNameRef = useRef(null);
const wpEmailRef = useRef(null);

Em seguida, anexamos as refs aos elementos correspondentes da mensagem de erro nos campos do formulário. Por exemplo, para o campo “Display name”, você adiciona o ref à tag span, que contém a mensagem de erro:

<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>

Da mesma forma, para o 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>

Agora, podemos criar as funções de validação que verificam os valores de entrada e decidem se você deve exibir as mensagens de erro. Aqui estão as funções para “Display name” e “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';
  }
}

Essas funções são chamadas sempre que os campos de entrada correspondentes são alterados. Elas comparam os valores de entrada com os critérios de validação e atualizam a exibição das mensagens de erro manipulando a propriedade style.display dos elementos da mensagem de erro.

Formulário do construtor de sites com validação
Formulário do construtor de sites com validação.

Fique à vontade para implementar validações adicionais ou personalizar a lógica de validação de acordo com seus requisitos.

Como lidar com o envio de formulários no React

Ao manipular o evento de envio de formulário para criar um site, precisamos executar várias tarefas. Primeiro, anexamos um manipulador de eventos onSubmit ao elemento <form>. Dentro da função createSite, evitamos o comportamento padrão de envio de formulário chamando event.preventDefault(). Isso nos permite tratar o envio de forma programática.

Para garantir que os dados do formulário sejam válidos antes de prosseguir com o envio, chamamos os métodos de validação checkDisplayName e checkWpAdminEmail. Esses métodos verificam se os campos obrigatórios atendem aos critérios especificados.

const createSite = (e) => {
  e.preventDefault();

  checkDisplayName();
  checkWpAdminEmail();

  // Additional logic
};

Supondo que todas as validações sejam aprovadas e que os campos obrigatórios contenham dados válidos, prossiga com a limpeza do localStorage para garantir um estado limpo para armazenar a resposta da API e o nome de exibição.

Em seguida, faça uma solicitação de API para a API da Kinsta usando a função fetch. A solicitação é um método POST para o ponto de extremidade https://api.kinsta.com/v2/sites. Certifique-se de incluir os cabeçalhos necessários e o payload como 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
};

O payload contém vários campos de dados que a API da Kinsta exige, como o ID da empresa, o nome de exibição, a região, o modo de instalação, o e-mail do administrador, a senha do administrador, etc. Esses valores são obtidos das variáveis de estado correspondentes.

Após fazer a solicitação de API, aguardamos a resposta usando await resp.json() e extraímos os dados relevantes. Criamos um novo objeto newData, com o ID da operação e o nome de exibição, que é armazenado no localStorage usando 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');
}

Por fim, invocamos a função createSiteWithKinstaAPI para que, quando um usuário preenche o formulário e clica no botão, um site do WordPress seja criado usando a API da Kinsta. Além disso, no código, é mencionado que o usuário é redirecionado para a página details.jsx para acompanhar a operação com a API da Kinsta. Para habilitar a funcionalidade de navegação, importe o useNavigate do react-router-dom e inicialize-o.

Lembrete: Você pode encontrar o código completo dessa página no repositório do GitHub.

Implementação da verificação do status da operação com a API da Kinsta

Para verificar o status da operação com a API da Kinsta, usamos o ID da operação que foi armazenado no localStorage. Esse ID de operação é recuperado do localStorage usando JSON.parse(localStorage.getItem('state')) e atribuído a uma variável.

Para verificar o status da operação, faça outra solicitação de API para a API da Kinsta enviando uma solicitação GET para o ponto de extremidade /operations/{operationId}. Essa solicitação inclui os cabeçalhos necessários, como o cabeçalho Authorization que contém a chave 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);
}

Assim que recebermos a resposta, extrairemos os dados relevantes da resposta usando await resp.json(). Os dados da operação são então atualizados no estado usando setOperationData(data).

Na instrução de retorno do componente, exibimos a mensagem da operação usando operationData.message. Também fornecemos um botão que permite que o usuário acione manualmente a verificação do status da operação chamando o checkOperation.

Além disso, se o status da operação indicar que ela foi concluída com êxito, o usuário poderá usar os links adicionados para acessar o administrador do WordPress e o próprio site. Os links são construídos usando o stateData.display_name obtido do 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>

Ao clicar nesses links, você abre o administrador do WordPress e a URL do site, respectivamente, em uma nova aba, permitindo que o usuário os acesse sem precisar navegar até o MyKinsta.

Agora você pode criar um site WordPress facilmente por meio do seu aplicativo personalizado.

Como implantar seu aplicativo React com a Kinsta

Para implantar seu projeto React na hospedagem de aplicativos da Kinsta, você precisa enviar o projeto para o seu provedor Git preferido. Quando seu projeto estiver hospedado no GitHub, no GitLab ou no Bitbucket, você poderá fazer a implantação na Kinsta.

Para implantar seu repositório na Kinsta, siga estas etapas:

  1. Faça login ou crie sua conta Kinsta no painel MyKinsta.
  2. Na barra lateral esquerda, clique em “Aplicativos” e depois em “Adicionar serviço”.
  3. Selecione “Aplicativo” no menu suspenso para implantar um aplicativo React na Kinsta.
  4. No modal que aparece, escolha o repositório que você deseja implantar. Se você tiver várias branches, poderá selecionar a branch desejada e dar um nome ao seu aplicativo.
  5. Selecione um dos 25 locais de centro de dados disponíveis. A Kinsta detectará automaticamente o comando start para o seu aplicativo.

Por fim, não é seguro enviar chaves API para hospedagens de sites públicos, como seu provedor Git. Ao hospedar, você pode adicioná-las como variáveis de ambiente usando o mesmo nome e valor de variável especificados no arquivo .env.

Defina as variáveis de ambiente no DevKinsta quando você estiver implementando
Defina as variáveis de ambiente no DevKinsta quando você estiver implementando.

Quando você inicia a implantação do seu aplicativo, o processo começa e é normalmente concluído em alguns minutos. Uma implantação bem-sucedida gera um link para o seu aplicativo, como https://site-builder-ndg9i.kinsta.app/.

Resumo

Neste artigo, você aprendeu como usar programaticamente a API da Kinsta para criar um site do WordPress e integrar a API em um aplicativo React. Lembre-se sempre de manter sua chave de API segura e, caso acredite que a tenha compartilhado publicamente, revogue e crie uma nova.

A API da Kinsta pode ser usada não apenas para criar um site WordPress, mas também para recuperar informações sobre seus sites WordPress, domínios e muito mais. Você também pode acessar os serviços da Kinsta, como bancos de dados e aplicativos.

Gostaríamos de saber qual endpoint você adoraria ver adicionado à próxima versão da API da Kinsta. Por favor, compartilhe suas sugestões nos comentários.

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.