10.1 Aplicação Web com VRaptor 4 – Começando com o Bower: Gerenciando dependências

Ok, vamos iniciar as paradas com o bower e iniciar a nossa view.

Mas antes de começarmos, vamos aos recadinhos e patrocinadores. Já estamos trabalhando no nosso projeto, caso tenha caído neste tutorial acidentalmente, pode ver a lista dos episódios anteriores na introdução que fiz para estes posts. E lembre-se, você pode e deve acompanhar os códigos pelo meu github, segue o link ai em baixo:

https://github.com/pedro-hos/aprendendo-vraptor

Primeiro cara, você deve ter instalado e configurado o Nodejs e o Bower certo? Com eles instalados e certinho, vamos criar uma pasta, ao lado do projeto server (ou não, eu coloquei junto, mas pode ser separado). O nome que eu dei para a pasta foi meus-contatos-view se quiser pode dar o mesmo nome. Assim teremos uma estrutura tipo essa:

pastas

Bem simples né! Agora acesse usando o terminal a pasta que acabou de criar. Já dentro da pasta crie o arquivo .bowerrc esse é tipo um arquivo de configuração do bower, vamos colocar algumas instruções nele, como o local que queremos que as dependências sejam baixadas, informações de proxy entre outras. Mais informações na página do bower.

Dentro do arquivo coloque o seguinte conteúdo JSON:

{
  "directory": "public/libs"
}

Estamos informando onde queremos que as dependências fiquem, certo. Ainda dentro do terminal, vamos iniciar o bower. Dentro da pasta da view, vamos digitar o comando

bower init

Ele fará uma série de perguntas, você pode sair dando “enter” em tudo, não cabe aqui explicar esses pontos. Mas o livro de MEAN do Flávio Almeida da Casa do código explica bem detalhadamente cada passo e muito mais.

Feito isso vamos instalar algumas dependências, no terminal digite sem o sinal > ele é apenas para indicar que deve ser digitado em uma nova linha:

> bower install angular#1.3 --save
> bower install angular-mocks#1.3 --save
> bower install angular-resource#1.3 --save
> bower install angular-route#1.3 --save
> bower install bootstrap#3.3 --save
> bower install jquery#2.1.3 --save

Pronto, com as dependências baixadas, você dever ter notado a criação de um arquivo json, chamado bower.json com um conteúdo parecido com esse:

{
  "name": "meus-contatos",
  "version": "0.0.0",
  "authors": [
    "Pedro Hos <pedro-hos@outlook.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.3",
    "angular-mocks": "1.3",
    "angular-resource": "1.3",
    "angular-route": "1.3",
    "bootstrap": "3.3",
    "jquery": "2.1.3"
  }
}

Por fim o bower deve ter criado as pastas public/libs com as dependências dentro, assim

pastas_public

Se estiver tudo conforme disse, quer dizer que terminamos as configurações com sucesso. Se tiverem alguma dúvida, ou sugestão, mete a caneta ai nos comentários.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s