React

A seguir, você verá exemplos de como configurar um site estático React e um site estático React com Vite para implantar nos serviços de hospedagem de site estático da Kinsta a partir de um repositório do GitHub.

O React é uma biblioteca JavaScript popular para criar interfaces de usuário. Ele permite que os desenvolvedores criem componentes de interface do usuário reutilizáveis e atualizem a interface do usuário de forma eficiente em resposta a alterações de dados. Mais informações estão disponíveis no site do React.

Você também pode usar esse template de início rápido na hospedagem de aplicativos da Kinsta sem nenhuma configuração adicional. Se você usar a Hospedagem de Aplicativos, o Comando Start pode ser deixado em branco para o processo web, pois a Kinsta detecta automaticamente o comando necessário durante a primeira implantação.

Pré-requisitos

• Os templates de início rápido da Kinsta são armazenados e gerenciados no GitHub; portanto, você precisa de uma conta no GitHub para acessá-los.
• Você precisa criar uma conta MyKinsta para implantar o aplicativo.

Implante um site estático React

1. Você deve fazer login no GitHub e criar um novo repositório a partir deste template (Use this template > Create a new repository): Kinsta – Hello World – React.
2. No MyKinsta, clique em Sites estáticos > Adicionar site > selecione GitHub, clique em Conectar provedor git > Autorizar e faça login na sua conta do GitHub.
3. Escolha o repositório Hello World – React, clique em Continuar e digite o seguinte nas configurações de build:
   • Comando build: npm run build
   • Versão do node: 18.16.0
   • Diretório de publicação: build

A Kinsta instala automaticamente as dependências definidas em seu arquivo package.json durante o processo de implantação. O site estará disponível assim que a implantação for concluída, e a página de boas-vindas da Kinsta será carregada na URL do seu site.

Ciclo de vida da implantação

Sempre que uma implantação é iniciada (por meio da criação de um aplicativo ou da reimplantação devido a um commit recebido), os comandos npm start e npm build são executados.

React com o Vite

Este é um exemplo de como você pode configurar um site estático React com o Vite para implantar nos serviços de hospedagem de site estático da Kinsta a partir de um repositório do GitHub.

O Vite é uma ferramenta que ajuda você a criar aplicativos descentralizados; ele fornece ferramentas de desenvolvedor e APIs para simplificar o processo de desenvolvimento e oferece suporte a várias linguagens de programação. Você pode encontrar mais informações no site do Vite.

A Kinsta instala automaticamente as dependências definidas em seu arquivo package.json durante o processo de implantação.

1. Faça login no GitHub e crie um novo repositório a partir deste template (Use this template > Create a new repository): Kinsta – Hello World – Vite + React.
2. No MyKinsta, adicione um site estático com o repositório Hello World – Vite + React e as seguintes configurações de build:
   • Comando build: npm run build
   • Versão do node: 18.16.0
   • Diretório de publicação: dist
3. O site estará disponível assim que a build for concluída, e a página de boas-vindas da Kinsta será carregada na URL do seu site.

Ciclo de vida da implantação

Sempre que uma implantação é iniciada (por meio da criação de um aplicativo ou da reimplantação devido a uma confirmação de entrada), os comandos npm install e npm build são executados.