DEV Community

Jean Dias
Jean Dias

Posted on

Aprendendo HTML + CSS + JavaScript utilizando um Web Server em Node.js

#html #css #javascript #webserver

Para começar instale o Node.js, estou usando para esse tutorial a versão 24.1.0, mas a versão LTS no momento é a 22.16.0.

https://nodejs.org/en

Crie um pasta com o nome do seu projeto de estudos, abra ela dentro do terminal e digite:

npm init
Enter fullscreen mode Exit fullscreen mode

Irá iniciar um prompt perguntando algumas informações, que em outro artigo posso explicar cada uma delas, mas por enquanto vamos apenas ir aceitando tudo até ele gerar um arquivo chamado package.json.

Image description

Abra seu projeto no Visual Studio Code, estando dentro da pasta no terminal basta digitar:

code .
Enter fullscreen mode Exit fullscreen mode

Image description

Agora vamos dar um aspecto de um projeto mais real, criar as seguintes pastas e arquivos para que a estrutura fique igual a imagem abaixo:

Image description

Vamos apenas colocar um conteúdo de exemplo em cada arquivo, no index.html você pode adicionar o código a seguir:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML executando em um Web Server</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    <script src="/src/main.js"></script>
</head>
<body>
    <h1>Esse site está executando em um Web Server</h1>
    <a href="/pages/pagina1">Link para a Página 1</a>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

No arquivo main.js dentro da pasta src, coloque o seguinte código:

alert("Conteúdo da página carregado com sucesso!");
Enter fullscreen mode Exit fullscreen mode

No arquivo styles.css dentro da pasta assets/css, coloque o seguinte código:

body {
    font-size: 20px;
    font-family: Arial, sans-serif;
    margin: 20px auto;
    max-width: 640px;
}
Enter fullscreen mode Exit fullscreen mode

E por fim no arquivo pagina1.html dentro da pasta pages, adicione o seguinte código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página 1 executando em um Web Server</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
    <h1>Essa é a página 1 rodando dentro de um Web Server</h1>
    <a href="/">Link para a Página Inicial</a>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Após todo o código adicionado, vamos adicionar a cereja do bolo, que será o Web Server. Para isso iremos instalar um pacote do Node.js, que nada mais é que um código que foi desenvolvido por terceiros e agora podemos utilizar dentro do nosso projeto.

Para isso basta voltar ao terminal dentro da pasta do seu projeto e digitar o seguinte código:

npm i http-server
Enter fullscreen mode Exit fullscreen mode

Repare que após o processo foi criado um novo arquivo chamado package-lock.json e uma pasta chamada node_modules, é dentro dela que está o código do pacote http-server que instalamos.

Agora para executar nossa projeto basta no terminal digitar:

npx http-server -o -p 8080
Enter fullscreen mode Exit fullscreen mode

Explicando o comando acima:

  • npx → ele serve para executar scritps do Node.js
  • http-server → é o pacote responsável por iniciar um Web Server
  • -o → esse parâmetro no comando é responsável por indicar qual o ponto de partida, no caso a própria pasta, assim ele irá procurar um arquivo com o nome de index.html
  • -p 8080 → e nesse parâmetro indicamos qual a porta iremos utilizar, o que permite que tenhamos outros Web Server, rodando na mesma maquina ao mesmo tempo, cada um em uma porta diferente

Após executar a saída no terminal será assim:

Image description

Para encerrar basta pressionar CTRL+C no terminal que o Web Server será desligado. E para visualizar seu site basta entrar no navegador de sua preferência e digitar o endereço informado na saída do comando, no meu caso: http://127.0.0.1:8080

Ao acessar você recebera a página da seguinte forma:

Image description

Repare que no endereço você não verá mais o caminho absoluto do arquivo index.html em seu computador, e sim um endereço similar aos sites na Internet, e dessa forma você vai conseguir simular o comportamento de seu projeto dentro da Internet quando ele estiver publicado em um Servidor ou plataforma de hospedagem.

Note também que no terminal enquanto o Web Server estiver executando, você receberá os logs de cada requisição que for feita no navegador, por exemplo ao clicar no Link para a Página 1:

Image description

Espero que tenha ajudado os estudantes e aspirantes a desenvolvimento Web, com esse tutorial. Bons estudos!!!

Top comments (0)