Fala meus queridos, tudo bem com vocês? Hoje eu trago pra vocês um pequeno tutorial de como usar o Live Server em seus projetos com HTML, CSS e Javascript.
A primeira coisa que precisamos entender é o que é o Live Server é uma extensão do Visual Studio Code que permite criar um servidor HTTP para servir páginas HTML; o Live Server implementa, ainda, o que chamamos de ‘Live Reload’, ou ‘recarregar ao vivo’, significando que, no momento em que um arquivo dentro da pasta onde o Live server está executando é alterado, essa extensão automaticamente recarrega as páginas pra você, garantindo que a versão visualizada da sua página HTML seja sempre a mais atualizada.
Sabendo disso, passemos para o tópico de instalação do Live Server.
Instalando a extensão
O primeiro passo é procurar a extensão na parte de extensões do VS Code; basta clicar no símbolo de blocos na barra lateral da esquerda, depois clicar na caixa de pesquisa que aparece e pesquisar por “Live Server“. Após aparecer uma extensão com esse nome, basta clicar em instalar e a instalação estará concluída.
Após a instalação, recomendo reabrir o VS Code para garantir que tudo funcionou corretamente; você pode, ainda, recarregar manualmente o vscode, bastando apertar as teclas CTRL+SHIFT+P e digitar reload, após o que aparecerá uma opção chamada Developer: Reload Window. finalmente, aperte ENTER ou clique na opção e o VS Code será recarregado.
Usando o Live Server
Agora que temos nossa extensão instalada, podemos começar a utilizá-la; o Live Server é simpes de usar: basta clicar em qualquer arquivo HTML com o botão direito do mouse e escolher a opção Open With Live Server, que significa, no bom português, “Abrir com o Live Server”.
Observe que o Live Server cria um servidor usando a raiz da nossa pasta como a raiz do servidor e que, se na raiz da pasta existir algum arquivo chamado index.html , então essa será a página padrão do nosso servidor.
O Live Server sempre cria um servidor no endereço http://127.0.0.1:5500 ou http://localhost:5500; caso você inicie o Live Server e o navegador não abra automaticamente, basta entrar com esse endereço no seu navegador que a página-raiz será carregada.
Caso você tenha iniciado o Live Server em um arquivo que não é o index.html , basta colocar o caminho do arquivo com o nome do arquivo logo após o endereço do servidor. Por exemplo: digamos que o arquivo que você quer abrir se chama teste.html e esse arquivo se encontra dentro de uma pasta chamada testando ; o caminho para esse arquivo seria /testando/teste.html . Basta, então, colocar o endereço na seguinte maneira: http://127.0.0.1:5500/testando/teste.html , no qual a url padrão é equivalente à raiz da pasta.
Agora que sabemos como o Live Server opera, precisamos ter algumas coisas em mente; um caso em questão: sempre que vamos trabalhar com arquivos HTML e queremos usar o Live Server para desenvolver, precisamos sempre abrir a pasta do projeto onde o arquivo principal se encontra e, a partir dele, navegar para outras paginas, seja com Ajax ou simples navegação de páginas. No caso do exemplo que dei antes, essa seria uma má prática, porque não conseguiríamos construir uma página adequada com uma navegação tão bagunçada. O ideal, portanto, é garantir que a página principal sempre esteja no diretório raiz do nosso projeto; a partir dela, seguiremos com as demais páginas.
Espero que tenham gostado desse pequeno tutorial. Peço que registrem suas opiniões aqui; faço questão de ouvir suas críticas, caso precise melhorar algo.
