hot reload

[sibelius]

Add support to hot reload like this https://github.com/nodkz/babel-plugin-transform-relay-hot

so we don't need to restart the packager everytime with change envs

[zetachang]

This might be a cool feature! And actually you can edit the file importing the configs to trigger an update without restarting the packager.

Sibelius Seraphini [email protected] 於 2017年1月26日週四 下午8:00 寫道：

Add support to hot reload like this https://github.com/nodkz/babel-plugin-transform-relay-hot

so we don't need to restart the packager everytime with change envs

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/zetachang/react-native-dotenv/issues/9, or mute the thread https://github.com/notifications/unsubscribe-auth/AAzRJdDFeVKi7lGvngYjl5mKD06nNAyuks5rWIr0gaJpZM4LukEK .

[j2kun]

I'm trying to find a more principled solution to this than editing the js file. Do you know if it's possible to add .env* to the set of files being watched by the react packager and have it trigger a rebuild? (presumably, a rebuild everything, though ideally just of the js files importing react-native-dotenv)

[zetachang]

@j2kun, I've done some survey recently.

An initial attempt is to update those files depending on react-native-dotenv (only mtime of the file without modifying content), but it looks like the packager won't trigger the babel compiler to recompile if content is not changed.

So as you suggest, a proper solution might require modifying/patching the internal of the packager.

[j2kun]

I imagine there's a way to specify a gulp action in a config file somewhere, but I'm new to ES6 so I haven't figured it out yet.

[sibelius]

maybe something like this: https://github.com/nodkz/babel-plugin-transform-relay-hot/blob/master/index.js#L12

@cpojer do u have any idea how can we do that?

[nobady90]

hi guys, some news to automatically recharge the .env file?

[msanchez-eutech]

This is really a much needed feature for us, we use .env to enable/disable app behaviors and on a huge app, packager restart is really slow. So any news on this ?

[adrianhurt]

Hi! I don't know why but in addition to that, the values are cached, so if I change the js file where I use 'react-native-dotenv' then we get the new values from .env file, but when I set again the js file at it was, then the values I get from .env file was the past ones again. It's weird. So I need to introduce a "timestamp" to the js file to guarantee its always different.

It's tedious, so meanwhile I've decided to automate the process with a script. I hope it could be also useful for anyone else.

So I've created a script that find every file that has from 'react-native-dotenv' and it adds to them a commented timestamp at the same line. Then it force to update any file using the library.

#!/bin/bash
set -euo pipefail

SRC_FOLDER="src"
SEARCH_TERM=" from 'react-native-dotenv'"
# the timestamp (with pattern) that will be added to the file
TIMESTAMP_FORMAT="/* ___timestamp___$(date +"%F___%T")___ */"
# the equivalent converted to regex (it escapes the "/" and "*" characters)
TIMESTAMP_REGEX=$(echo "$TIMESTAMP_FORMAT" | sed 's/\//\\\//g' | sed 's/\*/\\*/g')
# the regex used to match for removing every previous timestamp
TIMESTAMP_REGEX_TO_MATCH=$(echo "$TIMESTAMP_REGEX" | sed 's/[0-9]/\./g')


# loops for every file that contains the SEARCH_TERM but this script
thisFileName="${0##*/}"
echo "REFRESHED TIMESTAMP FOR FILES:"
grep -rnwl "$SRC_FOLDER" -e "$SEARCH_TERM" | while read -r file ; do
    if [[ ! $file =~ $thisFileName ]]; then
        # gets the line within the file that contains the SEARCH_TERM
        line=$(grep -n "$SEARCH_TERM" "$file" | sed -e 's/[^0-9].*$//g')
        # removes any previous timestamp
        sed -i '' -e "${line}s/[[:space:]]*${TIMESTAMP_REGEX_TO_MATCH}[[:space:]]*//g" $file
        # adds the timestamp at the end of the line
        sed -i '' -e "${line}s/$/ ${TIMESTAMP_REGEX}/g" $file
        # prints the filename
        echo " -> $file"
    fi
done

You may need to change it a bit to your needs.

And as a bonus, you can add this 2 scripts within your package.json

{
  "scripts": {
    "refresh-dotenv": "scripts/forceEnvFileRrefresh.sh",
    "refresh-dotenv-watch": "watchman-make -p '.env' '.env.*' -r scripts/forceEnvFileRrefresh.sh"
  },
}

So you can execute yarn refresh-dotenv to trigger an update manually or even yarn refresh-dotenv-watch to get the hot reload feature.

Be sure you have permissions to execute the script and have watchman updated to v4.8 to be able to run scripts with watchman-make.

[infostreams]

This package is implemented as a Babel plugin, and the reason that you're getting the same values even after a restart is because Babel is caching them. If you need to force the situation and ensure you have the new values (for example in a build script), you have to delete the Babel cache:

rm -rf ./node_modules/.cache/babel-loader

In my build script I do it like this, so that even if that caching directory doesn't exist, the build still continues:

$(rm -rf ./node_modules/.cache/babel-loader || true) && NODE_ENV=production webpack --config web/webpack.config.js