DEV Community: lynn

How to dynamically change your React Environment variables without re-building

lynn — Tue, 12 Oct 2021 08:26:46 +0000

Have you ever needed to deploy a React application to multiple environments?

If you've ever had to do the above, then this scenario may sound familiar to you: You already have an existing build file, you wish to change some environment variables, then re-deploy it to a new environment.

Unfortunately, you soon realize that the environment variables have been hard-coded within the build file. This means that you cannot change the environment variables without re-building.

Are there any other ways to modify environment variables?

We asked around to see if the other projects had a better way to handle it. It turned out that different teams had their own approach:

Some teams simply re-built it for each environment
Some teams fetched the environment variables asynchronously from an external data source
One team stored all the environment variables in the app, then selected the environment based on the URL
One team stored a placeholder environment variable, then replaced it before serving the file

What would an ideal flow look like?

All of the above had certain tradeoffs that we weren't willing to make. We were looking to build something that fulfilled the following:

Does not require a rebuild
Minimal code change required
Allows synchronous access of environment variables
Easy to integrate with your current workflow
Simple and straightforward

react-inject-env: a tool that allows you to modify environment variables after the static file has been built

The short and simple explanation is that it creates an env.js file in the /public folder. The file is then executed at the start and the variables are loaded into the window object.

Here's how to use it

Install react-inject-env



npm install react-inject-env --save-dev
yarn add react-inject-env --dev

2. Add the following to index.html



<script src='/env.js'></script>

3. Create a new file called env.js and copy the following code:



export const env = { ...process.env, ...window['env'] }

4. Replace all instances of process.env with the newly created env variable



import { env } from './env'

export const App = () => {
return (
  <div style={{backgroundColor: env.REACT_APP_COLOR}}>
    <span>{env.REACT_APP_MAIN_TEXT}</span>
  </div>
  )
}

5. Build your static files using npm run build / react-scripts build / whatever your build script is.

6. Set your environment variables using the following command:



[env variables] npx react-inject-env set

# with a black background
REACT_APP_COLOR=black REACT_APP_MAIN_TEXT="Black Background" npx react-inject-env set

# with a blue background
REACT_APP_COLOR=blue REACT_APP_MAIN_TEXT="Blue Background" npx react-inject-env set

# for windows
set REACT_APP_COLOR=navy&& set REACT_APP_MAIN_TEXT=Navy Background&& npx react-inject-env set

7. Open build/env.js to verify that your variables are present.

These variables will then be read by your app at runtime.

And that's it, you're done!

If you need to modify your environment variables again, you can either (a) repeat Step #6, or (b) modify build/env.js directly.

What about <insert tool>?

This utility was built to be as simple as possible, so it should integrate and work well with most other tools.

.env / dotenv

react-inject-env will automatically detect environment variables in your .env file located in your root folder.

Note: Environment variables passed in through the command line will take precedence over .env variables.

Typescript

In Step #2, create a file named env.ts instead of env.js



declare global {
  interface Window {
    env: any
  }
}

// change with your own variables
type EnvType = {
  REACT_APP_COLOR: string,
  REACT_APP_MAIN_TEXT: string,
  REACT_APP_LINK_URL: string,
  REACT_APP_LOGO_URL: string
}
export const env: EnvType = { ...process.env, ...window.env }

Docker

react-inject-env can also be neatly integrated with Docker



FROM node:16.10-slim
COPY . /app
WORKDIR /app

RUN npm install
RUN npm run build

EXPOSE 8080

ENTRYPOINT npx react-inject-env set && npx http-server build



docker build . -t react-inject-env-sample-v2



docker run -p 8080:8080 \                   
-e REACT_APP_COLOR=yellow \
-e REACT_APP_LOGO_URL=./logo512.png \
-e REACT_APP_MAIN_TEXT="docker text" \
-e REACT_APP_LINK_URL=https://docker.link \
react-inject-env-sample-v2

Summary

This package has greatly enhanced our workflow and has cut our build and deployment times by over 10 minutes. In the past, we had to build 4x times - once for each environment - but now we only need to build it 1x. Deployments are blazing fast now!

It was built with simplicity in mind, so regardless of which tool you are using, you should be able to integrate it as part of your workflow!

Links

For more detailed information and support and samples, you may check out the following links:

react-native-cross-actionsheet : Easy to use cross-platform ActionSheet with Native Android implementation

lynn — Sun, 07 Jun 2020 15:45:38 +0000

Quickstart

yarn: yarn add react-native-cross-actionsheet

npm: npm install react-native-cross-actionsheet

import { ActionSheet } from 'react-native-cross-actionsheet'

    ActionSheet.options({
      options: [
        { text: 'Create', onPress: () => console.log('create') },
        { text: 'Update', onPress: () => console.log('update') },
        { text: 'Delete', destructive: true, onPress: () => console.log('delete')}
      ],
      cancel: { onPress: () => console.log('cancel') }
    })

Preview

Android	iOS

Background

Was a bit surprised to find out that while ReactNative had support for iOS ActionSheets, they didn't have any support for Android even though it's a fairly common thing.

Searched around, but most of the crossplatform ActionSheet libraries only had React implementations rather than native implementations. There were some crossplatform native libraries, but most of these were rather dated.

Furthermore, most ActionSheet libraries have cumbersome APIs requiring you to have to import an component, and manually manage your states using const showActionSheet = useState().

So with that I decided to just make my own library that is backed by Native Android Actionsheets. The API is extremely easy to use as you can call it statically, meaning you don't need to enter any JSX code. I also reimplemented all the options available to ActionSheetIOS (besides anchor) to bring Android on parity with iOS. Which means you can add title, message, tintColor, and destructive.

Usage

Simple

import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.options({
  options: [
    { text: 'Create', onPress: () => console.log('create') },
    { text: 'Update', onPress: () => console.log('update') },
    { text: 'Delete', destructive: true, onPress: () => console.log('delete')}
  ],
  cancel: { onPress: () => console.log('cancel') }
})

Additional Options

import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.options({
    title: 'ActionSheet Title',
    message: 'Select an option',
    options: [
      { text: 'Create', onPress: () => console.log('create') },
      { text: 'Update', onPress: () => console.log('update') },
      { text: 'Delete', onPress: () => console.log('delete'), destructive: true }
    ],
    cancel: { text: 'Cancel', onPress: () => console.log('cancel') },
    tintColor: '#008888'
})

Disable Cancel

import { ActionSheet } from 'react-native-cross-actionsheet'
ActionSheet.options({
    options: [
      { text: 'Create', onPress: () => console.log('create') },
      { text: 'Update', onPress: () => console.log('update') },
      { text: 'Delete', onPress: () => console.log('delete'), destructive: true }
    ],
    cancel: false
})

showActionSheetWithOptions

If you aren't comfortable using this API and would prefer to use the original, it is also available and behaves exactly the same as ActionSheetIOS.

Only require usage of ActionSheetAndroid

You can also import just ActionSheetAndroid by itself if you wish to manually handle different platforms.

The library was written in full Typescript, so it has full autocompletion support and will prompt you if you made any errors.

Feel free to leave feedback on the library!

https://github.com/aelesia/react-native-cross-actionsheet

https://www.npmjs.com/package/react-native-cross-actionsheet

Assigning Static IP for OpenVPN on Asus Routers

lynn — Mon, 18 Nov 2019 16:43:38 +0000

Configure a static IP so that you will always be assigned the same VPN IP address based on your username

SSH into Router

Open your router at 192.168.0.1 (or whichever gateway you're using)
Administration > System > Enable SSH > LAN only
Open SSH client of choice
Windows - Use Windows Powershell
Mac - Use Terminal
SSH into router by typing the following command (change your username to whichever you use when logging in, and IP address to your default gateway)

ssh admin@192.168.0.1
Enter your password when prompted

Reference

Create Script

Create a scripts folder in '/jffs/scripts'

cd ../../../jffs; mkdir scripts; cd scripts;
Create new file 'clientconnect.sh'

cat > clientconnect.sh

Enter this script: (explanation later)

#!/bin/bash
if [ "$username" = "test" ];
then
    echo "ifconfig-push 10.8.0.18 10.8.0.17" >>$1
elif [ "$username" = "test2" ];
then
    echo "ifconfig-push 10.8.0.22 10.8.0.21" >>$1
fi

Save by pressing Enter, then Ctrl-D
Verify that the script has been saved. You should see the full code.

cat clientconnect.sh
Grant execution permissions

chmod +x clientconnect.sh

Reference

Execute script on connect

VPN > OpenVPN > VPN Details > Advanced Settings

Enter this code under "Custom Configurations"

script-security 2
--client-connect /jffs/scripts/clientconnect.sh

Apply

Reference #1
Reference #2

Connect to OpenVPN

Create two OpenVPN users
User 1: test
User 2: test2
Connect to OpenVPN with both accounts using your OpenVPN client of choice
You should be connected to 10.8.0.18 with test, and 10.8.0.22 with test2

Reference

Modifying the script

If you wish to add more users, simply copy the "elif then echo" block and change the IP address and username.

#!/bin/bash
if [ "$username" = "test" ];
then
    echo "ifconfig-push 10.8.0.18 10.8.0.17" >>$1
elif [ "$username" = "test2" ];
then
    echo "ifconfig-push 10.8.0.22 10.8.0.21" >>$1
elif [ "$username" = "test3" ];
then
    echo "ifconfig-push 10.8.0.26 10.8.0.25" >>$1
elif [ "$username" = "test4" ];
then
    echo "ifconfig-push 10.8.0.30 10.8.0.29" >>$1
fi

The first IP can only be in multiples of 4 + 2 (18,22,26,30...), while the second IP must be one number lower than the first (17,21,25,29...)

I suggest not to use lower IPs to avoid collisions as OpenVPN will assign lower numbers first. (OpenVPN starts from 10.8.0.6)

If you wish to change the username, simply replace 'test' or 'test2' with the username of your choice.