25 Sep 2020

Criando Servidor-Web com Express

# Introdução

Para iniciar a criação do servidor web com express primeiramente precisaremos verificar se em nossa máquina possuimos nodejs instalado.

Para fazer essa verificação basta acessar o terminal integrado da sua máquina e digitar (“node –version”).

cmd

Caso não tenha instalado o nodejs acesse https://nodejs.org/en/download/ e faça a instalação. Feito isso agora partiremos para criação do ambiente de desenvolvimento.

# Configurando Ambiente de Desenvolvimento

A IDE de desenvolvimento que irei utilizar hoje será o Visual Studio code que você pode encontrar aqui https://code.visualstudio.com/. Após fazer o download é só fazer a instalação que é muito simples e não nos aprofundaremos nesse artigo, mais caso queira saber mais acesse https://code.visualstudio.com/docs.

vscode

# Criando o projeto

. Primeiramente crie uma pasta em qualquer local(“preferencialmente desktop”), e renomei-e a pasta com server-express. . Abra o Visual-Studio-Code e acesse a pasta server-express.

openfolder

. Agora precisaremos criar um arquivo Package.json(“arquivo que guarda todas as referências de dependências e scripts”) para isso acesse o terminal integrado do vscode que fica na aba (“Terminal > New terminal”)

. Com o terminal aberto crie um arquivo package.json com o comando (“npm init -y”), você logo verá que foi criado um novo arquivo na raiz da nossa aplicação.

npm init

. Agora iremos instalar express para criar o nosso servidor com javascript, basta digitar no terminal do vscode (“npm install express”) e aguarda o download e instalação da dependência, logo verá que foi criado uma nova pasta chamada nodemodules que guardará todos os dados das nossas dependências.

nodemodules

. Ao final da instalação abra o arquivo package.json e verifique se express está inserido em dependencies, caso esteja poderá partir para o próximo passo.

package

. crie um arquivo na raiz da aplicação chamado de index.js (“new file > index.js”), e agora estamos pronto para começar a codar….

# Código

. Acessando index.js precisaremos importar o express e instância-lo em uma variavel chamada de app

const express = require('express')
const app = express()

. cole o código abaixo após a instanciar o app com express().

app.use(express.static('.'))
app.listen(8080,()=>{
    console.log('Server express port 8080')
})

. Agora com terminal aberto digite (“node index.js”) e terá como resultado (“Server express port 8080”).

serveron

#obaaaa servidor rodando certinho.

# Servindo página html com express

. Na raiz da aplicação crie um arquivo chamado index.html e crie uma estrutura html como a de baixo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>Minha primeira página com servida pelo express</h1>    
</body>
</html>

# Resultado

Acesse em seu navegador (“localhost:8080”) e verá o resultado abaixo.

success

# Final

Embora o exemplo acima seja simples, com algumas mudanças já é capaz de servir uma grande aplicação, fique á vontade para alterar o index.html e ver as alterações em (“localhost:8080”), lembre-se sempre que quando alterar o index.html é preciso parar o servidor (“ctrl+c”) no terminal e iniciá-lo novamente com node index.js.

Onion Hack