Este é um exemplo de como você pode configurar um aplicativo React ou um site estático com o Vite para implantar nos serviços de hospedagem de aplicativos ou sites estáticos 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.
React é uma biblioteca JavaScript popular para criar interfaces de usuário. Ela permite que os desenvolvedores criem componentes de interface do usuário (UI) reutilizáveis e atualizem a IU de forma eficiente em resposta a alterações de dados. Mais informações estão disponíveis no site do React.
A Kinsta instala automaticamente as dependências definidas em seu arquivo package.json durante o processo de implantação.
Hospedagem de site estático
- 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.
- 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
- Comando build:
- 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.
Hospedagem de aplicativos
- 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.
- No MyKinsta, adicione um aplicativo com o repositório Hello World – Vite + React. 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.
- O aplicativo estará disponível assim que a build for concluída e a página de boas-vindas da Kinsta for carregada na URL do seu aplicativo.
Configuração do servidor web
Porta
A Kinsta define automaticamente a variável de ambiente PORT. Você não deve defini-la por conta própria e não deve codificá-la no aplicativo.
Comando Start
A Kinsta cria automaticamente um processo web com base no comando npm start no arquivo package.json ao implantar um aplicativo.
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 de entrada), os comandos npm install e npm build são executados.
Página de boas-vindas
O aplicativo ou 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 aplicativo ou na URL do site estático.
