Configure um App React com um Proxy de Servidor Node.js

Tempo de leitura: 4 minutos

October 09, 2018

Escrito por

Twilion

Configure um App React com um Proxy de Servidor Node.js

"Create React App" é uma ótima ferramenta para começar a desenvolver uma aplicação React, porém parece um pouco mais complicado quando você está criando ou prototipando uma aplicação que precisa de um componente do lado do servidor, como por exemplo gerando tokens de acesso para Twilio Vídeo ou Chat. Esta foi a maneira mais fácil que eu achei para trabalhar com um servidor em um mesmo projeto para que você comece tudo em um só comando.

Ao final deste post, você vai ter aprendido como configurar um servidor Express que roda junto do app em React. Se você mal pode esperar, vamos começar com o código-fonte do projeto base no GitHub.

Como isso funciona

Existe uma opção que você pode configurar no package.json do Create React App que faz um proxy de chamadas que não sejam text/html através de um backend alternativo. Você pode usar essa funcionalidade para fazer o proxy de aplicações rodando em outro lugar, mas hoje, queremos rodar um servidor com o projeto em React.

Vamos juntar alguns comandos do npm para tornar possível rodar um único comando para executar o app em React e o servidor em Express ao mesmo tempo.

Primeiros passos

Para seguir o resto do post, você vai precisar do Node.js e npm instalados.

Comece criando um novo aplicativo React com Create React App. Você sabia que você não precisa instalar globalmente o pacote create-react-app? Ao invés disso, rode:

npm init react-app my-new-app
cd my-new-app

Por baixo dos panos, o npm init pega um nome inicializador, prefixa o create- e usa npx para instalar e rodar o comando.

Rode o novo aplicativo React para garantir que ele foi gerado corretamente.

npm start

Adicionando um Servidor

Vamos adicionar nossas dependências de servidor às devDependencies do nosso App React, já que elas não fazem parte do build do front-end.

Pare o servidor com Cmd/Ctrl + C e use npm para instalar as bibliotecas Express e Body Parser:

npm install express body-parser --save-dev

Adicione as seguintes dependências para nos ajudar a rodar o front-end e servidor juntos:

node-env-run – Módulo do Dominik para carregar variáveis de ambiente de um arquivo de configuração em desenvolvimento
nodemon – para automaticamente reiniciar o servidor quando algum arquivo for alterado
npm-run-all – para rodar múltiplos scripts npm ao mesmo tempo
express-pino-logger e pino-colada – para melhorar os logs do servidor

npm install node-env-run nodemon npm-run-all express-pino-logger pino-colada --save-dev

Crie um arquivo chamado .env no diretório do projeto para armazenar nossas variáveis de ambiente. Não precisamos adicionar nada à ele ainda, mas ele vai ser útil mais tarde para incluirmos credenciais que precisarmos para o servidor, como chaves de API.

Agora, no diretório do projeto, crie um novo diretório chamado de server e um arquivo server/index.js. Vamos criar um pequeno aplicativo para que possamos testar. Adicione o seguinte código em server/index.js:

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);

app.get('/api/greeting', (req, res) => {
  const name = req.query.name || 'World';
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ greeting: `Hello ${name}!` }));
});

app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
);

Abra o package.json e no objeto scripts, adicione um novo script para rodar o servidor usando node-env-run e nodemon:

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon | pino-colada"
  },

Teste que o servidor está executando corretamente rodando o script:

npm run server

Abra o endereço http://localhost:3001/api/greeting para testar. Você deve ver uma resposta em JSON com um “Hello World!”. Tente adicionar o parâmetro de querystring name à URL e veja o que acontece.

Rodando o servidor com o React App

Para rodar ambos o servidor e a aplicação em React ao mesmo tempo, precisamos adicionar mais algumas coisas ao package.json.

Primeiro, vamos configurar o proxy do nosso servidor. Adicione a chave proxy ao package.json. Já configuramos nosso servidor para rodar na porta 3001, então aponte o proxy para o localhost:3001.

"proxy": "http://localhost:3001"

Precisamos de um script para rodar o servidor e o front-end ao mesmo tempo. Vamos usar o npm-run-all para isso. Já que vamos rodar dois scripts ao mesmo tempo, queremos usar o modo em paralelo. npm-run-all nos disponibiliza este atalho com o comando run-p.

Adicione o seguinte bloco na seção de scripts do package.json:

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start"
  },

Rode npm run dev e tanto a aplicação em React quanto o servidor vão iniciar. No entanto, não podemos carregar localhost:3000/api/greeting no navegador porque o proxy do Create React App vai apenas responder com o HTML base.

Então vamos testar isso dentro de um componente em nosso app em React.

Usando o servidor proxy do React

Vamos adicionar um formulário ao componente de App que vai usar o componente /api/greeting para formar uma saudação e mostrá-la na página. Adicione o seguinte construtor e funções ao componente de App no src/App.js em substituição a função function App():

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      greeting: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    fetch(`/api/greeting?name=${encodeURIComponent(this.state.name)}`)
      .then(response => response.json())
      .then(state => this.setState(state));
  }

E adicione este form ao JSX na função render dentro da classe App:

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <form onSubmit={this.handleSubmit}>
            <label htmlFor="name">Enter your name: </label>
            <input
              id="name"
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
            <button type="submit">Submit</button>
          </form>
          <p>{this.state.greeting}</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

Abra o aplicativo React no navegador, preencha seu nome e envie. As boas-vindas devem mostrar que seu app React está agora falando com o servidor proxy.

Este é apenas o começo

Create React App faz um trabalho realmente muito bom para se começar um projeto em React, mas se você precisar de um servidor, pode ser um pouco complicado. Neste post, você viu como usar a opção de proxy e rodar um servidor Express usando ferramentas como npm-run-all.

Você pode verificar todo o código deste post neste repositório do GitHub e usá-lo como ponto de partida. Como bônus, se você quiser criar uma aplicação React com Twilio Vídeo ou Twilio Chat, o branch Twilio está configurado para retornar tokens de acesso para ambos. Apenas siga as instruções no README.

Usando este template, construir aplicações em React com um servidor em Express é fácil e rápido. Ele te dá uma boa plataforma para construir suas próprias ideias. Mal posso esperar para ver o que você vai construir!

Este post foi traduzido para português do original "Set up a React app with a Node.js server proxy"

Publicações relacionadas

Recursos relacionados

Twilio Docs

De APIs a SDKs e aplicativos de amostra

Documentação de referência de API, SDKs, bibliotecas auxiliares, guias de início rápido e tutoriais para sua linguagem e plataforma.

Centro de Recursos

Os mais recentes e-books, relatórios do setor e webinars

Aprenda com especialistas em engajamento do cliente para melhorar sua própria comunicação.

Ahoy

Centro da comunidade de desenvolvedores da Twilio

Melhores práticas, exemplos de código e inspiração para criar comunicações e experiências de engajamento digital.