Artigos > Front-end

Instalando o Browser-sync

Matheus Alberto
Matheus Alberto

O que é o browser-sync

Browser-sync é uma aplicação escrita com NodeJS que faz a sincronização do browser com as mudanças que acontecem em um projeto, sem a necessidade de perder o foco do editor de código. É uma ferramenta extremamente útil, principalmente, quando trabalhamos com desenvolvimento visual de um projeto com HTML, CSS e JS. Uma das vantagens de se utilizar o browser-sync é que ele sobe um servidor HTTP, e com isso, podemos conectar diversos dispositivos e todos eles serão atualizados automaticamente, com as mudanças acontecendo no projeto. É ótimo para testar uma página em diversos dispositivos simultaneamente, sem precisar depender das ferramentas de browser.

Instalando o browser-sync

Para instalar o browser-sync, o primeiro passo é instalar o NodeJS. Caso você ainda não tenha o NodeJS instalado e tenha dúvidas de como instalar, veja esse artigo, que explica como instalar o NodeJS no Windows e no Linux.

Após instalar o NodeJS, vamos abrir o terminal e digitar o seguinte comando:

npm install -g browser-sync

E após terminar o processo de instalação, o browser-sync já estará pronto para uso.

Usando o browser-sync

Para iniciar o browser-sync, vamos abrir o terminal e direcionar para a pasta do projeto, utilizando o comando cd. Depois, vamos rodar o seguinte comando na raiz do projeto:

browser-sync start --server --files . --directory

Explicando o que são cada um dos argumentos:

browser-sync start vai iniciar o servidor do browser-sync.

--server vai iniciar o servidor localmente

--files . vai garantir que o browser-sync observe todos os arquivos do projeto

--directory é opcional, mas sem esse argumento, o browser-sync vai procurar por uma página index.html para servir de início da aplicação. Caso você queira ver uma página diferente, eu recomendo adicionar esse argumento.

Depois de rodar o comando, uma nova aba no seu navegador padrão deve se abrir automaticamente com a estrutura do projeto. Em seguida, basta escolher um arquivo .html e agora qualquer mudança que acontecer no projeto será atualizada automaticamente no navegador, sem a necessidade de recarregar a página para ver as mudanças.

Acessando de outro dispositivo (local)

Uma das grandes vantagens de se usar o browser-sync é exatamente poder testar o projeto em diferentes dispositivos e todos eles atualizarem automaticamente a cada mudança no projeto.

O primeiro passo após iniciar o browser-sync, é descobrir o seu ip local. Para isso, abra uma outra aba (ou janela) no seu terminal e escreva ipconfig (no Windows) ou ifconfig (no Linux Ubuntu)

imagem do terminal do Windows após executar ipconfig

imagem do terminal do Linux Ubuntu após executar ifconfig

Anote o seu endereço de ip local (IPv4). Geralmente, o ip local segue a seguinte estrutura: 192.168.xxx.xxx

O próximo passo é conectar outro dispositivo na máquina onde o browser-sync foi iniciado. Para isso, nós precisamos do ip local e também da porta de conexão. Para descobrir a segunda informação, podemos ver o log do browser-sync no momento em que foi iniciado.

imagem do terminal mostrando o browser-sync iniciado

Com as duas informações em mãos, podemos digitá-las na barra de endereço do segundo dispositivo, digitando no seguinte formato: ip-local:porta.

E agora, os dois dispositivos estão em sincronia com atualizações do projeto, e o mais interessante é que algumas interações na página (como o scroll) tem efeito nos dois dispositivos, simultaneamente.

Observação: é extremamente importante que os dispositivos estejam na mesma rede, seja por cabo ou por Wi-Fi.

Gostou do tema? Para consultar a primeira parte deste artigo, acesse: Como instalar NodeJS no Windows/Linux.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software

Artigos > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas