Configurando um servidor local para desenvolvimento frontend ūüíĺ

Quando entramos no mundo de desenvolvimento web eventualmente vamos precisar configurar um servidor local. √Č muito comum no in√≠cio do aprendizado, apenas abrir arquivos HTML no navegador. Mas eu, como desenvolvedor frontend, n√£o posso simplesmente continuar abrindo o arquivo HTML diretamente do meu diret√≥rio em uma p√°gina web? Sim! No entanto, existem limita√ß√Ķes que me impediria de criar um aplicativo ou uma p√°gina mais complexa.

Um servidor local me aproxima do ambiente de produção - ambiente o qual irá hospedar meu aplicativo (ou página) e será acessado pelos usuários finais - e também, habilita o browser a utilizar mais recursos do que se rodo o arquivo de um diretório comum.

Instalando o servidor

Existem in√ļmeros servidores e frameworks web gratuitos e de f√°cil instala√ß√£o. Dentre os mais famosos posso citar: Apache, nginx e Puma. Cada um com a sua especificidade.

Como o meu objetivo é rodar uma aplicação JavaScript, usando React, vou utilizar o Express. Ele pode ser utilizado em conjunto com o Node.js para servir páginas estáticas. E este é o nosso objetivo.

Sendo assim, vou precisar instalar algumas outras ferramentas.

Instalando Node.js

Existem algumas maneiras de instalar o Node.js. √Č poss√≠vel realizar a instala√ß√£o simplesmente baixando o Node.js atrav√©s do site oficial. A meu ver a maneira mais f√°cil √© utilizar o Node Version Manager - nvm.

Após a instalação do nvm abri o terminal e digitei o seguinte comando para instalar a versão mais recente do Node.js:

nvm install node

Depois:

node -v

E a vers√£o instalada foi v14.0.0.

Pronto, agora posso seguir com a instalação do Express.

Instalando o yarn

yarn é um gerenciador de pacotes que me permite utilizar e compartilhar códigos de outros desenvolvedores de uma maneira super fácil. Vou utilizá-lo, pois facilita a instalação do Express, bem como de outros pacotes necessários durante o desenvolvimento com React.

No site oficial existem diferentes maneiras de como instalar o yarn, baseado no sistema operacional. Como estou em um macOS instalei utilizando o Homebrew:

brew install yarn

yarn instalado! Agora posso enfim instalar o Express.

Instalando Express

Primeiro, através do terminal, vou criar uma nova pasta para a minha aplicação:

mkdir ~/react-app
cd ~/react-app

J√° dentro da pasta criada, vou iniciar o yarn

yarn init -y

Este comando cria o arquivo package.json, responsável por organizar os pacotes instalados através do yarn.

Agora, vou instalar o Express

yarn add express

Express foi instalado com sucesso!

Configurando e iniciando meu servidor

Com o Express instalado vou criar o arquivo respons√°vel por configurar e iniciar o servidor que ir√° servir o meu aplicativo React. Ainda dentro da pasta react-app irei criar o arquivo index.js:

// importa o framework Express
const express = require('express');
// cria uma inst√Ęncia do express
const app = express();

// Cria uma regra para requisi√ß√Ķes GET √† pagina inicial
// do aplicativo
app.get('/', (req, res) => {
  // Envia uma resposta ao navegador
  res.send('Do nosso servidor recém criado');
});

// Inicia o servidor Express na porta 3000
app.listen(3000, () => {
  console.log('servidor iniciado na porta 3000');
});

Adicionei comentários ao código acima para que fique compreensível cada linha. Mas, este simples trecho de código, é responsável por servir o nosso aplicativo React.

Vou agora adicionar uma entrada script no arquivo package.json para que possamos iniciar nosso servidor.

O meu package.json até o momento está assim:

{
  "name": "react-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "scripts": {
	  "start": "node index.js"
  }
}

Adicionando o trecho "start": "node index.js" me permite iniciar o servidor através do seguinte comando no terminal:

yarn start

E esta foi a resposta:

Ao abri meu navegador e acessar o endereço http://localhost:3000 vejo a seguinte mensagem:

Tudo como deveria ser! Nosso servidor est√° funcionando!! ūüéČ

Mas espera! Como vou rodar minha aplicação React!?

Como rodar minha aplicação React no servidor

Ao invés de simplesmente retornar uma mensagem do servidor quando acessar minha página no navegador, eu preciso retornar minha aplicação. Isso se dá através do arquivo index.html que criei anteriormente.

Primeiro, vou criar uma pasta chamada public/ que vai conter meu arquivo index.html e também, meus arquivos Javascript.

mkdir public

Ent√£o, vou copiar o index.html para a pasta public, que est√° dessa maneira:

<html>
  <head>
  </head>
  </body>
    <div id="react-container"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    
    <!-- Load our React component. -->
    <script src="Button.js"></script>
  </body>
</html>

Feito isso, preciso agora alterar o arquivo index.js responsável por rodar o nosso servidor para que ao invés de retornar uma simples mensagem, ele possa retornar o nosso arquivo index.html.

Adiciono o import da modulo path que é necessário para ler as pastas do sistema:

const path = require("path");

E depois, substituo a mensagem de retorno pelo caminho do nosso arquivo index.html:

res.sendFile(path.join(__dirname, "public", "index.html"));

Ficando assim:

// importa o framework Express
const express = require("express");
// cria uma inst√Ęncia do express
const app = express();

const path = require("path");

// Cria uma regra para requisi√ß√Ķes GET na pagina inicial
// do aplicativo
app.get("/", (req, res) => {
  // Carrega o arquivo index.html dentro da pasta public
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

// Inicia o servidor Express na porta 3000
app.listen(3000, () => {
  console.log("servidor iniciado na porta 3000");
});

E o resultado:

Aparentemente funcionou. Mas onde est√° o nosso bot√£o em React!? ūü§Ē Com um pouco de pesquisa descobri que da maneira como carregamos o nosso index.html, n√£o ser√° poss√≠vel carregar tamb√©m os arquivos Javascript ou CSS, pois Express n√£o consegue renderizar arquivos apenas com o m√©todo sendFile.

Ainda é preciso fazer uma pequena mudança. Vou substituir a linha com o sendFile por esta:

app.use(express.static("public"));

E ficou assim:

// importa o framework Express
const express = require("express");
// cria uma inst√Ęncia do express
const app = express();

const path = require("path");

// Cria uma regra para requisi√ß√Ķes GET √† pagina inicial
// do aplicativo
app.get("/", (req, res) => {
  // Carrega o arquivo index.html dentro da pasta public
  app.use(express.static("public"));
});

// Inicia o servidor Express na porta 3000
app.listen(3000, () => {
  console.log("servidor iniciado na porta 3000");
});

Pronto! Agora a minha p√°gina React est√° sendo apresentada diretamente de um servidor.

Próximos Passos

A seguir vou criar um aplicativo mais robusto, com componentes independentes, mas conectados atrav√©s de um outro componente de hierarquia maior. O fato de rodar a p√°gina de um servidor me d√° in√ļmeras op√ß√Ķes as quais eu n√£o tinha, por rodar diretamente do browser. Uma delas √© fazer importa√ß√Ķes diretamente dos arquivos Javascript.

Se gostou desse artigo, se inscreva e receba semanalmente este e outros conte√ļdos diretamente no seu email. Sem spam! ūüėé