Topics In Demand
Notification
New

No notification found.

Managing multiple environment configurations in React App
Managing multiple environment configurations in React App

7

0

Building a user interface is one of the most important aspects of any product development. It can make or break the customer base irrespective of how strong the application functionality is. React is a Javascript library maintained by Facebook, individual developers, and companies. And even though it is not a complete framework like Angular but a library, it is popular because of the declarative, efficient, and flexible approach to building user interfaces.

Building an application in React is fairly simple. While developing a web application, most of developers use Create React App CLI. The React App is a stable single-page app. This means that once you start creating a build, it gets created for a specific environment and continues to exist in the same environment. For a React web application, you will have two default environments, viz., development and production.

Given below is the script from package.json that you can use for a web application in React App:

For a web application, you can easily access the available scripts for the local host and also create the production build. In the above case, when you run script commands like “npm start” it uses .env or .env.development, and “npm build” uses .env.production at the root level. If your application has two environments, viz., development and production, then I would suggest using the default scripts. Just imagine if you have multiple environments like staging and QA (quality assurance) for the configuration, then what would you do? As react-scripts only support development and production, the solution is to create the .env.staging, .env.poc, or .env.qa, but it won’t work in a similar way to .env.development or .env.production. It is important to do a few changes in the configuration, in package.json and in the commands for running the application.

Now, let’s see how to manage the multiple environments in the application with the following prerequisites:

  • Web Application should be created using the create react app CLI.
  • Install env-cmd npm: Either use the command npm install env-cmd or npm install -g env-cmd.

Different scenarios in React App have been listed below. Let’s execute them one by one:

  • To create environment files with the required configuration:
    First, create the required environment files for the application. Suppose your project has four environments like development, production, staging, and QA. Then you need to create 4 environment files as mentioned below:
    • env.development
    • env.production
    • env.staging
    • env.qa
  • To add the configuration(contents) to the environment files:
    Suppose you have a different API URL for each environment. You can add the configuration in the particular .env file. Configuration here means any environment variable that can be used globally within the application. Below are some examples of various environments with the variables:
    • .env.development



      .env.production


      . Update the scripts in package.json



       
    • In the above code, the highlighted part in blue color is used to build the environment-specific build. To build an environment-specific build, use the env-cmd along with the environment file and run-script.

    • Running the application in different environments:
      To run the application in multiple environments, choose one of the environment-specific commands from the following:


      Access the variables in-app
      For accessing the variables in the .env file, you should use the process. env, which is a global variable. This is injected by the Node during runtime for the application’s use. It represents the state of the variables in the application’s environment at the time of its start.


      Thus, it can be inferred that the entire process is not as complicated as it looks and can be expanded to multiple environments. In this blog, I focussed on setting up your React app for the environments that are beyond the default environments of development and production. Comment below on how useful it turned out for your React projects, till then, Happy Coding!





 














 


That the contents of third-party articles/blogs published here on the website, and the interpretation of all information in the article/blogs such as data, maps, numbers, opinions etc. displayed in the article/blogs and views or the opinions expressed within the content are solely of the author's; and do not reflect the opinions and beliefs of NASSCOM or its affiliates in any manner. NASSCOM does not take any liability w.r.t. content in any manner and will not be liable in any manner whatsoever for any kind of liability arising out of any act, error or omission. The contents of third-party article/blogs published, are provided solely as convenience; and the presence of these articles/blogs should not, under any circumstances, be considered as an endorsement of the contents by NASSCOM in any manner; and if you chose to access these articles/blogs , you do so at your own risk.


© Copyright nasscom. All Rights Reserved.