Home React How to make Custom Configuration Change in React App

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 fellow if you have not installed any additional packages yet.

ReactJS App Folder Structure
ReactJS App Folder Structure

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:

Eject Command Confirmation
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:

v
Ejecting React App

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

Ejecting Completed
Ejecting Completed

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

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

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.

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.
avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

Tutorials You May Like!

- Advertisement -