​
Introdução

  • Antes de começar, certifique-se de que você tem o Node.js e o npm instalados no seu sistema. Se ainda não os tiver, pode baixá-los no site oficial do Node.js.
  • Em seguida, você precisará criar uma conta na Square Cloud, o que pode ser feito através da página de inscrição. Você pode usar seu e-mail para criar uma conta.
  • Finalmente, é preciso ter um plano pago ativo em sua conta. Você pode ver nossos planos e adquirir um de acordo com suas necessidades aqui.

​
Criando um Projeto Vite

Para criar um novo projeto Vite, execute o seguinte comando: 
npm create vite@latest meu-app-vite
No comando acima, meu-app-vite é o nome do seu novo projeto. Substitua-o por qualquer nome desejado para o 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 por: react, vue & lit. 
# npm 7+, é necessário um duplo traço extra:
npm create vite@latest meu-app-vite -- --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.

​
Configurando a Porta 80

A porta 80 é a porta padrão para o tráfego HTTP. Para hospedar uma aplicação Vite na Square Cloud, configure o uso da porta 80. No Vite, você pode definir o parâmetro --port 80 no script de inicialização para garantir que sua aplicação funcione corretamente nesta porta.

​
Configurando o Host 0.0.0.0

A opção --host 0.0.0.0 é usada para vincular o servidor Vite a todas as interfaces de rede disponíveis. Isso torna sua aplicação acessível não apenas em localhost, mas também em dispositivos externos na mesma rede, como outros computadores ou dispositivos móveis. Por padrão, o Vite se vincula ao localhost, o que restringe o acesso à máquina onde está sendo executado. Definir o host como 0.0.0.0 permite que o servidor escute por requisições de qualquer endereço IP.

​
Criando o arquivo de configuração squarecloud

Aprenda sobre: como fazer o arquivo de configuração para a Square Cloud.

O arquivo squarecloud.app é um arquivo de configuração que será usado para configurar sua aplicação; ele será usado para definir o nome, descrição, versão, arquivo principal, entre outras coisas.

​
Configurando o Campo START

No arquivo de configuração da Square Cloud, o campo START é essencial para customizar o comando de inicialização. Se você quer construir e iniciar sua aplicação Vite na Square Cloud, configure o campo START da seguinte forma:
squarecloud.app
START=npm run build && npm run preview
Este comando executará os scripts “build” e “preview” definidos no seu package.json:
package.json
{
  "name": "meu-app-vite",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --host 0.0.0.0 --port 80"
  },
  "devDependencies": {
    "vite": "^5.1.4"
  }
}

​
Comprando um Plano Antes de Enviar seu Projeto

Antes de poder enviar seu projeto para a Square Cloud, é importante entender que você precisa adquirir um plano. O tipo de plano que você escolher dependerá dos recursos exigidos pela sua aplicação. Você pode ver nossos planos aqui.
Você está se perguntando de quanta RAM e CPU seu plano precisa para hospedar um site Vite? Não se preocupe, estamos aqui para ajudar. O Vite é uma ferramenta de construção de front-end moderna que proporciona uma experiência de desenvolvimento mais rápida e enxuta para projetos web modernos. Ele é projetado para fornecer suporte pronto para uso para módulos ES, permitindo o início instantâneo do servidor e a substituição de módulos a quente. Nosso plano Padrão oferece 4GB de RAM e 4vCPU, o que deve ser suficiente para a maioria dos sites Vite. No entanto, se você estiver trabalhando em um projeto maior ou precisar de mais estabilidade, recomendamos considerar nosso plano Pro. Com recursos adicionais, você pode garantir um desempenho suave mesmo sob alta demanda. Para adquirir, basta clicar aqui.

​
Enviando o Projeto para a Square Cloud

Após preparar os arquivos do seu projeto, você pode agora enviá-los para a Square Cloud e hospedar seu projeto.
Acesse o Painel da Square Cloud e envie os arquivos do seu projeto.

​
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 de API para ajudá-lo a aproveitar ao máximo o Vite.

​
Solução de Problemas

​
Domínio Personalizado

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

​
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, use mais RAM para evitar erro LACK_OF_RAM e garantir performance.

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