Introdução

Depois de passar a maior parte de dois anos trabalhando no lado servidor de sites, bem como no Objective-C, estou começando a mergulhar de volta no lado cliente do desenvolvimento web. Rapaz, as coisas mudaram; Estou assustado e animado!

Decidi dar uma chance ao AngularJS com base em seus recursos, documentação e suporte da comunidade. Desde que saí, as ferramentas evoluíram para incluir coisas a que estou acostumado no lado do servidor, como:

andaime
testes de unidade com cobertura de código
compilações automatizadas
gestão de dependência

Configurar todas essas coisas agora é muito fácil graças ao Yeoman, mas me levou a maior parte de um dia resolvendo problemas, principalmente entre NodeJS e VirtualBox. Detalharei as etapas para colocar seu ambiente de desenvolvimento em funcionamento e delinearei alguns dos problemas que encontrei.

Dado: Você tem um VirtualBox funcional com uma pasta compartilhada entre o seu host e o convidado. Usei Ubuntu 12.10 64bit.

Symlinking

O problema mais contencioso era entre as pastas compartilhadas do VirtualBox e o NodeJS que queria usar links simbólicos. O consenso geral é que, se você tentar usar links simbólicos em uma pasta compartilhada, terá problemas . Este recurso é desativado por padrão por motivos de segurança.

Testei essa configuração em duas versões do VirtualBox (4.2.1 e 4.2.10). Apesar de não usar links simbólicos, tive que executar este comando em 4.2.10 (mas não 4.2.1) antes de lançar o VirtualBox:

VBoxManage setextradata *VirtualBoxName* VBoxInternal2/SharedFoldersEnableSymlinksCreate/*SharedFolderName* 1

Onde VirtualBoxName e SharedFolderName correspondem à configuração de seus sistemas. Lance sua caixa e ssh nela.

Instalando o Node

A versão no apt nem sempre é atualizada ou pode não funcionar com Yeoman / AngularJS / Grunt / etc. Digite o Node Version Manager nvm . Ele permite que você instale várias versões do nó como um usuário sem privilégios e alterne livremente entre eles. Instale as dependências do Node e NVM:

sudo apt-get install g++ curl libssl-dev apache2-utils git-core
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.profile

Em seguida, instalaremos uma versão do Node:

nvm install 0.8
nvm alias default 0.8

Eu escolhi 0.8 porque na época (v0.10.1) falhou ao instalar o yeoman e karma com o erro: cb() never called!

Yeoman

Yeoman faz toda a configuração para nós economizando horas de tempo. No momento em que este artigo foi escrito, eu testei a versão 1.0-BETA. Vamos instalar o yeoman e suas dependências “globalmente” (no escopo do nosso usuário):

npm install -g karma yo grunt-cli bower

PhantomJS

O PhantomJS é um navegador WebKit sem cabeça. Este navegador permite que você execute testes de unidade Javascript em seu console sem a necessidade de uma GUI. Vamos baixar um binário pré-compilado e instalá-lo (1.9 neste exemplo):

wget https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-x86_64.tar.bz2
tar jxvf phantomjs-1.9.0-linux-x86_64.tar.bz2
sudo mv phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/local/bin/

Se / usr / local / bin / não estiver em seu $ PATH, mova a caixa para algum lugar que esteja. Você também pode instalar o PhantomJS via apt-get ou compilar pelo código-fonte.

Configurando o projeto

Vamos começar a criar nosso projeto AngularJS. cdpara sua pasta virtual compartilhada e configure o projeto:

mkdir angularjs-project && cd angularjs-project
npm install generator-angular generator-karma --no-bin-links
yo angular
npm install --no-bin-links
bower install --dev

Responda “Não” quando o yeoman perguntar “Twitter Bootstrap for Compass?” a menos que você saiba o que é bússola e queira usá-la.

Isso cria um padrão AngularJS com estrutura de teste de unidade, monitoramento / recarregamento de pasta ao vivo, dependências de Javascript e muito mais.

Você notará os ” –no-bin-links ” no npm install. Isso diz ao npm para não criar nenhum link simbólico; isso impedirá que o npm divulgue erros ilegíveis porque o VirtualBox não está satisfeito.

Erro do Bower?

Recebi 5 mensagens de erro diferentes e intermitentes ao configurar isso. Se você receber algum erro durante a execução bower install(o mais comum era 128), limpe manualmente o cache e tente novamente; repita até que funcione:

rm -rf ~/.bower/cache
bower install --dev

Ajuste a configuração

Abra karma.conf.js e altere a linha 49:

browsers = ['PhantomJS'];

Abra Gruntfile.js. Primeiro vá para a linha 51 e mude 'localhost‘para '0.0.0.0‘, em seguida, pesquise e remova as seguintes linhas para cada ponto que aparecem:

'coffee:dist',
'compass:server',
'coffee',
'compass',

Alterar localhost para IP permite que nosso host acesse o servidor convidado. Remover as outras linhas evita que Grunt reclame se você não estiver usando CoffeeScript ou Compass (o padrão não é); claro, se você estiver usando um desses, deixe-os. 🙂

Teste

Vamos! Execute o seguinte comando para testar:

grunt test

Se funcionar, estamos prontos para prosseguir. Você pode iniciar o servidor de desenvolvimento com o nó:

grunt server

Agora você está pronto para começar a desenvolver em seu IDE em seu sistema host e acessá-lo com seu navegador também. Quando você salva um arquivo em seu IDE, ele deve refletir automaticamente em seu navegador.