Re: Detect localhost, staging or production and access env vars in liquid

simonbarker · ‎04-21-2023

Hi,

I've got two stores, one is a dev store and the other is out production store. I develop our theme locally and deploy to the dev store periodically. When we are ready to launch we then apply the theme to the production store.

We make requests to different end points depending on which environment the store is running in (local, dev store, prod store) and want to be able to pass these in as environment variables, or at least detect in liquid which environment we are running in.

I can't quite work out who to do it. Passing the `--environment` flag to `shopify theme dev` doesn't seem to do anything, and even if it did I can't figure out how to access the shopify.theme.toml variables in liquid anyway.

The closest I can get is to check the request.canonical_url or request.host value but that doesn't work for local dev.

Any help would be great

Thanks

Simon

diegovogel · ‎08-26-2023

I'm trying to do the same thing. The closest I've gotten is conditionally defining a global JS variable.

In the site <head>, do something like this:

<script>
    if (window.location.hostname === '127.0.0.1') {
        window.dataApiBaseUrl = 'http://local-domain-here/api/v3';
    } else {
        window.dataApiBaseUrl = 'https://production-domain-here/api/v3';
    }
</script>

Then you can reference dataApiBaseUrl anywhere else (script tags or JS files included on the page). This is also handy for exposing theme settings to JS.

But I wish there was a way to do this with Liquid so we could do things like load different versions of third-party scripts:

{% if environment == 'development' %}
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
{% else %}
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
{% endif %}

Sadly I haven't found a way to do that, so I may need to do it in our deploy script, which is kind of a pain.

jonbianco · ‎10-02-2024

I know its an old thread, but I devised a simple liquid-only solution here:

{%- if request.host contains 'myshopify.com' -%}
{% comment %} Development server {% endcomment %}
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
{%- else -%}
{% comment %} Production server {% endcomment %}
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
{%- endif %}

diegovogel · ‎10-03-2024

Thanks! I was skeptical because I thought request.host would give the same value in local dev and production, but they are in fact different. Thanks for posting.

As a side note, after posting my last reply, I came across theme.role and have been using it since then. But it was deprecated this year. 😫 I've been looking for an alternative and request.host works great!