React-app-rewired complete guide

Introduction

Create React App (CRA) is a popular tool for setting up React projects quickly. It gives you a ready-to-go environment so you can start building your app right away without worrying about complicated setups. But as your project grows, you might want to change some of the default settings, like adjusting Webpack or Babel configurations. The problem is, CRA doesn’t let you do that easily.

To make big changes in CRA, the only official option is to eject your project. But ejecting makes your setup more complex and harder to maintain in the long run. Plus, you lose the easy updates that come with CRA.

That’s where React-App-Rewired comes in. With this tool, you can customize CRA’s settings without ejecting. It gives you the freedom to tweak things like Webpack and Babel while still keeping the project easy to update.

What is React App Rewired?

React App Rewired is a tool that allows you to customize the configuration of Create React App (CRA) without the need to eject the project. Normally, if you want to change Webpack, Babel, or any other configuration in CRA, you have to eject, which makes the setup more complicated. With react-app-rewired, you don’t need to go through that process.

Purpose and Functionality for react-app-rewired

The main goal of react-app-rewired is to give developers the ability to modify CRA’s default settings while keeping the simplicity of the project. Instead of ejecting, you create a special configuration file that handles any changes you want to make. This way, your project remains easy to update and maintain, while still allowing you to apply the custom configurations you need.

Comparison with Ejecting in CRA

When you use react-app-rewired, you avoid the complexity that comes with ejecting. Ejecting gives you full access to the configuration, but it also comes with more files and potential headaches. Once you eject, you’re responsible for managing all those settings yourself, which can make future updates harder.

React-app-rewired simplifies this process. It lets you modify just the parts you need, keeping the rest of CRA intact, making it a preferred choice for developers who want to tweak their setup without fully taking over the configuration.

Key Features of React App Rewired

React App Rewired offers several key features that make it a popular choice for developers who want to customize Create React App (CRA) without ejecting.

Customization Without Ejecting

One of the biggest advantages of using react-app-rewired is the ability to customize CRA’s configuration without ejecting. Ejecting can make your project harder to manage, but react-app-rewired avoids this by giving you control over Webpack, Babel, and other settings in a much simpler way. You get the flexibility of customizing your project without all the extra complexity.

Easy Configuration with config-overrides.js

When you use react-app-rewired, the custom configurations are placed inside a file called config-overrides.js. This file lets you easily override the default settings of CRA. It’s as simple as adding the configurations you want, and react-app-rewired takes care of applying them to your project without needing to mess with CRA’s internal files.

Flexible Webpack, Babel, and Jest Modifications

Whether you want to add a new Webpack loader, change Babel presets, or tweak Jest configurations for testing, react-app-rewired gives you the flexibility to do it. With the custom config-overrides.js file, you can:

• Add new Webpack plugins or loaders.
• Modify Babel settings to fit your project’s needs.
• Customize Jest configurations for better testing.

Setting Up React-App-Rewired step by step

Setting up react-app-rewired is straightforward. This section will guide you step by step through the process of getting it installed and ready for use in your Create React App project.

Step 1 : Install React App Rewired

First, you’ll need to install react-app-rewired. Run the following command in your project’s root directory:

npm install react-app-rewired --save-dev

This will add react-app-rewired to your development dependencies, allowing you to start customizing your CRA project.

Step 2 : Different Versions for CRA 2.x and CRA 1.x

Depending on which version of CRA you’re using, you might need different versions of react-app-rewired:

• For CRA 2.x and above: Use the latest version of react-app-rewired.
• For CRA 1.x: You will need an older version. Run:

npm install react-app-rewired@1.x --save-dev

Make sure to check which version of CRA your project is running before installing the appropriate version of react-app-rewired.

Step 3: Create config-overrides.js

Next, create a file named config-overrides.js in the root directory of your project. This is where you will write any custom configurations for Webpack, Babel, or other tools.

For example, your config-overrides.js file might look like this:

module.exports = function override(config, env) {
  // Custom Webpack configuration
  return config;
};

This file will automatically override the default CRA settings with any custom configurations you add.

Step 4: Modify package.json Scripts

Finally, you’ll need to adjust your project’s scripts in package.json to use react-app-rewired instead of the default CRA scripts.

Replace the react-scripts calls with react-app-rewired like this:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

This change allows react-app-rewired to handle the CRA commands, applying your custom configurations automatically when you run your project.

Common Customizations with React-App-Rewired

One of the key advantages of React App Rewired is the ability to customize your app without ejecting. You can override the default configurations of Webpack, Babel, and other tools. Below are some common customizations you can easily implement.

Adding Webpack Plugins

One frequent use case is adding plugins to Webpack, such as webpack-bundle-analyzer to visualize the size of your Webpack output files. Here’s how you can add it using config-overrides.js:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins.push(new BundleAnalyzerPlugin());
  }
  return config;
};

This code adds the BundleAnalyzerPlugin to your Webpack configuration when running the production build.

Customizing Babel

Sometimes, you might want to add Babel plugins or change Babel presets to enable additional features in your JavaScript code. Here’s how you can add a Babel plugin, such as babel-plugin-styled-components for better support of styled-components:

module.exports = function override(config, env) {
  const babelLoader = config.module.rules.find(rule => rule.oneOf).oneOf.find(
    rule => rule.loader && rule.loader.includes('babel-loader')
  );
  
  babelLoader.options.plugins = [
    ...babelLoader.options.plugins,
    'babel-plugin-styled-components'
  ];
  
  return config;
};

This code adds the styled-components plugin to Babel’s configuration.

Custom Loaders

If you need to add specific Webpack loaders for handling additional file types (like Markdown or SVGs as React components), React App Rewired allows you to configure them. For instance, here’s how you can add an SVG loader to handle SVG files:

module.exports = function override(config, env) {
  const svgRule = {
    test: /\.svg$/,
    use: ['@svgr/webpack'],
  };
  
  config.module.rules.push(svgRule);
  
  return config;
};

This setup allows you to import and use SVG files directly as React components.

Code Splitting and Optimization

You can also enable advanced optimizations like code splitting to improve the performance of your app:

module.exports = function override(config, env) {
  config.optimization = {
    splitChunks: {
      chunks: 'all',
    },
  };
  
  return config;
};

This modification will ensure that shared code is bundled separately to reduce the size of individual chunks.

Example Use Cases

• CSS Modules: Add custom configuration for CSS Modules without ejecting.
• Polyfills: Easily add polyfills for older browsers.
• Jest Configurations: Modify Jest settings for more specific test environments.

These examples show how powerful and flexible React-App-Rewired can be. By making small tweaks in the config-overrides.js file, you can dramatically extend the capabilities of your CRA project.

Comparison with Other like React-app-rewired

React App Rewired isn’t the only tool available to modify Create React App configurations without ejecting. Two other popular tools are Customize CRA and Craco. Let’s compare them based on key factors to help you understand how React App Rewired stacks up.

Competitor Overview

• React App Rewired: Focuses on allowing developers to modify Webpack, Babel, and Jest configurations without ejecting.
• Customize CRA: A plugin for React App Rewired that provides additional helper functions for common customizations, making the process even more straightforward.
• Craco (Create React App Configuration Override): Offers an alternative method for overriding configurations with more built-in support for plugins and simplified configuration.

React App Rewired vs. Customize CRA vs. Craco

Detailed Comparison

• Ease of Use: React App Rewired is quite flexible, but requires more manual effort to set up custom configurations. Customize CRA simplifies this by providing helper functions for frequent use cases, while Craco is designed with built-in plugin support to make common modifications easier.
• Flexibility: All three tools are flexible and allow you to modify CRA’s configuration without ejecting, but Craco offers a slightly more streamlined experience for adding plugins through a config file (craco.config.js), while React App Rewired and Customize CRA require manual configuration.
• Community Support: React App Rewired has a large user base and strong community support. Craco also enjoys a growing community. Customize CRA is less popular but is still widely used in combination with React App Rewired.
• Popularity: React App Rewired and Craco are more popular than Customize CRA, which is primarily used in conjunction with React App Rewired to simplify certain tasks.

Which Should You Choose?

If you want maximum flexibility and don’t mind diving into Webpack and Babel configurations, React App Rewired is a great choice. If you prefer an easier solution with more predefined functions, Customize CRA might suit your needs better. Craco is ideal if you want a more plugin-based approach for common configuration changes.

Benefits and Considerations

Using React App Rewired offers several advantages, especially when compared to ejecting from Create React App (CRA) or using alternative methods. However, like any tool, it has its limitations. Below are the benefits and some key considerations to keep in mind when deciding whether to use it for your project.

Benefits of React App Rewired

1. Customization Without Ejecting: The most significant advantage is that you can customize the CRA’s configuration without ejecting. This allows you to retain the benefits of CRA’s easy setup while still gaining control over advanced configurations.
2. Simplicity in Overriding Configurations: With the config-overrides.js file, you can easily adjust Webpack, Babel, and Jest configurations as per your project requirements. This is ideal for projects that need slight adjustments, such as adding loaders or plugins, without the complexity of a full configuration overhaul.
3. No Need to Maintain Configurations: When you eject from CRA, you are responsible for maintaining all configurations yourself, which can be cumbersome as CRA evolves. React App Rewired allows you to bypass this burden while still applying necessary modifications.
4. Community and Plugin Support: React App Rewired has an active community and several plugins (like Customize CRA) that can help simplify common tasks, making the customization process easier.

Considerations

1. Limited Flexibility for Advanced Customizations: While React App Rewired works well for most customizations, there are some cases where ejecting might still be the better option. For instance, if you need to make deep changes to the Webpack configuration or need more control over other CRA internals, React App Rewired might not be enough.
2. Compatibility with CRA Updates: Since CRA is actively maintained and updated, sometimes there might be changes in the CRA internals that React App Rewired hasn’t accounted for yet. This could lead to temporary compatibility issues that require manual intervention or updates from React App Rewired’s side.
3. Learning Curve for New Users: While it provides flexibility, new users might find the manual overrides in config-overrides.js to have a bit of a learning curve, especially when making more complex adjustments.
4. Third-Party Dependency: Since React App Rewired is a community-maintained tool, you’re depending on a third-party project to remain active and up-to-date with the latest CRA changes. Though it’s widely used and well-supported, this is still a consideration.

When to Consider Ejecting

• Complex Webpack Changes: If your project needs significant changes to the Webpack configuration, like multiple entry points or more control over optimization settings, ejecting might be necessary.
• Long-Term Maintenance: If you foresee maintaining the project for a long period and needing to make frequent updates to the build configuration, ejecting gives you full control and can be more manageable in the long term.

Conclusion

React App Rewired is an excellent tool for those who want more control over their React projects without ejecting from Create React App (CRA). It gives developers flexibility to modify Webpack, Babel, and Jest configurations with minimal setup. This makes it ideal for customizations that are beyond what CRA offers by default.

With the use of config-overrides.js, you can tailor your project without the complexity and maintenance burden of ejecting. Additionally, React App Rewired works seamlessly with plugins like Customize CRA, further simplifying the customization process for common configurations.

However, for more complex or long-term projects, ejecting may still be necessary. It’s essential to weigh the benefits of React App Rewired against the potential limitations, such as compatibility with future CRA updates or the need for deep customization.

Conclusion
React App Rewired is an excellent tool for those who want more control over their React projects without ejecting from Create React App (CRA). It gives developers flexibility to modify Webpack, Babel, and Jest configurations with minimal setup. This makes it ideal for customizations that are beyond what CRA offers by default.

With the use of config-overrides.js, you can tailor your project without the complexity and maintenance burden of ejecting. Additionally, React App Rewired works seamlessly with plugins like Customize CRA, further simplifying the customization process for common configurations.

However, for more complex or long-term projects, ejecting may still be necessary. It’s essential to weigh the benefits of React App Rewired against the potential limitations, such as compatibility with future CRA updates or the need for deep customization.

By using React App Rewired, you can avoid the headaches of maintaining full project configurations while still enjoying the simplicity and flexibility that CRA provides.

Conclusion
React App Rewired is an excellent tool for those who want more control over their React projects without ejecting from Create React App (CRA). It gives developers flexibility to modify Webpack, Babel, and Jest configurations with minimal setup. This makes it ideal for customizations that are beyond what CRA offers by default.

With the use of config-overrides.js, you can tailor your project without the complexity and maintenance burden of ejecting. Additionally, React App Rewired works seamlessly with plugins like Customize CRA, further simplifying the customization process for common configurations.

However, for more complex or long-term projects, ejecting may still be necessary. It’s essential to weigh the benefits of React App Rewired against the potential limitations, such as compatibility with future CRA updates or the need for deep customization.

By using React App Rewired, you can avoid the headaches of maintaining full project configurations while still enjoying the simplicity and flexibility that CRA provides.

Additional Resources

• React App Rewired GitHub: Official repository with installation steps and community discussions.
• Customize CRA Documentation: If you’re looking for helper functions to simplify common modifications.
• Craco Documentation: An alternative to React App Rewired for those seeking a plugin-based approach.
• Complete React Guide : If you are beginner and want too explore the react

FAQs