Tableless

Busca Menu

Integração Contínua com Travis CI — Parte 01

Seja o primeiro a comentar por

O objetivo geral do artigo é mostrar como fazer uma Integração Contínua (técnica de desenvolvimento agile) com Travi CI, criando um repositório no GitHub e publicando nosso projeto em um Host utilizando o Heroku.

Nesse primeiro post iremos montar toda nossa estrutura de diretórios e configuração de arquivos. Por fim iremos criar nosso repositório no GitHub e enviar o nosso projeto local.

No segundo post iremos registrar nossa aplicação no Dribbble, configurar o Travis e Heroku e finalizar nossa aplicação client-side.

Sobre o Travis

Travis CI é uma plataforma/serviço de Integração Contínua, que é free para todos os projetos open source hospedados no GitHub. Com apenas um arquivo chamado .travis.yml contendo algumas informações sobre o projeto, podemos produzir builds automatizados com todas as mudanças, para o branch master ou outro, e até mesmo através de pull request.

Pré Requisitos

  • Conta no GitHub
  • Conta no Heroku
  • Para o Travis você poderá usar a mesma conta do GitHub
  • Git, NodeJS e Bower instalado
  • Um editor de texto: Sublime Text, Atom ou qualquer outro de sua preferência.

Descrição do Projeto

Iremos implementar uma aplicação client-side que consulta uma API do site Dribbble e mostre os Shots mais populares. Usaremos as seguintes tecnologias no front-end: Angularjs e Materialize.css como framework de componentes. Para gerenciar os pacotes e dependências utilizaremos o Bower. No server-side usaremos a plataforma NodeJS como nosso servidor web, e o Gruntjs para automatizar algumas tarefas. Para o versionamento utilizaremos o Git.

Criando Nossa Estrutura de Diretórios

Estrutura de Diretórios

Os arquivos e diretórios podem ser criados da maneira que você se sentir mas a vontade. OBS.: Não crie o diretório “.git”, pois ele será criado através da nossa linha de comando, o restante pode ser criado manualmente.

Detalhamento da Estrutura

  • client: diretório onde ficará todos os nossos arquivos de front-end.
  • .bowerrc: arquivo de configuração do Bower, é nele que iremos definir onde serão instalados nossos pacotes. Se você não criá-lo as dependências serão instaladas no diretório chamado bower_components padrão do bower.
  • .gitignore: arquivos que podem ser ignorados pelo versionamento do Git.
  • .travis.yml: arquivo de configuração da nossa integração com o Travis.
  • Gruntfile.js: arquivo onde ficará todas as configurações de tarefas automatizadas, como por exemplo: concatenação e minificação dos arquivos.
  • server.js: arquivo onde faremos a configuração de nosso servidor web.

deixe o diretório client com a seguinte estrutura:

Diretório Client

código do arquivo .bowerrc

{
"directory" : "client/vendor"
}

código do arquivo .gitignore

node_modules/

código do arquivo .travis.yml

language: node_js
node_js:
- "6.1"
- "5.12.0"
- "5.11.1"

código do arquivo server.js

var express = require('express');
var serveStatic = require('serve-static');
var app = express();
var client = process.env.NODE_APP_DIRECTORY === 'production'
? '/client/dist' : '/client';
var port = process.env.PORT || 8081;
app.use(serveStatic(__dirname + client));
app.listen(port,function(){
console.log('localhost:'+port);
});

Link para o código do arquivo server.js no GitHub.

código do arquivo Gruntfile.jsO código e toda sua configuração, será explicado na segunda parte do post.

Bower: Instalação dos Pacotes e suas dependências

Vá para raiz do projeto e digite o seguinte comando para instalação das dependências.

$ bower install angular angular-resource angular-ui-router angular-sanitize
angular-loading-bar bootstrap materialize

após a execução desse comando o seu diretório client/vendor ficará da seguinte forma:

Pasta Client

Nodejs: Instalação e Configuração dos Pacotes

$ npm init -y

após a execução desse comando será criado um arquivo na raiz do seu projeto chamado package.json.

Instalação das Dependências

$ npm install express serve-static --save

Iniciando o Versionamento com o GIT

$ git init
$ git add .
$ git commit -m "primeiro commit"

Executando a aplicação

node server.js

o seu sistema terá que exibir a seguinte mensagem

client: /client
environment: undefined
localhost:8081

para parar a execução do servidor pressione ctrl + c.

Criando Repositório no GitHub

Abra o site do GitHub, crie um repositório público chamado ci-agile-th.

Criando um repositório

após a criação aparecerá a seguinte tela

Repositóriodigite os comandos que estão dentro do 2º bloco na raiz do seu projeto

$ git remote add origin https://github.com/dejaneves/ci-agile-th.git
$ git push -u origin master

te espero no próximo post.

Links Úteis

Instalação do NodeJS

Instalação do Bower

Publicado no dia