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?
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: