# react-web-config

> react-native-config for web

Latest version **1.0.0** (published 2017-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-web-config
pnpm add react-web-config
yarn add react-web-config
bun add react-web-config
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-04-12 |
| First published | 2017-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Tan Li Hau |
| Maintainers | tanhauhau |
| Keywords | react, native, config, react-native-config, react-native-web, web, env, dot-env |

## Links

- npm: https://www.npmjs.com/package/react-web-config
- Repository: https://github.com/tanhauhau/react-web-config
- Homepage: https://github.com/tanhauhau/react-web-config#readme
- Issues: https://github.com/tanhauhau/react-web-config/issues
- npm.io page: https://npm.io/package/react-web-config

## Dependencies (2)

- [dotenv](https://npm.io/package/dotenv.md) ^4.0.0
- [webpack](https://npm.io/package/webpack.md) ^2.3.3

## Alternatives

- [replicas-cli](https://npm.io/package/replicas-cli.md) — 3.0K weekly downloads
- [env-contract](https://npm.io/package/env-contract.md) — 133 weekly downloads
- [@openveo/api](https://npm.io/package/@openveo/api.md) — 61 weekly downloads
- [@ryniaubenpm2/cumque-error-reiciendis](https://npm.io/package/@ryniaubenpm2/cumque-error-reiciendis.md) — 54 weekly downloads
- [ts-global-type-extra](https://npm.io/package/ts-global-type-extra.md) — 11 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-04-12

## README

# react-web-config

[![npm version](https://badge.fury.io/js/react-web-config.svg)](https://badge.fury.io/js/react-web-config)
[![Donate](https://img.shields.io/gratipay/user/tanhauhau.svg)](https://gratipay.com/~tanhauhau/)

[react-native-config](https://github.com/luggit/react-native-config) for Web.
Config variables for React Native apps *and React Native Web apps*

Module to expose config variables to your javascript code in React Native, supporting both iOS and Android *and web*.

### Overview

[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).

`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.

### Usage

Step 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.


1) Create a new file `.env` in the root of your React Native app:

```js
// .env

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh
```

2) Then access variables defined there from your app:

```js
  // app.js
  import Config from 'react-native-config'
  Config.API_URL  // 'https://myapi.com'
```


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

```diff
  // webpack.config.js

  const webpack = require('webpack');
+ const ReactWebConfig = require('react-web-config/lib/ReactWebConfig').ReactWebConfig;
+ const path = require('path');

+ const envFilePath = path.resolve(__dirname, '.env');

  module.exports = {
    ...
    plugins: [
      ...
+     /* define __REACT_WEB_CONFIG__ */
+     ReactWebConfig(envFilePath)
    ],
    resolve: [
      alias: [
        ...
+       /* set alias from react-native-config to react-web-config */
+       'react-native-config': 'react-web-config',
        'react-native': 'react-native-web'
      ]
    ]
  }
```

### License

MIT

---
_Source: https://npm.io/package/react-web-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._