Live Reload no Ruby on Rails

ERB, HTML, CSS, JS & Ruby on Rails! ⚡

Hoje vamos aprender como aplicar o live reload enquanto estamos trabalhando em nossas views dentro do RAILS ❤

Para tal, vamos precisar das seguintes gems:

- guard
- guard-livereload
- rack-livereload

Você pode entrar no site do http://www.rubygems.org e baixar as versões mais recentes.

Mãos a obra

Vamos criar um projetinho de demonstração:

$ rails new blog

No Gemfile do projeto, dentro do bloco de desenvolvimento, vamos adicionar as gems que mencionei logo no inicio deste post.

group :development do
gem 'guard', '~> 2.15'
gem 'guard-livereload', require: false
gem 'rack-livereload'
end

Feito isso, rode o comando ​bundle install

Ok. Agora vamos gerar um arquivo chamado “Guardfile” usando o comando guard init livereload.

Neste arquivo é que ficam as configurações do Guard, como arquivos que ele vai ler, porta em que o serviço vai rodar e etc…

Para configurar o rack-livereload abra o seu arquivo config/environments/development.rb e adicione a seguinte linha:

config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload

Por hora é tudo o que precisamos. Vamos criar um scaffold para posts.

$ rails g scaffold post title body:text user && rails db:migrate

Vamos iniciar o nosso guard. No terminal. Digite o seguinte: $ bundle exec guard ou simplesmente $ guaOk! Agora abra outro terminal e inicie o servidor da aplicação. ​$ rails s

Feito isso abra seu editor de text preferido e faça alguns alterações, por exemplo, na index de posts… Se tudo tiver ocorrido bem você verá que o browse vai atualizar automaticamente toda vez que você salvar o arquivo. E no terminal, onde o guard esta rodando, você vai perceber que ele vai mostrar alguns logs referentes ao arquivo que você esta editando no momento.

Por exemplo:

-  20:08:08 - INFO - Reloading browser: app/views/posts/index.html.erb app/views/posts/index.html.erb

Este é o caminho feliz :)

Ok! Você fez tudo até aqui e esta funcionando? que maravilha!! Porém, eu tive um probleminha com as permissões da porta padrão que o guard roda. Em decorrência disso acabou não funcionando como deveria. Eu vou aproveitar pra mostrar como rodou aqui na minha maquina. Lembrando que essa também é uma solução recomendada pela pagina oficial da gem :)

Erro: `start_tcp_server’: no acceptor (port is in use or requires root privileges) (RuntimeError).

No Problem!

Dentro do nosso Guardfile temos um bloco "com uma descrição 'livereload'" . É possível passar valores diferentes dos valores defaults. No meu caso vou mudar host e a porta vai rodar. O meu ficou assim:

guard 'livereload', port: '35729', host: '127.0.0.1' do
extensions = {
css: :css,
scss: :css,
sass: :css,
...
..
.
end

Instalei também uma e extensãozinha no meu google-chrome chamada livereload http://livereload.com.

Rodando novamente o guard no terminal:

$ bundle exec guard

Subindo o servidor da aplicação:

$ rails s

Agora no browse basta da um clique sobre o ícone do live reload e tudo deve funcionar perfeitamente! :)

É isso, gente! Espero que tenha gostado e aprendido mais essa. Aproveitando, não esqueçam de dar uma passada no site Vídeos de TI pra ter acesso a uma gama de conteúdos legais. Também é importante que você deixe seus comentários, e é claro, nos seguir nas redes sociais. Caso queira, você também pode se cadastrar em nossa newsletter semanal. Um forte abraço!