Parte 3: Configuando a template com React-App-Rewired
Tags: react, javascript, typescript, frontend
Published: 2020-08-22 12:19:09

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.

```bash
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:

```json
//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:

```js
// 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vkotrvrmu4ovswpfs8p8.png)

[Aqui](https://egghead.io/lessons/react-customize-create-react-app-cra-without-ejecting-using-react-app-rewired) 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