Mint 🍃: Environment Variables

This is the next post in a series that showcases the features of Mint, you can find the previous posts here:

• Mint 🍃: Getting Started
• Mint 🍃: Components
• Mint 🍃: Events and State of Components
• Mint 🍃: Handling HTTP Requests
• Mint 🍃: Styling Elements
• Mint 🍃: Creating Packages
• Mint 🍃: Routing

In this post I will show you how to use environment variables.

---

In any application, being able to define variables which are deployment environment specific is a necessity. Let's say you might want to connect to a local API endpoint during development and remote API on production.

Defining environment variables

Mint uses .env files to store variables specific to the environment, which usually looks like this:

ENDPOINT=http://localhost:3001
WSENDPOINT=ws://localhost:3001
GATRACKINGID=google-analytics-tracking-id

Here we declared three variables WSENDPOINT, ENDPOINT and GATRACKINGID that we want to use in our code.

Using environment variables

In Mint you can use the at (@) symbol followed by the name of the variable to refer to it:

module Main {
  fun render : Html {
    <div>
     <{ @ENDPOINT }>
    </div>
  }
}

Essentially the value of the variable will be inlined during compilation with the type of String.

In an other example you can see how to use it when making a request:

...

response =
 @ENDPOINT + "/api/planets"
 |> Http.get()
 |> Http.send()

...

If an environment variable is not defined in the application, then a nice error message is shown:

Using a different .env file

By default the .env file in the root of the application is loaded, but you can specify a different file by using the --env (or -e) flag like this:

mint build --env .env.production

That's it for today, thank you for reading 🙏

---

If you like to learn more about Mint check out the guide 📖

In the next part I'm going to tell you about stores 😉 see you there 👋