Private bower

Intro

Olá, meu nome é Carlos Henrique, tenho 21 anos e sou front-end developer na equipe Holmes da redspark.

Recentemente tivemos um grande crescimento em quantidade de projetos dentro do produto Holmes, o que cedo ou tarde tende ao pensamento de se reutilizar componentes de um projeto X em um projeto Y pois ambos estão no ecossistema Holmes.

Sendo famoso como gerenciador de dependências no mundo front-end, o bower foi nossa escolha para o controle dos componentes, porém os mesmos deviam estar apenas de maneira interna para a empresa.

Assim chegamos no ponto focal deste post, distribuição de componentes front-end de forma restrita.

 

Server

Começamos pelo server, algo que será extremamente rápido pela solução que adotamos. Resolvemos utilizar o docker  para provisionar o ambiente.

Sendo assim, primeiramente é necessário ter o docker instalado e configurado.

Depois basta executar o comando abaixo trocando as variáveis necessárias, basicamente apontamos o ADDRESS para o IP da máquina e os volumes do docker para a pasta onde as dependências serão armazenadas.

[markdown]

“`

docker run -e ADDRESS=my-bower-registry \
-v /somewhere/to/store/stuff:/data \
-p 5678:5678 -p 6789:6789 -p 7891:7891 \
tandrup/private-bower
“`

[/markdown]

Pronto! Temos o servidor com o private bower no ar.

private bower

 

Front-end

Tendo o servidor de bower configurado e assumindo sua localização em http://localhost:5678, passamos aos passos de configuração nos projetos para registrarem e buscarem componentes no nosso server privado.

Com um resumo bem generalizado, o bower se baseia em alguns arquivos com o padrão JSON como forma de configuração para registro e busca de componentes. Quando precisamos declarar dependências e informações gerais do projeto para o bower utilizamos o bower.json, mas quando precisamos declarar configurações do bower para aquele projeto utilizamos o .bowerrc. Como queremos ajustar propriedades do bower, o bowerrc é o arquivo qual iremos utilizar.

 

Primeiros passos

Basicamente precisamos falar para o bower que ele possuí um novo domínio de registro para as suas ações e para isto utilizaremos a propriedade registry. Este atributo pode ser especificado como string ou objeto.

Utilizando o registry de maneira absoluta (como string):
[markdown]
“`
{
“registry” : “http://localhost:5678”
}
“`
[/markdown]

Dessa maneira todas as propriedades registradoras (para busca, registro e publicação) irão assumir o valor utilizado.
Utilizando o registry de maneira detalhada (como objeto):

Quando o utilizamos em forma de objeto podemos ter mais controle sobre as propriedades de uma maneira mais específica. Podemos falar que a busca vai ser em um domínio X, mas que o registro de novos componentes será em um domínio Y.

Já que queremos ter um gerenciador de dependências de modo privado, o ganho por utilizar o registry em forma de objeto vêm quando podemos falar para o bower que ele só poderá registrar componentes internos no nosso server privado, porém ainda assim poderá fazer buscas por componentes tanto no nosso domínio privado quanto no público.

Optando por está abordagem, teremos uma propriedade para cada ação (busca, registro e publicação).

registry.register

Vamos fazer exatamente como citei no exemplo acima. Vamos dizer ao bower que o registro do componente/projeto será no nosso server privado.

[markdown]
“`
{
“registry” : {
“register”: “http://localhost:5678”
}
}
“`
[/markdown]
Assim caso você tente registrar o seu projeto como um componente bower irá registrá-lo no ambiente privado.
[markdown]
“`
# bower register
# for example:

$ bower register example git://github.com/user/example.git
“`
[/markdown]
registry.search

Agora vamos dizer que a busca por componentes poderá ser feita tanto no nosso servidor quanto no público padrão(Heroku).
[markdown]
“`
{
“registry” : {
“register”: “http://localhost:5678”,
“search”: [
“https://bower.herokuapp.com”,
“http://localhost:5678”
]
}
}
“`
[/markdown]
Agora toda vez que você executar uma busca por componentes através do bower ele irá procurar nos dois domínios.

[markdown]
“`
# bower search
$ bower search example
“`
[/markdown]
registry.publish

Por fim declaramos que todas as publicações do componente irão para o domínio privado.

[markdown]
“`
{
“registry” : {
“register”: “http://localhost:5678”,
“search”: [
“https://bower.herokuapp.com”,
“http://localhost:5678”
],
“publish” : “http://localhost:5678”
}
}
“`
[/markdown]
That’s all folks 🙂

Temos nosso server rodando e nossos projetos preparados para registro, busca e publicação de componentes bower.

CTA-ebook-transformação-digital

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>