What is the use of CRACO / craco.config.js file in React | Installing CRACO | Using craco.config.js file in React.

What is CRACO?

CRACO (Create React App Configuration Override) is used to override the configuration files of React , without ejecting react scripts config files.

We will understand this with elaborate example but first we have to install CRACO after installing React.

We need to install React first & open it in code editor , Here We are using React & TypeScript so We have to install it , so open your terminal and give command –

npx create-react-app demo-craco --template typescript

Now Open this project ‘demo-craco’ in your Code Editor.

Installing CRACO –

To install craco , open your terminal & give command –

npm i @craco/craco -SE --force

It will automatically setup some changes in your ‘package.json’ file .

package.json file in directory.

Just you have to Open ‘package.json file’ , scroll down & change –

TO

Making & Using ‘craco.config.js’ file/ config file override.

Just go to your root directory & create one new file ‘craco.config.js’ like –

craco.config.js file in directory

We have created ‘craco.config.js’ file successfully , now we will use it to understand , how it works , how it override config files.

Note – Normally when you all put up a command ‘npm start’ , than it run the server on “localhost:8000” , We will change it to “localhost:8001” using ‘craco.config.js’ file.

Put below code in ‘craco.config.js’ file & save it to change the port to 8001 –

module.exports = {
    mode: 'development',
    // Adding Server
    devServer: {
      port: 8001,
    },
  };
  

To run React App give command –

npm start

It will open on port 8001 like –

Hope you Understand it , Thank You! for reading .