Como hospedar aplicações Angular na Square Cloud

Diferente de um bot de Discord, o Angular não "roda" por si só; ele precisa de um servidor web para entregar os arquivos ao navegador do usuário. Na Square Cloud, a estratégia mais eficiente é compilar o projeto e serví-lo usando a biblioteca serve.

1. O Passo Fundamental: Build de Produção

O primeiro passo é transformar seu código TypeScript e componentes em arquivos que qualquer navegador entenda. Execute o comando de build na sua máquina local:

ng build --configuration production

Isso criará uma pasta chamada dist/ na raiz do seu projeto. Dentro dela, haverá outra pasta com o nome do seu projeto contendo o index.html e os bundles de JavaScript.

2. Preparando o Servidor Web

Para que a Square Cloud saiba como entregar esses arquivos, utilizaremos a biblioteca serve, que é leve e ideal para SPAs.

Adicionando a dependência

No seu arquivo package.json, adicione o serve às suas dependências:

"dependencies": {
  "serve": "^14.0.0"
}

3. Configurando a Porta e o Comando de Início

A Square Cloud disponibiliza a porta 80 para sua aplicação utilizar e receber requisições. O serve facilita isso com parâmetros simples.

O Comando de Start

Seu comando de inicialização (definido no Dashboard ou no arquivo de configuração) deve ser:

npx serve -s dist -p 80

• -s (Single Page Application): Redireciona todas as rotas para o index.html. Isso é vital para que o roteamento do Angular (ex: /dashboard, /login) funcione sem dar erro 404 ao atualizar a página.
• dist: O caminho exato onde seus arquivos compilados estão.
• -p 80: Define a porta obrigatória da Square Cloud.

4. O que enviar no ZIP?

Para um deploy limpo, seu arquivo .zip deve conter:

1. A pasta dist/ completa.
2. O arquivo package.json.

Nota: Não envie a pasta node_modules nem a pasta src. O servidor só precisa dos arquivos compilados e das instruções de instalação.

5. Dicas para Rotas e Performance

• Roteamento: O parâmetro -s no comando do serve é o que garante que o roteamento do Angular não quebre. Sem ele, se o usuário acessar uma URL interna diretamente, o servidor tentará achar um arquivo físico que não existe.
• Variáveis de Ambiente: Se sua aplicação Angular consome uma API, lembre-se de configurar as URLs nos arquivos environment.prod.ts antes de buildar, ou use soluções de injeção de variáveis em tempo de execução.

Atualizado em: 14/05/2026