How to pass environment (.env) variables to frontend?

[NikolaGrgic]

Hey all,

I have a dynamically-generated variable created in the Rust backend that I need to pass down as an environment variable to the React frontend. Is there any way to pass variables to create-react-app before Tauri launches the application?

Thanks in advance.

[m3rashid]

Also, With all respect, is there any way to change environment variables at runtime (running the build) in react-tauri ?

Thanks in advance

[alchaplinsky]

You could just create .env.development and .env.production files and add different values for your env variables for development and production environments.

[m3rashid]

But, that cannot be changed once the app is running. Actually, my app needs to contact a backend api which can be any IP (can change overtime). This was my usecase

I just accessed the host system environment variables (.bashrc or .zshrc (linux) and environment variables (windows)) from the rust side and invoked it on the frontend, for my part, this is resolved now .

Now, i can change the environment variables on the host and the new IP is where the api server is called

This may not be the best approach according to tauri, but I couldn't think of a better one

[alchaplinsky]

@NikolaGrgic You should be able to do that by naming your env variable with VITE_ prefix. This way Vite will pass these env vars to your js bundle.

So for instance you can create a VITE_CLIENT_ID variable and then reference this variable as VITE_CLIENT_ID in your JS code.

[m3rashid]

I just implemented a similar thing in my react + tauri application.
let me show you how I did

This is my main.rs file

fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![get_environment_variable])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Here, get_environment_variable is the function i want to run in the frontend, and this is its implementation

#[tauri::command]
fn get_environment_variable (name: &str) -> String {
  std::env::var(name).unwrap_or_else(|_| "".to_string())
}

For your use case, you can expose a similar function with no parameters which just returns your "dynamically generated variable"

invoke("get_environment_variable", { name: "params" })
.then((hostIp) => {
  if (hostIp) serverRootUrl = "http://" + hostIp + ":5000";
  else serverRootUrl = defaultServerUrl;
})
.catch(console.log);

My case was similar because if the server URL is not loaded, there is no use of launching the app. So, I waited for a while using setTimeout (and in the meantime, I expect all the fetching is complete from the rust side of things), then launching the app.

Looks a bit hacky, but it is what I did
Open to suggestions, please let me know if there are better steps

[darcyvoutt]

@m3rashid Has this worked for you at build time? For me, it's only working during runtime but not during build time. I specifically only want to use the variable within Rust code, I won't need to pass it to the frontend or have a variable I don't want to store in the codebase. But even when testing this solution, it doesn't show up at build time.

[jackadair]

@darcyvoutt Going through the same thing right now, curious if you have found a solution?

[darcyvoutt]

@jackadair Thanks for poking me on this cause I forgot to post back my findings!

What I did and got advice within the Tauri Discord _(recommended), was to do the following.

fn get_secret() -> String {
    let secret = env!("SECRET");
    format!("{}", secret)
}

Now the Rust analyzer flags the use of env! but it doesn't break the building of the application. I'm a novice regarding Rust, but as I understand it, that will force the env to work regardless of the compiled runtime.

Now I should flag, the secret I'm using it is meant to be a hidden string that I didn't want in the repo but isn't sensitive data (ie. personal information). It could still be found within the binary as I understand it if someone is stealthy enough, so keep in that in mind, that it's being used correctly.

[jackadair]

@darcyvoutt Wow thank you so much, as a Rust novice myself been struggling with this for a few days. Cheers my friend 🍺

[developermindsetcom]

Just came across this recently, here're several ways I found:

1. Using std::env

#[tauri::command]
fn get_env(name: &str) -> String {
    std::env::var(String::from(name)).unwrap_or(String::from(""))
}

Then in typescript:

import { invoke } from "@tauri-apps/api/core";

function get_env(name: string) {
  return await invoke("get_env", { name });
}

2. Using Vite

Only with VITE_ prefixes:

import.meta.env.VITE_DEVELOPER_MINDSET

3. Using SvelteKit

In SSG mode only and only starting with PUBLIC_ prefixes.

import * as env from "$env/static/public";
console.log(import.meta.env.PUBLIC_DEVELOPER_MINDSET); // works

4. Pure Rust

Install crate: cargo add dotenv

Then in your rust code, load from .env using:

dotenv::dotenv().ok();

Or using macro:

#[macro_use]
extern crate dotenv_codegen;

And then in rust you can use dotenv macro:

println!("{}", dotenv!("DEVELOPER_MINDSET"));

There are couple more options on how to connect pulling and embedded environment variables inside backend and frontend of the Tauri app in my tutorial.

[kennardpeters]

On mobile (iOS for me) the macro solution (using dotenv_codegen) was the only one that worked for me.