Categories: ReactReactJS

How to make Custom Configuration Change in React App

Introduction

In Ultimate way create your First React Application Tutorial we created fully working react application with Zero configuration, but sometime if you are advanced developer you may want to customise the default configuration that comes with this project.

For example, let’s say you want to customise the web-pack configuration that when you use eject command

So in this tutorial I am going to give you step by step details on you can work with custom configuration in React Application.

If you don’t have React application created with create-react-app package then you should read Ultimate way create your First React Application tutorial first before continuing with this application.

I assume that you have application ready and open in your favourite code editor.

Default Configuration:

Open up package.json file from the react app and into your editor, it should look like as bellow screen if you have not installed any additional packages yet.

ReactJS App Folder Structure
{
  "name": "first-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

If you look at the above package.json file now, here under script section we have four script or command written, we already used the start command to start our development web server.

After start command we also have build command, for building the application for production so will get an optimise package we also test command for running Unit Test in this particular project.

And finally we have eject command we can run this command to eject from create-react-app and customise all the tools and configuration that come with this project.

Next if you look at the dependencies section section you can see that we have only three dependencies.

So we have dependency called react which is the main react library we also have dependency to react-dom which is the library for working the DOM In my last tutorial on Hello World Application we used the render method to render the react element inside the browser DOM

We also have react-scripts which is another library that takes care of starting, building, testing and ejecting a create react app project

So the interesting thing here is that under dependencies you don’t see any references to tools like webpack , Babel and so on, you see this is the beauty of using create-react-app package to create react project.

Ejecting from Create react App

If you eject from create react app you will see all the dependencies will appear under the decencies section.

Let’s start ejecting

Now go back to the terminal and navigate to your react project folder and execute following command:

npm run eject
Eject Command Confirmation

Note the warning on the thermal it says Are you sure you want to eject? This action is permanent. basically ejecting is one way street you can not revert back so don’t execute this command on working react project unless your an advance developer and you know what your doing.

So type in y to say yes for ejecting then you will following process:

Ejecting React App

once ejecting process is complete, it will show following message:

Ejecting Completed

Now after ejecting back to our project and look at the package.json file:

{
  "name": "first-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.4.3",
    "@svgr/webpack": "4.1.0",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.5",
    "babel-plugin-named-asset-import": "^0.3.2",
    "babel-preset-react-app": "^9.0.0",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^5.16.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-loader": "2.1.2",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "^1.5.0",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.7.1",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.7.1",
    "jest-watch-typeahead": "0.3.0",
    "mini-css-extract-plugin": "0.5.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.2.1",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.6.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.1",
    "react-dev-utils": "^9.0.1",
    "react-dom": "^16.8.6",
    "resolve": "1.10.0",
    "sass-loader": "7.1.0",
    "semver": "6.0.0",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "1.2.3",
    "ts-pnp": "1.1.2",
    "url-loader": "1.1.2",
    "webpack": "4.29.6",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.2.0"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

You will see under dependencies section every single dependency that used in this project.

Config Folder

Now that after executing eject command, you see that there is additional tow folder created config and scripts, as showing below:

React App Folder Structure After Ejecting

So if you want to make any configuration changes related to webpack for your development environment, you can open webpackDevServer.config.js file from config folder to make any necessary tweaks you want and similarly you can use webpack.config.js file production environment changes.

Scripts Folder:

So the script is basically has necessary files to handle starting, building and testing this application command.

if you see the scripts section of package.json file you notice that react-scripts library got replaced with files from this scripts folder:

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

Important Note:

Overall important note understand here so before ejecting the project from create-react-app everything is getting handle behind the scene from create-react-app library so use eject only if you know and completely necessary for your project otherwise stick with the default configuration.

Yogesh Koli

Software engineer & Blogger live in India, has 8+ years of experience working with the Front-end and Back-end Web Application Development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example…

1 year ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify…

1 year ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter…

1 year ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the…

1 year ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them,…

1 year ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super…

1 year ago