{"id":5724,"date":"2019-12-23T17:19:12","date_gmt":"2019-12-23T11:49:12","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=5724"},"modified":"2026-01-14T11:50:52","modified_gmt":"2026-01-14T06:20:52","slug":"bringing-flavours-to-react-application","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/","title":{"rendered":"Build and Deployment Configuration Flavors in React Native"},"content":{"rendered":"

At the point when you don’t have a server-side programming foundation, environment variables can appear to be a touch of enchantment. That absence of information smacks you in the face when you’re finished making todo applications on your localhost and attempt to make a production build for the application.<\/span><\/p>\n

The issue we’re illuminating:\u00a0<\/b><\/p>\n

Step by step instructions to provide API URL for your development mode and production environment or staging or QA environment.<\/span><\/p>\n

Environment Variable:<\/b><\/p>\n

When working with React, the environment variable is factors that are accessible through a global process.env Object. That worldwide Object is given by your condition through NodeJs. Also, in light of the fact that we don’t have NodeJs in the program, we’re going to require a webpack.<\/span><\/p>\n

Why You Need Environment Variables\u00a0<\/b><\/p>\n

You need condition factors for two things<\/b>:\u00a0<\/span><\/p>\n

    \n
  1. To modify factors dependent on your condition, for example, regardless of whether it is development, staging, or production, and so on.<\/li>\n
  2. To store important data. Things like API keys and passwords are profoundly delicate and you shouldn’t push them with code in open.\u00a0<\/span><\/li>\n<\/ol>\n

    We are going to Make React App underpins custom condition factors without the need to introduce some other bundles.\u00a0<\/span><\/p>\n

    There are two techniques for including condition factors<\/b>:\u00a0<\/b><\/p>\n

      \n
    1. Through the shell (temporary, last till the session lasts, and differs relying upon the OS type).\u00a0<\/span><\/li>\n
    2. Utilizing the .env file(This is the methodology we are going to utilize).<\/span><\/li>\n<\/ol>\n

      How to create a custom Environment Variable File in the project.<\/b><\/p>\n

        \n
      1. \n
          \n
        1. Go to the root folder of your project directory.<\/span><\/li>\n
        2. Now create \u201c.development.env\u201d file for development & \u201c.production.env\u201d file for production \u201c.statging.env\u201d for staging environment and the same goes for QA as required.<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
            \n
          • In environment file create variable as REACT_APP_API_POINT = \u201chttp:\/\/yourcustompath.com\u201d.<\/span> Here REACT_APP_ is mandatory as it will be recognized as a global variable by ReactJS environment. You can create as many as many variables as you want in a file. Starting with REACT_APP_<\/span><\/b><\/li>\n<\/ul>\n
            REACT_APP_API_ENDPOINT = \"http:\/\/13.127.87.149:8080\"\r\nREACT_APP_API_BASEURL = \"\/foxmatrixapp\/v1\/api\/\"\r\nCUSTOM_NODE_ENV = \"staging\"<\/pre>\n
              \n
            1. Now to use these environment variables in React install dotenv for support of environment file in ReactJs. and install env-cmd for custom environment files Now you are ready to use these variables in React.<\/span><\/li>\n
            2. In a jsx file to use these variable write process.env.REACT_APP_API_POINT. Here process.env. Is to tell react these are the global variable.<\/span><\/li>\n<\/ol>\n
              Now as you are ready to use these variables in react. We come to how to create a custom react environment for staging or QA.<\/span><\/p>\n
                \n
              1. Goto your package.json file where you will find Script written for start and build these are the command used for starting the development environment and create a build for production.<\/span><\/li>\n
              2. To Create your custom build add \u201cbuild:staging\u201d:\u201denv-cmd -f .env.stating npm run build\u201d, adding this command will start creating a build for staging environment as for now.<\/span><\/li>\n
              3. You could add as many different environments as you want.\u00a0<\/span><\/li>\n<\/ol>\n
                \"scripts\": {\r\n    \"start\": \"react-scripts start\",\r\n    \"build\": \"react-scripts build\",\r\n    \"build:staging\": \"env-cmd -f .env.staging npm run build\",\r\n    \"build:qa\": \"env-cmd -f .env.qa npm run build\",\r\n    \"test\": \"react-scripts test\",\r\n    \"eject\": \"react-scripts eject\"\r\n  },<\/pre>\n
                InnovationM is a globally renowned\u00a0Mobile app development company in India\u00a0that caters to a strong & secure Android app development, iOS app development, hybrid app development services. Our commitment & engagement towards our target gives us brighter in the world of technology and has led us to establish success stories consecutively which makes us the best\u00a0Android app development company in India.<\/p>\n
                Thanks for giving your valuable time. Keep reading and keep learning.<\/p>\n","protected":false},"excerpt":{"rendered":"
                At the point when you don’t have a server-side programming foundation, environment variables can appear to be a touch of enchantment. That absence of information smacks you in the face when you’re finished making todo applications on your localhost and attempt to make a production build for the application. The issue we’re illuminating:\u00a0 Step by […]<\/p>\n","protected":false},"author":1,"featured_media":5746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,257,258],"tags":[],"class_list":["post-5724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-web-app","category-react","category-web-technology"],"yoast_head":"\nBuild and Deployment Configuration Flavors in React Native - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build and Deployment Configuration Flavors in React Native - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"At the point when you don’t have a server-side programming foundation, environment variables can appear to be a touch of enchantment. That absence of information smacks you in the face when you’re finished making todo applications on your localhost and attempt to make a production build for the application. The issue we’re illuminating:\u00a0 Step by […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-23T11:49:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T06:20:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/bringing-flavours-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1141\" \/>\n\t<meta property=\"og:image:height\" content=\"634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Build and Deployment Configuration Flavors in React Native\",\"datePublished\":\"2019-12-23T11:49:12+00:00\",\"dateModified\":\"2026-01-14T06:20:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/\"},\"wordCount\":572,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/bringing-flavours-1.png\",\"articleSection\":[\"Mobile Web App\",\"React\",\"Web Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/\",\"name\":\"Build and Deployment Configuration Flavors in React Native - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/bringing-flavours-1.png\",\"datePublished\":\"2019-12-23T11:49:12+00:00\",\"dateModified\":\"2026-01-14T06:20:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/bringing-flavours-1.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/bringing-flavours-1.png\",\"width\":1141,\"height\":634},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bringing-flavours-to-react-application\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build and Deployment Configuration Flavors in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build and Deployment Configuration Flavors in React Native - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/","og_locale":"en_US","og_type":"article","og_title":"Build and Deployment Configuration Flavors in React Native - InnovationM - Blog","og_description":"At the point when you don’t have a server-side programming foundation, environment variables can appear to be a touch of enchantment. That absence of information smacks you in the face when you’re finished making todo applications on your localhost and attempt to make a production build for the application. The issue we’re illuminating:\u00a0 Step by […]","og_url":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/","og_site_name":"InnovationM - Blog","article_published_time":"2019-12-23T11:49:12+00:00","article_modified_time":"2026-01-14T06:20:52+00:00","og_image":[{"width":1141,"height":634,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/bringing-flavours-1.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Build and Deployment Configuration Flavors in React Native","datePublished":"2019-12-23T11:49:12+00:00","dateModified":"2026-01-14T06:20:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/"},"wordCount":572,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/bringing-flavours-1.png","articleSection":["Mobile Web App","React","Web Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/","url":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/","name":"Build and Deployment Configuration Flavors in React Native - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/bringing-flavours-1.png","datePublished":"2019-12-23T11:49:12+00:00","dateModified":"2026-01-14T06:20:52+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/bringing-flavours-1.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/bringing-flavours-1.png","width":1141,"height":634},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/bringing-flavours-to-react-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build and Deployment Configuration Flavors in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=5724"}],"version-history":[{"count":1,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5724\/revisions"}],"predecessor-version":[{"id":8924,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5724\/revisions\/8924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/5746"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=5724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=5724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=5724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}