Criando e executando projetos Angular no ServBay

Visão Geral

Este documento orienta você sobre como criar, configurar e executar um projeto Angular no ambiente local de desenvolvimento web ServBay. Vamos aproveitar o potente ambiente Node.js do ServBay, juntamente com seu gerenciamento flexível de sites, para configurar facilmente ambientes de desenvolvimento e produção, garantindo também acesso seguro através de domínios personalizados e certificados SSL. O ServBay integra diversos pacotes necessários ao desenvolvimento (como Node.js, PHP, Python, Go, Java, bancos de dados, entre outros), sendo uma escolha ideal para desenvolvimento full stack local.

O que é Angular?

Angular é um framework frontend de código aberto mantido pelo Google, destinado à criação de aplicações web single-page (SPA) dinâmicas e de alta performance. Baseado em TypeScript, oferece um robusto conjunto de ferramentas e uma abordagem estruturada para desenvolvimento, sendo especialmente indicado para projetos empresariais grandes e complexos.

Principais características e vantagens do Angular

• Arquitetura baseada em componentes: Crie interfaces a partir de componentes reutilizáveis, facilitando a manutenção e escalabilidade do código.
• Suporte a TypeScript: Proporciona tipagem estática e recursos avançados de orientação a objetos, elevando a qualidade e produtividade do desenvolvimento.
• Injeção de dependências: Facilita testes e gerenciamento de dependências dos componentes.
• CLI poderosa (Interface de Linha de Comando): Simplifica tarefas comuns, como criação de projetos, geração de componentes, serviços, módulos, build e testes.
• Soluções integradas: Possui módulos nativos para roteamento, formulários, cliente HTTP, entre outras funcionalidades.
• Otimização de desempenho: Suporta compilação AOT, tree-shaking e outros recursos para melhorar a performance da aplicação.

Unindo Angular ao ambiente estável do ServBay, os desenvolvedores podem focar totalmente na lógica de negócio.

Pré-requisitos

Certifique-se de cumprir os seguintes requisitos antes de iniciar:

1. ServBay instalado: Você já instalou e iniciou o ServBay em seu macOS.
2. Pacote Node.js ativado: No painel do ServBay, confirme que instalou e ativou a(s) versão(ões) de Node.js desejadas. O ServBay permite instalar múltiplas versões do Node.js e alternar entre elas facilmente.

Configurando e executando um projeto Angular no ServBay

Utilizaremos o ambiente Node.js do ServBay para criar e rodar um projeto Angular. No modo de desenvolvimento, configuraremos um proxy reverso para redirecionar seu domínio local ao servidor de desenvolvimento do Angular; em produção, hospedaremos os arquivos estáticos no site ServBay.

1. Criando um projeto Angular

Primeiramente, crie um novo projeto usando o Angular CLI.

1. Instale o Angular CLI: Abra o Terminal e use o ambiente Node.js do ServBay para instalar o Angular CLI globalmente. Caso o Node.js do ServBay não tenha sido adicionado automaticamente ao PATH do seu sistema, faça esse ajuste antes. Normalmente o ServBay já gerencia isso para você.

   npm install -g @angular/cli

   Esse comando tornará o ng disponível globalmente, facilitando o uso do Angular CLI.

2. Crie um novo projeto Angular: Navegue até o diretório raiz sugerido pelo ServBay /Applications/ServBay/www e utilize o comando ng new para iniciar um projeto. Recomendamos incluir a marca ServBay no nome do projeto, por exemplo, servbay-angular-app.

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

   O Angular CLI fará algumas perguntas sobre configurações do projeto. Siga conforme sua preferência:

   ? Would you like to add Angular routing? Yes  # Adicionar roteamento, recomenda-se escolher Sim
   ? Which stylesheet format would you like to use? CSS # Escolha o formato de estilização, como CSS

   Espere até a conclusão. O CLI criará a pasta servbay-angular-app dentro de /Applications/ServBay/www com toda a estrutura inicial do projeto.

3. Instale as dependências do projeto: Acesse o diretório do novo projeto e instale os pacotes necessários.

   cd servbay-angular-app
   npm install

   O comando npm install lerá o package.json e instalará todas as dependências em node_modules.

2. Modificando o conteúdo inicial do Angular (opcional)

Para verificar se o projeto está rodando corretamente, você pode alterar a tela inicial do aplicativo.

1. Edite o arquivo src/app/app.component.html: Com seu editor favorito, abra servbay-angular-app/src/app/app.component.html. Remova ou substitua o conteúdo para exibir um título simples, por exemplo, "Hello ServBay!".

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

3. Rodando o projeto em modo desenvolvimento

Durante o desenvolvimento, normalmente usamos o servidor de desenvolvimento integrado do Angular CLI (ng serve), que oferece hot reload, facilitando a programação. A seguir, usaremos o proxy reverso do ServBay para acessar este servidor por um domínio local.

1. Inicie o servidor de desenvolvimento do Angular: No diretório raiz do projeto (/Applications/ServBay/www/servbay-angular-app), execute:

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

   Isso vai compilar seu app Angular e rodar um servidor web em http://localhost:8585/. Mantenha este terminal aberto para o servidor continuar ativo.

2. Configure o site no ServBay (Proxy Reverso): No painel do ServBay, acesse a seção de configuração de sites. Adicione uma nova configuração de site, direcionando um domínio local para o servidor de desenvolvimento do Angular via proxy reverso.

   • Nome: Por exemplo, My Angular Dev Site (nome interno de referência)
   • Domínio: Recomenda-se algo como servbay-angular-dev.servbay.demo. O ServBay irá direcionar automaticamente domínios .servbay.demo para 127.0.0.1.
   • Tipo de site: Selecione Proxy Reverso (Reverse Proxy).
   • Endereço do proxy: Insira 127.0.0.1.
   • Porta do proxy: Coloque o mesmo valor do comando ng serve, por exemplo, 8585.

   Salve e aplique as alterações.

3. Acesse o site em modo desenvolvimento: Abra seu navegador e visite https://servbay-angular-dev.servbay.demo.

   Como você está acessando via ServBay, e ele gera e configura certificados SSL automaticamente (usando ServBay User CA ou ServBay Public CA), será possível navegar com HTTPS local, simulando produção e antecipando possíveis problemas relacionados a segurança.

4. Construindo e rodando a versão de produção

Ao finalizar seu desenvolvimento Angular, gere a versão otimizada do projeto para produção. Isto criará arquivos estáticos prontos para serem hospedados. Usaremos então a funcionalidade de site estático do ServBay.

1. Gere o build de produção: No diretório raiz do projeto (/Applications/ServBay/www/servbay-angular-app), execute:

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

   O parâmetro --prod (comportamento padrão em versões novas) ativa otimizações como AOT, minificação de código, tree-shaking, etc. Os arquivos finais aparecerão na pasta dist/servbay-angular-app (verifique o nome conforme a configuração do seu projeto).

2. Configure o site no ServBay (site estático): No painel do ServBay, acesse as configurações de sites. Crie uma nova configuração apontando o domínio local para a pasta de build gerada.

   • Nome: Por exemplo, My Angular Production Site
   • Domínio: Sugerimos servbay-angular-prod.servbay.demo.
   • Tipo de site: Escolha Estático (Static).
   • Diretório raiz: Aponte para a pasta de build, normalmente /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Garanta que este diretório contenha o arquivo index.html.

   Salve e aplique as alterações.

3. Acesse o site em modo produção: Navegue até https://servbay-angular-prod.servbay.demo.

   Agora, você está visualizando a versão de produção do seu projeto Angular, servida como arquivos estáticos pelo servidor web de alta performance do ServBay (Caddy, Nginx ou outro, conforme sua configuração). O SSL é aplicado automaticamente, garantindo navegação segura.

Vantagens de usar o ServBay no desenvolvimento com Angular

• Ambiente integrado: Instale e gerencie versões do Node.js facilmente sem mexer com variáveis de ambiente.
• Gestão flexível de sites: Configure proxies reversos e sites estáticos por interface gráfica, alternando rapidamente entre ambientes de desenvolvimento e produção.
• SSL integrado: Certificados SSL locais gratuitos e automáticos para simular o ambiente de produção, evitando alertas de conteúdo misto.
• Suporte multiplataforma: Para projetos que envolvam backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot etc.) ou bancos de dados (MySQL, PostgreSQL, MongoDB, Redis), o ServBay integra facilmente todas essas tecnologias, com suporte estável e recursos atualizados.
• Backup e restauração de dados: Backup automático para configurações, sites, bancos de dados e certificados SSL, garantindo segurança dos seus dados locais.
• Redefinição de senhas de bancos: Ferramenta integrada para redefinir senhas root dos bancos MySQL, MariaDB e PostgreSQL, solucionando um problema comum para desenvolvedores.

Perguntas Frequentes (FAQ)

• P: Recebo "command not found: ng" ao rodar ng new ou ng serve. O que fazer? R: Significa que o Angular CLI não está instalado corretamente ou não está no PATH do sistema. Certifique-se de que o @angular/cli foi instalado globalmente (npm install -g @angular/cli) e que o ServBay configurou o ambiente Node.js no PATH. Reinicie o terminal ou o ServBay caso necessário.
• P: O ng serve falha porque a porta já está em uso. E agora? R: Isso indica que a porta especificada (por exemplo, 8585) está ocupada por outro processo. Defina uma porta diferente usando o parâmetro --port, por exemplo, ng serve --port 8586, e atualize a configuração do ServBay para refletir essa alteração.
• P: Configurei o site no ServBay, mas não consigo acessar pelo domínio. O que verificar? R: Confirme os pontos abaixo:
  • O ServBay está rodando?
  • No modo desenvolvimento, o servidor do Angular (ng serve) está ativo e na mesma porta configurada para o proxy reverso?
  • No modo produção, o diretório raiz do site aponta corretamente para a pasta que contém o index.html gerado (dist/nome-do-seu-projeto)?
  • Verifique os logs do ServBay para detalhes de possíveis erros.
  • Certifique-se de que o domínio digitado no navegador coincide com o definido na configuração do ServBay.
• P: Posso usar diferentes servidores web do ServBay (Caddy/Nginx/Apache) para hospedar meu Angular em produção? R: Sim! O ServBay permite escolher Caddy, Nginx ou Apache para servir arquivos estáticos. Ao configurar o site, o ServBay utilizará automaticamente o servidor ativado no momento. Todos esses servidores são eficientes para entregar conteúdo estático.

Resumo

Seguindo este guia, você aprendeu a criar e rodar projetos Angular no ServBay de forma prática e eficiente. Você viu como configurar proxies reversos para acessar o modo desenvolvimento pelo domínio local e como hospedar a build de produção com serviço de arquivos estáticos do ServBay. Com o ambiente Node.js, gerenciamento intuitivo de sites e suporte SSL integrado do ServBay, seu fluxo de trabalho Angular torna-se mais produtivo e seguro. O suporte completo do ServBay a várias tecnologias garante uma base sólida para o desenvolvimento full stack local.