Jonas Castro

Express.js: Primeira aplicação web com Express.js

Salve galera, como vocês estão Hojee!?

Bom, o artigo de hoje vai ser um pouco parecido com o Primeira aplicação web com Node.js do zero. Criaremos um servidor web com node.js, porém com uma biblioteca externa chamada Express.js.

Quem é Express.js

Esse carinha é uma framework para node.js muito utilizado com alguns métodos que permitem a criação de uma servidor web. A documentação define ele como framework web rápido, flexível e minimalista para Node.js.



Algumas vantagens do express.js são:

  • Iniciar um serviço com poucas linhas do código
  • Leve e performático
  • Além de ter várias bibliotecas que podem ser utilizadas em conjunto

Requisitos e ferramentas

Para criar esse projeto precisamos de algumas ferramentas:

  • Node.js: Caso ainda não tenha instalado em sua máquina acesse o artigo Hello World: Nodejs onde eu apresento o nodejs e mostro como instalar ele na máquina linux;
  • npm: Instalado junto com o Node.js no artigo Hello World: Nodejs;
  • Express.js: utilizado para criação do servidor;
  • Além disso estou utilizando o editor de texto Visual Studio Code (Opcional);

Criando o servidor web com express

Sem mais delongas, vamos fazer o que gostamos de fazer: Codaar!!



1. O primeiro passo é criar uma pasta para o nosso projeto, no meu caso vou chamar de express_web_service. Dentro da pasta execute o comando abaixo para iniciar o projeto node:

npm init -y



O comando npm init cria um arquivo package.json que armazena as configurações, informações e dependências do seu projeto node.js. A tag -y evita que algumas perguntas sejam feitas, como exemplo o nome do autor, descrição do projeto versão e por aí vai.

Atenção: para mais informações sobre arquivo package.json acesse link da documentação



2. Execute o comando abaixo para instalar o express no projeto

  npm install express



3. Com o express instalar vamos criar um arquivo chamado service.js e dentro dele vamos adicionar o código para que nosso servidor express fique disponível.

  • importando o express.
  // importar o express
  const express = require('express')
  • Agora vamos criar o servidor com o express
  // importar o express
  const express = require('express')

  // criação do servidor
  const server = express();
  • Com o servidor criado e registrado na variável server precisamos que ele escute as requisições e retorne alguma informação.
  // importar o express
  const express = require('express')

  // criação do servidor
  const server = express();

  // Escutar solicitações GET
  app.get('/', (req, res) => {
    res.send('Hello World!')
  })
  • Por fim, vamos iniciar o servidor e definir a porta em que ele vai rodar na sua máquina
  // importar o express
  const express = require('express')

  // criação do servidor
  const server = express();

  // Escutar solicitações GET
  server.get('/', (req, res) => {
    res.send('Hello World!')
  })

  // porta que o servidor vai rodar
  const port = 3003

  // Iniciando o servidor
  server.listen(port, () => {
    console.log(`Servidor com express iniciado na porta ${port}!`)
  })



Agora basta executar node server.js no seu terminal e você vai receber o seguinte resultado:

drawing Resultado da execução

Agora acesse seu navegador com o link: http://localhost:3003/

drawing

É isso ai, mais uma forma de criar servidor com node.js! Eu gostei desse artigo e espero que vocês tenham gostado também.

Um pouco mais de express.js

Vamos criar mais algumas rotas para ver o que acontece

  // importar o express
  const express = require('express')

  // criação do servidor
  const server = express();

  // Escutar solicitações GET
  server.get('/', (req, res) => {
    res.send('Hello World!')
  })

  server.get('/user', (req, res) => {
    res.send('Essa é a rota GET de usuários')
  })

  server.get('/testes', (req, res) => {
    res.send('Essa é a rota GET de testes')
  })

  // porta que o servidor vai rodar
  const port = 3003

  // Iniciando o servidor
  server.listen(port, () => {
    console.log(`Servidor com express iniciado na porta ${port}!`)
  })

Observe que criamos mais duas rotas novas: /user e /testes. Com isso, pare o servidor e execute novamente e acesse as rotas e veja que o express.js retorna a mensagem conforme o nome da rota:



Para finalizar vamos fazer mais um teste. Dentro do projeto crie uma pasta public e dentro da pasta crie um arquivo hello.html e adicione o código:

  <html lang="en">
    <body>
      <h1>Utilizando arquivo hello.html</h1>
      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>
    </body>
  </html>

Agora altere o código do arquivo server.js para o código abaixo e execute o serviço node server.js:

  // importar o express
  const express = require('express')

  // criação do servidor
  const server = express();

  // Entregando arquivos estáticos
  server.use(express.static('public'));

  // porta que o servidor vai rodar
  const port = 3003

  // Iniciando o servidor
  server.listen(port, () => {
    console.log(`Servidor com express iniciado na porta ${port}!`)
  })

Acesse o link: http://localhost:3003/hello.html e veja só um arquivo .html sendo renderizado utilizando express.



Por hoje é só, até a próxima jovens...

Links