How to access the .env variables inside javascript?

I havn't tried it myself, but i think it should be as easy as using some thing like:

if ('{{ env('APP_FOO') }}' == 'bar')
{
    // do something
}

@stephan-v You can’t access environment variables from client-side JavaScript. Being able to do so would be a security risk (since that’s where sensitive things like database credentials are stored).

Instead, consider having two instances: a “production” instance and a development instance. This is what you should do with things like S3 buckets etc.

@stephan-v @martinbean This is not entirely true. You can use dotenv package to parse .env file and pass result data to webpack via DefinePlugin which will replace specified values (i.e. APP_URL, FACEBOOK_CLIENT_KEY etc.) in your bundled client-side code with literal values. All other values inside your .env file will remain private. So in fact, you can use single .env file on both front-end and back-end in a secure and intuitive way.

Here is the gist with working setup. Note, that there are two files there. The first one just abstracts the logic behind the parsing and validation of .env file. The second is development version of webpack.config.js.

Actually, I think @JeffreyWay should take note of the above method. It may be possible to apply this stuff to new versions of Elixir that use Webpack (or at least I've heard it would).

@adiachenko

You are correct but if your checking on local/dev yes but in production that check better error out with access issues. As your env file better be inaccessible.

Anyways, I set a url check via JavaScript. If url is localhost (or whatever) then use this, if not then it's on a production server and use this or the other way around to fit many devs.

I personally really, really hate mixing php in JavaScript. There are was around it and seems just lazy to couple the two like that.

@jekinney I don't really see a difference. Webpack doesn't insert .env file into your javascript, it only replaces requested(!) variables with their values in the output (i.e. APP_URL becomes http://localhost). Which means the chances you'll get your DATABASE_PASSWORD and the like shown in production javascript code is pretty much non-existent unless you do it in purpose.

Also, it's only logical to store your environment variables in one place when you can instead of sprinkling them around your codebase.

@adiachenko

where the heck did Webpack come in?

The op wanted to use laravel's env() in his javascript file. His frontend javascript file should not have access to laravel's env file.

var host = window.location.hostname;

if(host == 'localhost.com') {
    //is development
} else {
    // is production
}

Or better yet

var host = window.location.hostname;
var local = true;

if(host == 'production_domain_name') {
    return local = false;
}

So simple.... No further argument needed or usage of php in a javascript file.....

Go to one of those hypnotist and pay him or her to make you forget you ever thought of that question.

Can't wait to see how @jimmck responds to this answer.

@jlrdw I simply say you can't.

@jlrdw Come on now...can't you be a little more friendly?

@jekinney You forget that OP is not the only one who will use this thread. People search for stuff in Google and this will later be used as the reference answer for the question on how to get access to environment variables. I'm just being helpful here. I too had this question at some point (forgot the reason though, it seems like I used credentials for some external API in both places). By the way, APP_URL was used for an example purposes, replace it with whatever you like. But I can tell you now that you WILL need this exact URL in webpack config (not your app code where you can just read it from location object) to do any semi-complex build with dynamically loaded chunks of data.

For anyone that comes across this, if using Webpack: https://www.npmjs.com/package/dotenv-webpack

Then inside js files that are pulled in with webpack, you can use process.env.YOUR_ENV_VAR

Is this not already handled via LaravelMix?

https://github.com/JeffreyWay/laravel-mix/pull/464/files

See this: https://laravel.com/docs/5.6/mix#environment-variables

See the solution: https://laracasts.com/discuss/channels/laravel/access-env-variable-inside-js-file?page=1&replyId=759532