I’ve seen a few blog posts about using environment variables on React/Vue/etc when they’re part of a Phoenix app using webpack, but I didn’t find much content about using esbuild. This post is about providing configs to your front-end when using esbuild.

Where to save configs

On config/dev.ex you can set arbitrary configs to make them available to your application. You can also import other configs from other files that might not get committed like this:

# config/dev.ex

import_config "dev.secret.exs"

Then you can add dev.secrets.exs to your .gitignore and write down your configs there.

# config/dev.secret.exs

config :my_app,
  public_key: "you can write your key here",
  secret_key: "you can write your key here"

Note: You can also get these keys from the environment using System.fetch_env!("NAME_OF_YOUR_ENV_VAR") if you prefer, but it sounds like this is not the Elixir way of doing these things because it doesn’t work well with all configuration scenarios (dev/prod/runtime/etc). More details on this thread.

Providing configs to your front-end

You don’t need to change your esbuild configuration to provide keys to your front-end. The trick here is to create a JavaScript object on your root.html.heex to make public keys available before the the front-end loads.

NOTE: Don’t provide your private/secret keys to your front-end.

<!DOCTYPE html>
<html lang="en">
    <!-- ... -->
    <script type="text/javascript">
      var PUBLIC_CONFIGS = {
        public_key: "<%= Application.fetch_env!(:my_app, :public_key) %>",
    <!-- ... -->

Using it in your front-end

With that you have a PUBLIC_CONFIGS object available to use anywhere in your front-end. Here is an example using a component from the react-google-invisible-recaptcha package:

  onResolved={() => { }}
  sitekey={PUBLIC_CONFIGS.public_key} // here is your key

This approach is something I had to figure out by myself for a project, do you have a better idea about how to do the same? Please ping on twitter. Thanks.