Pular para o conteúdo principal

​
Desenvolvimento Profissional de Aplicações Angular

  • Antes de começar, certifique-se de que você possui Node.js e npm instalados em seu sistema. Caso não tenha, você pode baixá-los pelo site oficial do Node.js.
  • Em seguida, crie uma conta na Square Cloud através da página de cadastro. Utilize seu e-mail para registrar rapidamente.
  • Por fim, verifique se você possui um plano pago ativo. Você pode visualizar e adquirir um plano conforme suas necessidades aqui.

​
Configuração do Angular

Para criar um projeto Angular, você precisa instalar o Angular CLI. Execute o comando: 
npm install -g @angular/cli
Agora crie o projeto com: 
gng new my-angular-app
Entre na pasta do projeto e instale as dependências: 
cd my-angular-app
npm install

​
Criando um Projeto Angular

Para iniciar o servidor de desenvolvimento, execute: 
ng serve --port 4200
O Angular iniciará um servidor local disponível em http://localhost:4200. Para criar um componente simples, use: 
ng generate component hello
E você pode editar o arquivo gerado em src/app/hello/hello.component.html.

​
Criando o Arquivo de Configuração da Square Cloud

Saiba mais sobre: como criar o arquivo de configuração da Square Cloud.

O arquivo squarecloud.app define informações como nome, descrição, versão, build, arquivo principal, entre outros ajustes.

​
Compra de um Plano Antes de Enviar o Projeto

Antes de realizar o deploy, é fundamental ter um plano ativo adequado.
Não sabe quanta RAM e CPU uma aplicação Angular precisa? Angular é um framework completo e compilado, que produz arquivos estáticos otimizados para produção. Para a maioria das aplicações Angular, o plano Standard com 4GB RAM e 4vCPU é mais que suficiente. Para projetos corporativos maiores, considere o plano Pro.

​
Build do Angular para Produção

Antes de enviar o projeto para a Square Cloud, gere o build de produção: 
ng build --configuration production
O build será gerado na pasta dist/{PROJECT_NAME}, contendo os arquivos estáticos que deverão ser servidos.

​
Biblioteca express

Para hospedar corretamente no Square Cloud, você deve garantir que o servidor entregue arquivos estáticos. Para usar um servidor Node com Express, é comum algo como:
server.js
import express from 'express';
import path from 'path';

const app = express();

app.use(express.static({'dist/'}));

app.get('*', (req, res) => {
  res.sendFile('dist/index.html');
});

app.listen(80, () => console.log('Server running on port 80'));
Ajuste os parâmetros dist para a pasta de build do seu projeto. Se os arquivos estiverem em uma subpasta dentro de build ou dist, use o caminho até ela em vez de dist.

​
Biblioteca serve

​
Instalando a Biblioteca Serve

Para instalar a biblioteca serve, navegue até o diretório do seu projeto no terminal e execute o seguinte comando: 
npm install serve@14.2.3
Este comando instala a versão 14.2.3 da biblioteca serve. Se desejar instalar a versão mais recente, você pode omitir o @14.2.3.

​
Configurando o Script de Inicialização

Após instalar a biblioteca serve, você precisa configurar o script de inicialização do seu projeto para usar o serve. Para isso, abra o arquivo package.json do seu projeto e adicione um novo script chamado start:prod: 
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
No script start:prod, o comando serve -s dist -l 80 executa as seguintes funções:
  • serve: Este é o comando para iniciar o servidor serve.
  • -s dist: A opção -s serve o diretório dist no modo single-page application. Isso significa que todas as requisições não encontradas serão redirecionadas para index.html. O diretório dist é comumente criado quando você executa npm run build.
  • -l 80: A opção -l seguida de 80 instrui o serve a escutar na porta 80. A porta 80 é a porta padrão para tráfego HTTP.
Ajuste os parâmetros dist para a pasta de build do seu projeto. Se os arquivos estiverem em uma subpasta dentro de build ou dist, use o caminho até ela em vez de dist.

​
Upload do Projeto para a Square Cloud

Após preparar todos os arquivos do projeto, proceda com o upload para a Square Cloud e hospede sua aplicação profissionalmente.
  • Upload via Dashboard
  • Upload via CLI
Acesse o Dashboard da Square Cloud e faça o upload dos arquivos do seu projeto.

​
Recursos Adicionais

Para mais informações sobre Angular, visite a documentação oficial aqui

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