Instalando pacotes no Rails com Yarn (Jquery, Bootstrap e Materialize)

O que vamos aprender?

  • O que é o Yarn
  • Como o Yarn funciona
  • Como instalar o Yarn
  • Como instalar o Jquery com Yarn
  • Como instalar o Bootstrap com Yarn
  • Como instalar o Materialize com Yarn

 

Screencast

 

O que é o Yarn

O Yarn é um gerenciador de pacotes javascript rápido, seguro e confiável que foi integrado no rails >= 5.1 para facilitar ainda mais a gestão das dependências. (agora você usa o Bundler para bibliotecas ruby e o Yarn para bibliotecas javascript, simples assim)

Ele é uma alternativa mais robusta ao NPM e ao bower e permite inclusive a instalação de todas as bibliotecas disponíveis destes outros dois gerenciadores.

Além disso com ele você pode instalar bibliotecas offline (se você instalou uma vez ele deixa “cacheado” na sua máquina para que você instale em outros projetos de forma offline).

 

Como o Yarn funciona

Assim como o Bundler o Yarn possui um arquivo onde as dependências são declaradas chamado package.json (o mesmo do NPM), um exemplo do arquivo:

Para instalar as dependências listadas no package.json você pode rodar:

Ele também possui um arquivo chamado yarn.lock para garantir que a mesma versão da biblioteca seja instalada em outras máquinas, um exemplo do arquivo:

No Yarn é possível instalar uma nova biblioteca rodando (as bibliotecas instaladas assim são adicionadas no package.json):

Para retirar uma biblioteca você pode rodar (as bibliotecas removidas assim são removidas no package.json):

Para saber mais sobre ele: Documentação do Yarn

 

Como instalar

Para instalar basta acessar esse guia do Yarn, selecionar o seu sistema Operacional e seguir o passo a passo.

 

Vamos aos códigos \o/

Nós vamos criar um pequeno projeto para demonstrar como instalar o Jquery, Boostrap e Materialize usando o Yarn, as dependências para seguir o exemplo são:

 

Preparando o Projeto

0 – Instale uma versão > 5.1 do rails:

1 – Gere o projeto rodando:

2 – Entre no projeto:

3 – Crie o banco de dados e rode as migrations:

4 – Crie uma página rodando:

 

Como instalar o Jquery com Yarn

1 – Coloque em app/javascripts/page.coffee

2 – Vai apareceu o erro no console:

“Uncaught ReferenceError: $ is not defined”

3 – Rode no console:

4 – Acrescente ao inicio dos require em app/assets/javascripts/application.js

5 – Atualize o servidor e veja o resultado no browser \o/

Como instalar o Bootstrap com Yarn

1 – Atualize o app/views/page/home.html.erb colocando:

2 – Veja no browser que o estilo não foi aplicado

3 – Role no console para instalar:

4 – Acrescente após no inicio dos require em app/assets/stylesheets/application.css

5 – Vejo no browser que o estilo foi aplicado \o/

 

Como instalar o Materialize com Yarn

1 – Atualize o app/views/page/home.html.erb colocando:

2 – Veja no browser que o estilo não foi aplicado

3 – Role no console para instalar:

4 – Acrescente após no inicio dos require em app/assets/stylesheets/application.css (e remova o boostrap):

5 – Vejo no browser que o estilo foi aplicado

 

Extra: Deploy no heroku com Yarn

Com a utilzação das dependencias Js sendo gerenciadas pelo Yarn o deploy no heroku fica um pouco diferente, então achei válido compartilhar o passo a passo com você também 🙂

1 – Primeiro (via heroku Cli) vamos criar nosso APP no heroku (rode no console na pasta do seu projeto):

2 – Agora vamos incluir os buildpacks (que são os pacotes que vão ajudar o heroku a instalar nossas dependências), rode no console:

*Se você fizer o deploy sem ‘setar’ o buildpack o heroku vai detectar qual é o seu framework principal e vai ‘setar’ para você (no caso do buildpack do ruby), mas como vamos usar também o buildpack nodejs para instalar os pacotes do yarn então já aproveitamos e ‘setamos’ tudo na mão.

3 – Para finalizar basta rodar os comandos para subir o código:

4 – Pronto \o/



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/



Conclusão

O Yarn é incrível e veio para nos ajudar a gerenciar as dependências javascript no Rails, então vale a pena integra-lo a suas ferramentas do dia a dia 🙂

Aproveite para conhecer o Active Storage também no nosso post “Usando na prática a nova ferramenta de upload do Rails“, assim como o Yarn ele está sendo inserido nessa nova fase do Rails (>= 5).

Obrigado por acompanhar o OneBitCode,
Estamos nos esforçando muito criar conteúdos que expandam seus conhecimentos como programador, conte com a gente 🙂

Grande abraço,
Leonardo Scorza

 


Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode trás conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por
Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

maio 11, 2018

Deixe um comentário

avatar
  Subscribe  
Notify of
Feito com s2 por OneBitCode
%d blogueiros gostam disto: