What is the correct way to use env var on Neltify?

Support
,
1

I have read many post about env var using for web app. Some post said don’t use .env file, and some explain how to use .env to store the API key or senitive data for the app. And not much post using Flutter and Netllfy both.

I saw Neltify provide a env var setting with “import from a .env file”, but actually I have no idea how to apply Neltify env var on my flutter web app.

dotenv is a normal package to read .env file, it is work on local test. After deploy to netlify, it pop up a error, because there is no .env file existing on root or publish directory after deploy.

Is there is a correct way step by step to use " env var" on Netlify??

Cheers,

Ray

2

This is more of a Flutter question than Netlify. How do you normally read environment variables in Flutter?

You should likely be using String.fromEnvironment constructor - String - dart:core library - Dart API (flutter.dev). As long as the environment variables are added in the Netlify UI, the above should work.

1 Like
3

Thanks for the reply.

my dart coding like below:

await dotenv.load(fileName: “.env”);
api_key= dotenv.env[‘api_key’] ?? ‘’;

it is work at local testing, using .env file on root directory

now I change fromEnviroment like below:

String api_key = const String.fromEnvironment(‘api_key’, defaultValue: ‘’)

Then, I try on Netlify, process site configuration - > Environment variables → use “import from a .env file”, setup var api_key.

What should I do after setup? My purpose is let the dart file read the var “api_key” when process “flutter build web” on Netlify

Any coding I should create on netlify.toml file?

4

This is my deploy: https://f-124147.netlify.app/ and the repo: github.com/hrishikesh-k/f-124147, I’ve simply added the environment variable in the Netlify UI:

Name: SOME_TEXT
Value: Worked!!!

My build command:

if [ -d "flutter" ]; then cd flutter && git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi; flutter/bin/flutter build web --dart-define=SOME_TEXT=$SOME_TEXT
5

Thanks a lot!!
Let me try your command on by build.

6

The command is work!!

but another issue come out, when the deploy is done, the api_key will be data breach when using F12 to inspect the webpage. That is why I keep try many method to hide the api_key, but still not work.

7

Hi, glad to hear it worked but your API key is still exposed. Here’s a great blog post we wrote about hiding your api key with env variables.

Take a look and hopefully that helps.

1 Like
8

Thanks for sharing!!!

I have read the blog post, still have a question: I only can hide the api key using Netlify CLI?
The 1st step: creating new environment variables via Netlify UI, is already done.
2nd step: need install Netlify CLI, then use the command based on blog post

Please advise if my understanding is correct. Thanks again.

9

This has nothing to do with Netlify. Read: reactjs - Will my .env variable value be exposed to clients? - Stack Overflow

If you wish to keep environment variables private, use them in Netlify Functions / Edge Functions and return the data to the client.

10

How Netlify Functions / Edge Functions work, could you share some sample with coding for reference?

And thanks to let me know nothing can do based on F12 inspect.