Frameworks JavaScript
A seguir, você encontrará exemplos de como configurar aplicativos usando frameworks JavaScript para implantar nos serviços de hospedagem de aplicativos da Kinsta a partir de um repositório do GitHub. Isso inclui:
Também temos exemplos de aplicativos Node.js.
Pré-requisitos
- Os templates de início rápido da Kinsta são armazenados e gerenciados no GitHub; portanto, você precisa de uma conta do GitHub para acessá-los.
- Você precisa criar uma conta MyKinsta para implantar o aplicativo.
Astro SSR
Este é um exemplo de como configurar um site Astro com renderização do lado do servidor (SSR) nos serviços de hospedagem de aplicativos da Kinsta a partir de um repositório do GitHub.
Por padrão, o Astro é um construtor de sites estáticos com foco em sites ricos em conteúdo para oferecer tempos de carregamento mais rápidos com menos JavaScript. Ao habilitar o SSR no Astro, você pode adicionar recursos dinâmicos como sessões para login, conexão com um banco de dados e muito mais ao seu site. Mais informações estão disponíveis no site do Astro.
- 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 – Site SSR com Astro.
- No MyKinsta, clique em Aplicativos > Adicionar aplicativo > selecione GitHub, clique em Conectar provedor git > Autorizar e faça login na sua conta do GitHub.
- Escolha o repositório Hello World Astro SSR e um local do centro de dados. Deixe todas as outras configurações como padrão e clique em Continuar em cada etapa.
- Na etapa Resumo, clique em Implantar agora.
Durante a implantação, a Kinsta detecta automaticamente o Comando Start para o processo web e instala as dependências definidas em seu arquivo package.json. O aplicativo 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 aplicativo.
Você prefere assistir à versão em vídeo?
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 ou codificá-la no aplicativo.
Comando Start
Quando você implanta o aplicativo, a Kinsta cria automaticamente um processo web com npm start como o Comando Start. Certifique-se de usar esse comando para executar seu servidor.
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), o comando npm build é executado, seguido pelo comando npm start.
Deno
Este é um exemplo de como configurar um aplicativo Deno para ser implantado nos serviços de hospedagem de aplicativos da Kinsta a partir de um repositório do GitHub.
O Deno é um runtime para JavaScript, TypeScript e WebAssembly que possibilita a execução de código fora de um navegador. Ele é voltado para a criação de aplicativos seguros do lado do servidor. Para mais informações, consulte o site oficial do Deno.
- 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 – Deno.
- No MyKinsta, clique em Aplicativos > Adicionar aplicativo > selecione GitHub, clique em Conectar provedor git > Autorizar e faça login na sua conta do GitHub.
- Escolha o repositório Hello World – Deno e um local do centro de dados. Deixe todas as outras configurações como padrão e clique em Continuar em cada etapa.
- Na etapa Resumo, clique em Implantar agora.
Durante a implantação, a Kinsta detecta automaticamente o Comando Start para o processo web e instala as dependências definidas em seu arquivo package.json. O aplicativo estará disponível assim que a implantação for concluída, e uma página Hello World será carregada na URL do aplicativo.
Configuração do servidor web
Porta
A Kinsta define automaticamente a variável de ambiente PORT. Você não precisa defini-la ou codificá-la no aplicativo.
Comando Start
Quando você implanta o aplicativo, a Kinsta cria automaticamente um processo web com npm start como o Comando Start.
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), o npm build command é executado, seguido pelo comando npm start.
Next.js com Prisma ORM
Este é um exemplo de como configurar um aplicativo Next.js e Prisma para implantar nos serviços de hospedagem de aplicativos e hospedagem de banco de dados da Kinsta a partir de um repositório do GitHub.
O Prisma é um conjunto de ferramentas de banco de dados open source que facilita o acesso ao banco de dados para desenvolvedores, oferecendo uma API intuitiva e com segurança de tipo. Ele suporta diversos bancos de dados e gera consultas SQL eficientes e otimizadas, visando melhor desempenho. Para mais detalhes, acesse o site prisma.io.
Esse aplicativo requer um banco de dados PostgreSQL para funcionar.
- No MyKinsta, clique em Bancos de dados > Adicionar banco de dados > digite um nome > em Tipo de banco de dados, selecione PostgreSQL, escolha um local para o Centro de dados e o Tamanho e clique em Continuar > Criar banco de dados.
- 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 – Prisma.
- No MyKinsta, clique em Aplicativos > Adicionar aplicativo > selecione GitHub, clique em Conectar provedor git > Autorizar e faça login na sua conta do GitHub.
- Escolha o repositório Hello World – Prisma e o mesmo Local do centro de dados que seu banco de dados. Deixe todas as outras configurações como padrão e clique em Continuar em cada etapa.
- Na etapa Resumo, clique em Implantar agora.
- Quando o banco de dados estiver pronto para conexões (uma marca de seleção verde é mostrada ao lado dele), você deverá adicionar a conexão interna entre o aplicativo e o banco de dados. Clique em Aplicativos > nome do aplicativo > Configurações > Adicionar conexão.
- Selecione o banco de dados > selecione Adicionar variáveis deambiente… > selecione Adicionar variáveis de ambiente ao aplicativo > clique em Adicionar conexão.
- Vá para a página Implantações do aplicativo e clique em Implantaragora > Implantar aplicativo.
Durante a implantação, a Kinsta detecta automaticamente o Comando Start para o processo web e instala as dependências definidas em seu arquivo package.json. O aplicativo 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 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 ao implantar um aplicativo com npm start como o Comando Start. Certifique-se de usar esse comando para executar seu servidor.
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), o comando npm build é executado, seguido pelo comando npm start.
React
Este é um exemplo de como configurar um aplicativo React para ser implantado nos serviços de hospedagem de aplicativos 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.
- 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 – React.
- No MyKinsta, clique em Aplicativos > Adicionar aplicativo > selecione GitHub, clique em Conectar provedor git > Autorizar e faça login na sua conta do GitHub.
- Escolha o repositório Hello World – React e um local do centro de dados. Deixe todas as outras configurações como padrão e clique em Continuar em cada etapa.
- Na etapa Resumo, clique em Implantar agora.
Durante a implantação, a Kinsta detecta automaticamente o Comando Start para o processo web e instala as dependências definidas em seu arquivo package.json. O aplicativo 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 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 uma confirmação de entrada), os comandos npm start e npm build são executados.
React com o Vite
Este é um exemplo de como você pode configurar um aplicativo React com o Vite para implantar nos serviços de hospedagem de aplicativos 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 interface do usuário (UI) de forma eficiente em resposta a alterações de dados. Mais informações estão disponíveis no site do React.
- 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, clique em Aplicativos > Adicionar aplicativo > selecione GitHub, clique em Conectar provedor git > Autorizar e faça login na sua conta do GitHub.
- Escolha o repositório Hello World – Vite + React e um local do centro de dados. Deixe todas as outras configurações como padrão e clique em Continuar em cada etapa.
- Na etapa Resumo, clique em Implantar agora.
Durante a implantação, a Kinsta detecta automaticamente o comando Start para o processo web e instala as dependências definidas em seu arquivo package.json. O aplicativo 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 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 uma confirmação de entrada), os comandos npm install e npm build são executados.