{"componentChunkName":"component---src-templates-single-template-tsx","path":"/usando-browsersync-em-uma-aplicacao-ruby-on-rails","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

\n \n \n \n \n \n \n \n \n
Usando Browsersync em uma aplicação Ruby on Rails
\n

\n

Aplicações Rails são magníficas não é mesmo? Todas aquelas Gems \"mágicas\", que fazem de tudo e um pouco mais, são lindas de se ver.

\n

Mas e se eu quiser algo ainda mais \"supimpa\" pra fazer o meu front-end? E se eu não quiser sair do Rails? Será que existe algo que sincronize todos os navegadores possíveis ou que me de históricos e ferramentas para debug do front-end, será que existe uma Gem assim para Rails?

\n

Eu procurei pelo Google a fora uma Gem que fizesse essa magia toda, mas não encontrei nada tão bom quanto o Browsersync, e se você não conhece o Browsersync recomendo dar uma lida nesse artigo que a Caelum escreveu.

\n
\n

ℹ️ Se você é front-end e não conhece o Browsersync eu recomendo fortemente que leia sobre ele e comece imediatamente a usar, é uma ferramenta indispensável no cinto de utilidades do Batman!

\n
\n

Ruby on Rails

\n

O intuito desse post não é explicar sobre o Rails e suas \"Magic\" Gems, e sim como integrar e usar o Browsersync dentro de uma app Rails.

\n

Primeiro de tudo você precisa de uma aplicação Rails já instalada em sua máquina (a vá! jura? 😱), logo após essa façanha instale o Browsersync global (sim tem que ser global).

\n

Instalando o Browsersync

\n

Para instalar o Browsersync global basta usar o comando abaixo.

\n
$ npm install -g browsersync
\n

Assim que a instalação estiver finalizada execute o seguinte comando para saber se tudo está funcionando.

\n
$ browser-sync --version
\n

O comando acima irá te mostrar qual a versão do Browsersync foi instalada na sua máquina, aqui instalou a versão 2.13.0.

\n

Usando Browsersync dentro do Rails

\n

Se você ainda não sabe o Rails sobe um servidor nativo com o comando rails server ou apenas rails s e usa a porta 3000, então precisaremos do servidor do rails inicializado para rodar o Browsersync.

\n

Após ter inicializado o server do Rails você precisa rodar outro comando no seu terminal (em outra aba ou em outra tela).

\n
$ browser-sync start --proxy localhost:3000 --files \"app/assets/**/* , app/views/**/*.html.*, \\!tmp, \\!log\"
\n

Eu vou explicar um pouco qual é a do comando acima. 😁

\n

Basicamente eu estou inicializado o server do Browsersync, apontando para o proxy do Rails (que já está rodando na porta 3000), passando quais são os arquivos que eu quero que ele assista (no caso apenas os assets e as views do Rails) e por fim estou ignorando os arquivos temporários da aplicação.

\n

Se isso tudo der certo ele vai abrir o navegador automaticamente para você, vai demorar um pouco até que ele sincronize tudo com o Rails, mas depois vai de boas.

\n

Caso você não queira que o navegador abra automaticamente basta colocar --no-open no final do comando e sucesso.

\n

Os comandos do Browsersync são bem fáceis de entender e se você já esta acostumado com outros comandos no terminal será bem tranquilo. Para saber mais leia em browsersync.io/docs/command-line/

\n
\n

Espero ter ajudado, Abraço!

\n

😎

","excerpt":"Aplicações Rails são magníficas não é mesmo? Todas aquelas Gems \"mágicas\", que fazem de tudo e um pouco mais, são lindas de se ver. Mas e se eu quiser…","timeToRead":2,"frontmatter":{"category":["rails"],"date":"há 10 anos","datePublished":"2016-06-20T00:00:00.000Z","description":"Hoje vou explicar como integrar e usar o Browsersync.io dentro de uma aplicação Ruby on Rails","path":"/usando-browsersync-em-uma-aplicacao-ruby-on-rails","tags":["rails","npm"],"title":"Usando Browsersync em uma aplicação Ruby on Rails","image":{"publicURL":"/static/painel-browsersync-io-a7cb73a8007cc1d7a131ed13680ee44d.png","name":"painel-browsersync-io"}},"fields":{"readingTime":{"words":504}}}},"pageContext":{}}}