Parte 3: Configuando a template com React-App-Rewired

Continuando nossa saga pela template reactJS perfeita, vamos configurar mais um item, que dessa vez, é essencial para possíveis modificações em nosso projeto e que, ultimamente, muitos desenvolvedores tem adotado sua utilização, tanto em projetos pequenos como grandes. Pronto para mais uma aventura?

O que queremos resolver?

Conhecendo o EJECT

Antes de entender como configuramos o react-app-rewired precisamos entender o que ele busca resolver e assim, chegamos no tão famoso eject.

O create-react-app é um pacote licenciado pelo npm (Node Package Manager) que configura e abstrai todas as dependências que precisamos para ter um projeto react completo em mãos. Para isso, ele configura varias coisas por debaixo dos panos, como:

• Jest: Utilizado para testes unitários em aplicações react.
• Babel: Utilizado para compilar e converter códigos javascript/typescript para versões anteriores.
• Webpack: Responsável por gerar um bundle de todos os arquivos de sua aplicação.

Todas essas configurações são implícitas e abstraídas dentro do projeto create-react-app. O verdadeiro problema que surge, é que muitos desenvolvedores precisam alterar configurações dentro do projeto, como, mudar uma variável do jest, alterar um caminho do babel, dentre outras coisas.

Sabendo disso, o create-react-app possui uma configuração chamada eject e nela, podemos remover as configurações abstraídas e enxergar os arquivos de configuração do webpack, babel e jest.

E porque não EJETAR?

Apesar de o create-react-app permitir a opção de ejetar, muitos desenvolvedores não curtem essa funcionalidade pois além de sujar o projeto com muitos arquivos, quebraria a abstração que o create-react-app proporciona. E é assim que surge o react-app-rewired, ele nos permite sobrescrever essas configurações, de forma que ela se torne acessível sem quebrar a estrutura abstraida.

Essa teoria é um puco complexa, então deixe embaixo sua dúvida :D

Configurando o react-app-rewired

Instalando o pacote

Primeiramente, vamos instalar o pacote com o comando abaixo.

yarn add react-app-rewired -D

Configurando os scripts

O funcionamento do react-app-rewired é bem simples. Para faze-lo funcionar em nosso projeto, basta acessarmos o nosso package.json e alterar os scripts (com exceção do EJECT), substituindo react-scripts por react-app-rewired, como mostrado abaixo:

//package.json
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

Configurando arquivo de overrides

Para concluir, precisamos de nosso arquivo de configuração. Assim como Eslint, Jest, Typescript, dentre outros pacotes, o react-app-rewired precisa de um arquivo de configuração para que funcione corretamente. Ele deve se chamar config-overrides.js e deve exportar as configurações no qual ele vai sobrescrever. Veja abaixo o exemplo:

// config-overrides.js
module.exports = {
  webpack: function (config, env) {
    return config;
  },
  jest: function (config) {
    return config;
  },
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      return config;
    };
  },
  paths: function (paths, env) {
    return paths;
  },
}

Dentro deste arquivo, podemos sobrescrever as configurações de vários módulos do webpack e pacotes integrados como o jest.

Estrutura final

Veja como está nossa estrutura final da template:

Aqui você pode realizar um curso do egghead de forma a realizar as mudanças de configuração conforme seu propósito.

É isso, obrigado mais uma vez pela leitura e mandem sugestões de outros itens que podem ser integrados a nossa template. :D