Olá pessoal, neste artigo criaremos um servidor com NodeJS que atualizará a sua página web automaticamente sempre que houver uma alteração no código. Para isso, utilizaremos o Live-server, um pacote para Node que auxilia na criação de um servidor em tempo real.
O Live-Server é um pequeno servidor para desenvolvimento com a capacidade de atualizar a página ao vivo, dispensando a necessidade de instalação de plug-in para o navegador ou adicionar códigos para inicializar a função de atualização de página.
Para instalar o live-server, você precisa do npm. Utilize o seguinte código para instalação:
npm install -g live-server
Começando:
Crie uma pasta com o nome do seu projeto. Neste tutorial, criarei uma pasta chamada Live_node. Precisamos criar o nosso arquivo package, que conterá os dados de nosso projeto. Utilize o seguinte comando para criar o seu package de forma rápida:
npm init --yes
Com nosso package criado e dependência instalada, vamos começar criando um arquivo index.html. Esse arquivo será nossa página principal.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live_node</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1> Olá Mundo </h1>
</body>
</html>
Criaremos também um main.css para estilizar nossa página. Adicione os seus arquivos index.html e main.css dentro de uma pasta chamada public.
No nosso arquivo main.css, adicionaremos um background-color no nosso body e também, alteraremos a cor das letras:
body{
background-color: black;
color: #fff;
}
Com isso, temos nosso Body na cor preta e as letras na cor branca.
Agora, no seu terminal, adicione o seguinte comando:
live-server public
Esse comando fará nosso código rodar, atualizando o navegador automaticamente. É importante salientar que este comando deve ser executado em modo administrador no seu powershell/prompt/terminal. Pode acontecer de ocorrer a necessidade de adicionar o npm em suas variáveis de ambiente no windows. Caso você não saiba como fazer isso, este link pode ajudá-lo a realizar este procedimento.
Caso você não queria adicionar o live-server globalmente na sua máquina, e sim somente no seu projeto, retire o -g na instalação do server. Caso você opte por esta opção, um procedimento deve ser feito para que ocorra a execução e atualização em tempo real da sua página. No seu arquivo package.json, altere o seguinte:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
Para:
"scripts": {
"dev": "live-server public"
},
E, por fim, no seu terminal, execute o comando:
npm run dev
Este comando iniciará o script “dev” que inserimos no nosso package.json e, com isso, iniciará o live-server! O live-server inicia por padrão na porta 8080, mas você pode alterá-lo incluindo no seu script do package.json:
"scripts": {
"dev": "live-server public --port=3000"
},
Com isso, você pode escolher a porta a ser utilizada. Para mais detalhes sobre o live-server, acesse a documentação em:
https://www.npmjs.com/package/live-server
Gostou deste artigo? Comente abaixo!