Criando e Executando um Projeto Angular no ServBay

Visão Geral

Este guia foi elaborado para mostrar como criar, configurar e rodar um projeto Angular usando o ambiente local de desenvolvimento web do ServBay. Vamos aproveitar o ambiente robusto Node.js oferecido pelo ServBay, além do sistema flexível de gerenciamento de sites (anteriormente chamado de "hosts"), para configurar fácil e rapidamente ambientes de desenvolvimento e produção. Também veremos como acessar projetos via domínios personalizados e certificados SSL para maior segurança. O ServBay integra diversos pacotes essenciais para desenvolvedores (serviços), como Node.js, PHP, Python, Go, Java, bancos de dados e mais, tornando-o uma solução completa para desenvolvimento full-stack local.

O que é Angular?

Angular é um framework front-end open source, mantido pelo Google, para criação de aplicações web dinâmicas e de alta performance, especialmente aplicações de página única (SPA). Construído sobre TypeScript, ele oferece um conjunto abrangente de ferramentas e uma arquitetura organizada, ideal para aplicações empresariais de grande porte e complexidade.

Principais Características e Vantagens do Angular

• Arquitetura baseada em componentes: Interface de usuário construída por componentes reutilizáveis, facilitando manutenção e escalabilidade.
• Suporte a TypeScript: Tipagem estática e recursos avançados de orientação a objetos, melhorando qualidade e produtividade do código.
• Injeção de dependências: Torna os componentes mais testáveis e gerenciáveis.
• CLI poderosa (Interface de Linha de Comando): Simplifica tarefas de criação de projeto, geração de componentes, serviços e módulos, além de build, testes e mais.
• Soluções integradas: Módulos internos para roteamento, formulários, HTTP client e outras funcionalidades comuns.
• Otimização de performance: Suporte à compilação AOT (Ahead-of-Time), Tree-shaking e outras otimizações.

Aliando Angular ao ambiente estável do ServBay, os desenvolvedores podem focar de forma eficiente na implementação da lógica de negócio.

Pré-requisitos

Antes de começar, certifique-se de que:

1. O ServBay está instalado: Você já instalou e iniciou o ServBay (compatível com macOS e Windows).
2. O pacote Node.js está habilitado: No painel do ServBay, assegure-se de instalar e ativar a versão necessária do Node.js, podendo alternar facilmente entre versões diferentes.

Como Configurar e Executar um Projeto Angular com ServBay

Vamos utilizar o Node.js do ServBay para criar e executar seu projeto Angular. Em modo de desenvolvimento, configuraremos um proxy reverso via site ServBay para acessar o servidor Angular; em produção, faremos o build e utilizaremos o ServBay para servir os arquivos estáticos.

1. Criando o Projeto Angular

Primeiro, usamos o Angular CLI para criar um novo projeto.

1. Instalando Angular CLI: Abra seu terminal e use o Node.js do ServBay para instalar o Angular CLI globalmente. Caso o ambiente Node.js do ServBay não esteja no PATH, faça o ajuste necessário; normalmente, o próprio ServBay faz essa configuração automaticamente.

   npm install -g @angular/cli

   Isso disponibiliza o comando ng em todo o sistema, permitindo usar o Angular CLI globalmente.

2. Criando um novo projeto Angular: Navegue até o diretório raiz recomendado pelo ServBay e crie o projeto com ng new. Uma sugestão de nome para o projeto é servbay-angular-app.

   macOS:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   O Angular CLI fará algumas perguntas sobre o setup do projeto. Responda conforme sua preferência:

   ? Would you like to add Angular routing? Yes  # Recomenda-se adicionar roteamento
   ? Which stylesheet format would you like to use? CSS # Escolha o formato, por exemplo CSS

   Após o término, será criado um diretório chamado servbay-angular-app com toda a estrutura necessária:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. Instalando as dependências: Entre na pasta do projeto e instale as dependências locais.

   cd servbay-angular-app
   npm install

   O comando npm install lê o arquivo package.json do projeto e instala os pacotes necessários na pasta node_modules.

2. Modificando o Conteúdo da Página Inicial do Angular (Opcional)

Para validar se o projeto foi criado corretamente, podemos personalizar o conteúdo exibido na página inicial.

1. Edite o arquivo src/app/app.component.html: Use seu editor de código para abrir servbay-angular-app/src/app/app.component.html. Remova ou altere o conteúdo, deixando apenas um título simples, como "Hello ServBay!".

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>Este é o seu app Angular rodando via ServBay!</p>
   </div>

3. Executando o Projeto em Modo de Desenvolvimento

Durante o desenvolvimento, usamos o servidor interno do Angular CLI (ng serve), que oferece hot reload para facilitar ajustes rápidos. Utilizaremos a funcionalidade de proxy reverso do ServBay para acessar este servidor via domínio local.

1. Inicie o servidor de desenvolvimento do Angular: No diretório do projeto, execute o comando abaixo, especificando uma porta como 8585 para evitar conflito com a porta padrão do ServBay.

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   Este comando compila o projeto Angular e inicia um servidor web no http://localhost:8585/. Mantenha o terminal aberto para o servidor permanecer rodando.

2. Configurar Site no ServBay (Proxy Reverso): No painel de controle do ServBay, acesse a área de configuração de “sites” e adicione uma nova configuração, utilizando proxy reverso para redirecionar um domínio local ao servidor de desenvolvimento do Angular.

   • Nome: Por exemplo, My Angular Dev Site (apenas para exibição interna no ServBay)
   • Domínio: Uma sugestão é servbay-angular-dev.servbay.demo. O ServBay faz o mapeamento automático de .servbay.demo para 127.0.0.1.
   • Tipo de Site: Escolha Proxy Reverso.
   • Endereço do Proxy: Digite 127.0.0.1.
   • Porta do Proxy: Insira a porta usada no comando ng serve, por exemplo 8585.

   Salve e aplique as configurações no ServBay.

3. Acesse o site em modo desenvolvimento: Abra o navegador e acesse o domínio configurado: https://servbay-angular-dev.servbay.demo.

   O ServBay gera e configura automaticamente certificados SSL locais (por meio do ServBay User CA ou ServBay Public CA), permitindo acesso seguro via HTTPS ao ambiente de desenvolvimento — isso ajuda a identificar precocemente possíveis problemas de produção relacionados a HTTPS.

4. Gerando e Servindo a Versão de Produção

Quando o projeto estiver pronto para deployment, vamos gerar o build otimizado e servir os arquivos estáticos pelo ServBay.

1. Build da versão de produção: Na raiz do projeto, execute o comando abaixo para gerar o build:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Ou, nas versões mais recentes do Angular CLI:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # Ou, nas versões mais recentes do Angular CLI:
   # ng build

   O parâmetro --prod (nas versões mais novas já é padrão) ativa as otimizações de produção: AOT, minificação, tree-shaking, etc. Após finalizar, os arquivos estáticos estarão em dist/servbay-angular-app (pode variar conforme a configuração do projeto).

2. Configurando Site Estático no ServBay: No painel do ServBay, configure um novo site apontando para a pasta gerada pelo build de produção.

   • Nome: Por exemplo, My Angular Production Site

   • Domínio: Por exemplo, servbay-angular-prod.servbay.demo

   • Tipo de Site: Escolha Estático.

   • Diretório raiz do site: Aponte para a pasta do build. Geralmente:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     Certifique-se de selecionar a pasta que contém index.html.

   Salve e aplique as configurações.

3. Acesse o site em modo produção: No navegador, acesse https://servbay-angular-prod.servbay.demo.

   Agora você verá a versão final e otimizada do seu projeto Angular, servida pelo servidor web do ServBay (Caddy ou Nginx, dependendo da sua configuração). O certificado SSL local também é gerado automaticamente para garantir acesso seguro.

Vantagens do ServBay no Desenvolvimento com Angular

• Ambiente integrado: Instale e gerencie várias versões do Node.js facilmente, sem complicações manuais de variáveis de ambiente.
• Gestão flexível de sites: Interface intuitiva para alternar rapidamente entre proxy reverso e servidor de arquivos estáticos, facilitando testes e deploy.
• Suporte SSL embutido: Certificados automáticos e gratuitos para ambientes locais, simulando HTTPS de produção e evitando alertas de conteúdo misto.
• Multi-stack: Se seu projeto incluir APIs de backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot) ou bancos de dados (MySQL, PostgreSQL, MongoDB, Redis), o ServBay integra tudo em um ambiente full-stack facilmente configurável — inclusive recursos que antes eram difíceis agora estão totalmente suportados.
• Backup e restauração de dados: Backup simples de configurações, sites, bancos e certificados SSL para segurança total do desenvolvimento local.
• Redefinição de senha para bancos de dados: Função interna para redefinir senhas de root dos bancos MySQL, MariaDB, PostgreSQL, resolvendo um problema recorrente para desenvolvedores.

Perguntas Frequentes (FAQ)

• Q: Ao rodar ng new ou ng serve aparece command not found: ng. O que fazer? A: Provavelmente o Angular CLI não está instalado ou não está no PATH do sistema. Faça a instalação global com npm install -g @angular/cli e confira se o Node.js do ServBay está corretamente configurado no PATH. Tente reiniciar o terminal ou o ServBay.
• Q: O ng serve falha informando que a porta está ocupada. Como resolver? A: A porta escolhida (ex: 8585) está em uso. Defina uma nova porta não ocupada com o parâmetro --port, como ng serve --port 8586, e atualize o número da porta no proxy do site do ServBay.
• Q: Configurei o site no ServBay, mas ao acessar o domínio nada é exibido. O que verificar? A: Confira:
  • Se o ServBay está rodando.
  • Em desenvolvimento, se o ng serve está ativo e escutando na mesma porta definida no ServBay.
  • Em produção, se o diretório selecionado contém o index.html correto dentro de dist/seu-projeto.
  • Verifique os logs do ServBay para detalhes de erro.
  • Certifique que o domínio acessado está igual ao configurado no ServBay.
• Q: Posso utilizar Caddy/Nginx/Apache do ServBay para hospedar o build de produção do Angular? A: Sim, o ServBay suporta Caddy, Nginx e Apache como servidores de arquivos estáticos. Na configuração do site estático, o ServBay usará automaticamente o servidor habilitado — todos oferecem alto desempenho para servir arquivos web.

Conclusão

Seguindo este guia, você conseguiu criar e executar um projeto Angular usando o ServBay. Aprendeu como, na fase de desenvolvimento, acessar o servidor do Angular via proxy reverso de domínio local, e como gerar o build de produção e servi-lo pelo ServBay como site estático. Aliando o ambiente Node.js do ServBay, o painel intuitivo de gerenciamento de sites e o suporte SSL embutido, a produtividade e praticidade do desenvolvimento Angular local aumentam drasticamente. O suporte completo a diferentes stacks torna o ServBay a base ideal para quem busca desenvolver aplicações completas em ambiente local.