DEV Community

Cover image for Parte 3: Configuando a template com React-App-Rewired
Ary Barros
Ary Barros

Posted on

3 1

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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;
  },
}
Enter fullscreen mode Exit fullscreen mode

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

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay