ServBay

Português

English
简体中文
繁體中文
Español
العربية
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Português

English
简体中文
繁體中文
Español
العربية
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

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

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

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

    bash
    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!".

    html
    <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:

    bash
    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:

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