{"id":17341147,"url":"https://github.com/tanhauhau/react-web-config","last_synced_at":"2025-04-14T19:10:18.685Z","repository":{"id":19847215,"uuid":"88077974","full_name":"tanhauhau/react-web-config","owner":"tanhauhau","description":"react-native-config for Web","archived":false,"fork":false,"pushed_at":"2021-12-24T12:35:49.000Z","size":405,"stargazers_count":21,"open_issues_count":3,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-01T13:30:57.660Z","etag":null,"topics":["react","react-native","react-native-config","react-native-web","web"],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tanhauhau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-12T17:20:22.000Z","updated_at":"2023-08-24T09:45:01.000Z","dependencies_parsed_at":"2022-07-23T13:47:59.576Z","dependency_job_id":null,"html_url":"https://github.com/tanhauhau/react-web-config","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanhauhau%2Freact-web-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanhauhau%2Freact-web-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanhauhau%2Freact-web-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanhauhau%2Freact-web-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tanhauhau","download_url":"https://codeload.github.com/tanhauhau/react-web-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248943456,"owners_count":21186958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-native","react-native-config","react-native-web","web"],"created_at":"2024-10-15T15:47:57.564Z","updated_at":"2025-04-14T19:10:18.667Z","avatar_url":"https://github.com/tanhauhau.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-web-config\n\n[![npm version](https://badge.fury.io/js/react-web-config.svg)](https://badge.fury.io/js/react-web-config)\n[![Donate](https://img.shields.io/gratipay/user/tanhauhau.svg)](https://gratipay.com/~tanhauhau/)\n\n[react-native-config](https://github.com/luggit/react-native-config) for Web.\nConfig variables for React Native apps *and React Native Web apps*\n\nModule to expose config variables to your javascript code in React Native, supporting both iOS and Android *and web*.\n\n### Overview\n\n[react-native-web](https://github.com/necolas/react-native-web) is a project to bring [react-native](https://github.com/facebook/react-native) to the web. [Read more](https://github.com/necolas/react-native-web#why).\n\n`react-native-web` lets us to write a single app that runs on mobile platform, ie iOS and Android, as well as browser, however, a typical `react-native` project will use libraries such as `react-native-config` that works perfectly on `react-native` but not on `react-native-web`. `react-web-config` allows you to continue using `react-native-config` seamlessly on the web by adding a few lines in your webpack config.\n\n### Usage\n\nStep 1 and 2 is what you have done if you follow the [guides](https://github.com/luggit/react-native-config#usage) from react-native-config.\n\n\n1) Create a new file `.env` in the root of your React Native app:\n\n```js\n// .env\n\nAPI_URL=https://myapi.com\nGOOGLE_MAPS_API_KEY=abcdefgh\n```\n\n2) Then access variables defined there from your app:\n\n```js\n  // app.js\n  import Config from 'react-native-config'\n  Config.API_URL  // 'https://myapi.com'\n```\n\n\nHowever if you want to have Step 2 to work on a `react-native-web` project, you will need to configure the following in your `webpack.config.js`:\n\n```diff\n  // webpack.config.js\n\n  const webpack = require('webpack');\n+ const ReactWebConfig = require('react-web-config/lib/ReactWebConfig').ReactWebConfig;\n+ const path = require('path');\n\n+ const envFilePath = path.resolve(__dirname, '.env');\n\n  module.exports = {\n    ...\n    plugins: [\n      ...\n+     /* define __REACT_WEB_CONFIG__ */\n+     ReactWebConfig(envFilePath)\n    ],\n    resolve: [\n      alias: [\n        ...\n+       /* set alias from react-native-config to react-web-config */\n+       'react-native-config': 'react-web-config',\n        'react-native': 'react-native-web'\n      ]\n    ]\n  }\n```\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanhauhau%2Freact-web-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanhauhau%2Freact-web-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanhauhau%2Freact-web-config/lists"}