Como Hospedar Aplicações Vite

Introdução

Para desenvolver e hospedar um aplicativo no Square Cloud, é essencial seguir uma sequência estruturada de configurações e pré-requisitos. Este guia técnico abordará todo o processo, desde a configuração inicial até a implantação em produção.

Pré-requisitos

Conta Square Cloud: Cadastre-se através da página de cadastro usando seu e-mail.
Plano Pago Ativo: Garante recursos dedicados e desempenho otimizado para seu aplicativo. Confira nossos planos disponíveis e escolha o mais adequado às suas necessidades.

Criando o projeto

Antes de começar, certifique-se de ter o Node.js e o npm instalados em seu sistema. Se ainda não os tem, você pode baixá-los no site oficial do Node.js. Para criar um novo projeto Vite, execute o seguinte comando:

npm create vite@latest my-vite-app

No comando acima, my-vite-app é o nome do seu novo projeto. Substitua-o por qualquer nome desejado para seu projeto. Por padrão, este comando configura um projeto Vite com JavaScript.

Escolhendo um Template Específico

O Vite permite escolher diferentes templates para o seu projeto. Ao criar um novo projeto, você pode especificar o template desejado usando a opção --template. Aqui estão alguns exemplos: Selecione um template como: react, vue e lit.

npm create vite@latest my-vite-app --template [template]

Escolha o template que melhor se adapta às suas necessidades e ajuste o nome do projeto conforme necessário.

Entendendo a Diferença entre JavaScript e TypeScript

Quando você escolhe JavaScript, o Vite configura o projeto com as configurações padrão de JavaScript. Por outro lado, ao escolher TypeScript, o Vite configura o projeto com as configurações de TypeScript, incluindo a geração de um arquivo tsconfig.json.

Compilando o projeto

Antes de fazer o upload para produção, gere os artefatos de produção usando o build do Vite:

npm run build

Para servir a versão de produção localmente (útil para testar no ambiente de deploy), recomendamos usar o comando vite preview expondo a aplicação em todas as interfaces e na porta 80:

npx vite preview --host 0.0.0.0 --port 80

Você pode também adicionar um script no package.json para simplificar:

{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}

Observação: em alguns ambientes a porta 80 exige privilégios especiais. Se houver restrição, use outra porta (ex.: 8080) e mapeie no host/serviço.

Escolhendo um servidor de produção

Para produção você tem basicamente duas opções:

Com nosso runtime estático HTML/CSS, apenas renomeie index.html para vite.html.
Usar o próprio vite preview (útil para testar o comportamento de produção ou em containers que executam o processo Node diretamente).

Runtime HTML/CSS

Se optar pelo runtime estático, gere o build (npm run build) e copie o conteúdo de dist/ para o arquivo compactado zip que será enviado para a Square Cloud. Lembre-se de renomear index.html para vite.html para que o runtime reconheça o arquivo inicial corretamente como uma aplicação Vite e faça o tratamento adequado dos assets.

Usando `vite preview` em produção (ou em containers)

vite preview serve os arquivos gerados por vite build com comportamento parecido com um servidor estático de produção. Para expor a aplicação para a rede (por exemplo, dentro de um container na Square Cloud) use:

npx vite preview --host 0.0.0.0 --port 80

Isso faz o processo escutar em todas as interfaces (0.0.0.0) e na porta 80.

Exemplo de `vite.config.js` com opções de `preview`

import { defineConfig } from 'vite'

export default defineConfig({
	preview: {
		host: '0.0.0.0',
		port: 80,
		strictPort: true
	}
})

Fazendo o deploy

Após preparar os arquivos do seu projeto, você pode enviá-los para a Square Cloud e hospedar seu projeto. Para fazer isso, crie um arquivo ZIP contendo todos os arquivos do seu projeto.

Via dashboard

Acesse a página de upload

Acesse a página de upload e envie seu arquivo zip.

Configure seu ambiente

Após fazer o upload do seu arquivo zip, você precisará configurar o nome, o arquivo principal ou o ambiente de execução e outras configurações do seu projeto.
Se você estiver enviando um projeto web, certifique-se de selecionar “Publicação na Web” e definir um subdomínio para o seu projeto.

Faça o deploy do projeto

Por fim, clique no botão “Deploy” para hospedar seu projeto no Square Cloud. Após o deploy, você poderá monitorar o status e os registros do seu projeto no painel.

Confirme que seu app está no ar

Seu primeiro deploy geralmente leva menos de um minuto. No dashboard, aguarde o status da sua aplicação mudar para em execução e verifique os registros em busca de erros de inicialização.
Se você fez deploy de um site ou API, abra https://<seu-subdominio>.squareweb.app no navegador — você deve ver sua aplicação respondendo. Se você fez deploy de um bot, envie um comando para confirmar que ele está online.

Seu app não está iniciando? Veja o guia de solução de problemas para as causas e correções mais comuns.

Via CLI

Para usar esse método, você precisa criar um arquivo de configuração chamado squarecloud.app no diretório raiz do seu projeto. Esse arquivo conterá a configuração necessária para o seu projeto.

Guia do arquivo de configuração

Saiba como criar o arquivo de configuração squarecloud.app que define o ambiente da sua aplicação.

Primeiro Passo

Primeiro, você precisa ter a CLI instalada em seu ambiente. Se você ainda não a possui, execute o seguinte comando em seu terminal:

npm install -g @squarecloud/cli

Se você já a possui, recomendamos atualizá-la. Para fazer isso, execute o seguinte comando em seu terminal:

Windows
Linux, macOS, e WSL

squarecloud update

curl -fsSL https://cli.squarecloud.app/install | bash

Segundo Passo

Agora, para autenticar e usar outros comandos da CLI, você encontrará sua chave de autorização aqui clicando em “Solicitar Chave da API”. Após obter sua chave de autorização, execute o seguinte comando:

squarecloud auth login

Terceiro Passo

Finalmente, para fazer o deploy da sua aplicação para a Square Cloud usando a CLI, você precisa executar o seguinte comando:

squarecloud upload

Ou se já possui o zip criado:

squarecloud upload --file <caminho/para/zip>

Confirme que seu app está no ar

Seu primeiro deploy geralmente leva menos de um minuto. Verifique o status e os registros da sua aplicação diretamente pelo terminal:

squarecloud app status
squarecloud app logs

Se você fez deploy de um site ou API, abra https://<seu-subdominio>.squareweb.app no navegador — você deve ver sua aplicação respondendo. Se você fez deploy de um bot, envie um comando para confirmar que ele está online.

Seu app não está iniciando? Veja o guia de solução de problemas para as causas e correções mais comuns.

Solução de Problemas

Domínio Personalizado

Para usar domínio personalizado (ex: meusite.com) ao invés da URL padrão meusite.squareweb.app, você precisa do plano Standard ou superior. O subdomínio é definido pelo campo SUBDOMAIN no arquivo de configuração.

Requisitos Mínimos de RAM

Mínimo: 512MB de RAM para websites/APIs simples. Para sites com frameworks (Next.JS, React, Vue, Angular, etc.), sugerimos sempre pelo menos 1GB de RAM. Para aplicações maiores, aumente a RAM para evitar que a aplicação fique sem memória e trave.

Não foi possível encontrar esse site.

Verifique se o subdomínio/domínio corresponde ao configurado no campo SUBDOMAIN ou nas configurações de domínio personalizado. Se você acabou de enviar o site, aguarde até 60 segundos para a Square liberar o primeiro acesso.

Site demorou demais para responder…

Verifique se configurou corretamente a porta 80 e host 0.0.0.0 na aplicação. Recomendamos usar as variáveis de ambiente forçadas da Square: PORT e HOST do arquivo .env.

Recursos Adicionais

Para mais informações sobre o Vite e suas ferramentas, visite a documentação oficial do Vite. Lá, você encontrará guias detalhados, tutoriais e documentação da API para ajudá-lo a tirar o máximo proveito do Vite.

Contate-nos

Se você continuar enfrentando dificuldades técnicas, nossa equipe de suporte especializada está disponível para auxiliá-lo. Entre em contato conosco e teremos prazer em ajudá-lo a resolver qualquer questão — a qualidade do suporte é uma grande parte do motivo pelo qual desenvolvedores avaliam a Square Cloud com 4.9/5 em 402 avaliações no Google e Trustpilot.

Tutoriais

Bots

Projetos Prontos

Bancos de Dados

APIs

Website

Guias de Migração

Como Hospedar Aplicações Vite

Introdução

Pré-requisitos

Criando o projeto

Escolhendo um Template Específico

Entendendo a Diferença entre JavaScript e TypeScript

Compilando o projeto

Escolhendo um servidor de produção

Runtime HTML/CSS

Usando `vite preview` em produção (ou em containers)

Exemplo de `vite.config.js` com opções de `preview`

Fazendo o deploy

Via dashboard

Via CLI

Guia do arquivo de configuração

Solução de Problemas

Domínio Personalizado

Requisitos Mínimos de RAM

Não foi possível encontrar esse site.

Site demorou demais para responder…

Recursos Adicionais

Contate-nos

​Introdução

​Pré-requisitos

​Criando o projeto

​Escolhendo um Template Específico

​Entendendo a Diferença entre JavaScript e TypeScript

​Compilando o projeto

​Escolhendo um servidor de produção

​Runtime HTML/CSS

​Usando vite preview em produção (ou em containers)

​Exemplo de vite.config.js com opções de preview

​Fazendo o deploy

​Via dashboard

​Via CLI

Guia do arquivo de configuração

​Solução de Problemas

​Domínio Personalizado

​Requisitos Mínimos de RAM

​Não foi possível encontrar esse site.

​Site demorou demais para responder…

​Recursos Adicionais

​Contate-nos

Introdução

Pré-requisitos

Criando o projeto

Escolhendo um Template Específico

Entendendo a Diferença entre JavaScript e TypeScript

Compilando o projeto

Escolhendo um servidor de produção

Runtime HTML/CSS

Usando `vite preview` em produção (ou em containers)

Exemplo de `vite.config.js` com opções de `preview`

Fazendo o deploy

Via dashboard

Via CLI

Solução de Problemas

Domínio Personalizado

Requisitos Mínimos de RAM

Não foi possível encontrar esse site.

Site demorou demais para responder…

Recursos Adicionais

Contate-nos