Problem with .env on remote

There is a JS in where I load some data from my site WordPress REST API.

axios.get(process.env.WP_HOME + '/wp-json/wp...

I use dotenv-webpack to expose my .env file variables to Vue.js.

Here is my local .env:
kpoxo6op@DESKTOP-LR23FLP:/mnt/c/welcome.dog/site$ cat .env

WP_ENV='development'
WP_HOME='http://welcomedog.test'

As a result, the URL in my axios call becomes http://welcomedog.test/wp-json/wp

I expect that my URL changes on a remote server because .env is different on the remote server.
.env on remote:
root@ubuntu-welcomedog:/srv/www/welcome.dog/current# cat .env

WP_ENV='production'
WP_HOME='https://welcome.dog'

However, when I deploy my site to my remote server, my URL does not change to https://welcome.dog. Instead, I see local site value in my main.js on the remote server.

How do I change http://welcomedog.test to https://welcome.dog in my JavaScript on the remote server?

1 Like

The problem is that the .env file on your remote server is actually not being read using JS.

The .env file is parsed when you run yarn build. Occurrences of variables in process.env are substituted with their corresponding values from the dotenv file at build time.

I guess you are running the build process locally using the default build-before.yml deploy hook of Trellis, so your local dotenv file is read.

A solution to that might be to provide the release’s .env file during the build process (e.g. copy it to .env.build, read that and delete after). You can achieve that using some Ansible hooks.

@roots: Do you guys use dotenv-webpack? Doesn’t it somehow counteract the 12-factor philosophy? Because then the build step is dependent on the config.

A better approach for your specific case might be not to hardcode the URL.
Use wp_localize_script instead to provide the data that is available to PHP to your scripts:

wp_localize_script('sage/main.js', 'sageData', [
  'baseURL' => trailingslashit(get_site_url());
]);

Output (before your script):

<script type="text/javascript">
  var sageData = { "baseURL": "http:\/\/example.com\/" };
</script>

Now it is available available globally/in the window Object:

axios.create({
  baseURL: sageData.baseURL
});
2 Likes

thanks @luke,
I understood what was my issue with .env files.

I tried your possible solution, it worked without CDATA block for some reason. Why is that?

I added wp_localize_script to my setup.php:

wp_localize_script('sage/main.js', 'sageData', [
    'ajaxBaseURL' => trailingslashit( get_home_url() )
]);

And I added this to my Vue JS havascript:

const instance = axios.create({
    baseURL: sageData.ajaxBaseURL, // eslint-disable-line
});
...
instance.get('wp-json/wp/v2/dogplace-type?per_page=100')
...

My site works correcty now on both local and remote servers.

I think the CDATA part is skipped for Themes that have enabled HTML5 Theme Support. I changed the example since it’s 2020 :slight_smile:

As of WordPress 4.5 you can also use wp_add_inline_script to add any kind script directly:

$script = 'var foo = "bar";';
wp_add_inline_script('sage/main.js', $script, 'before');

Output:

<script type="text/javascript">var foo = "bar";</script> 
1 Like

This topic was automatically closed after 42 days. New replies are no longer allowed.