Access env variable inside js file

@fredemagi You may access it like this,

var max_val = '{{ env('MIX_MY_VAR') }}';
console.log(max_val);

if you have just added this MIX_MY_VAR in env and didn't clear config cache then first clear it,

php artisan config:clear
php artisan cache:clear
composer dump-autoload
php artisan view:clear
php artisan route:clear

@KVITHALANI - I just tried what you suggested, but it yields "Uncaught SyntaxError: Unexpected identifier".

@fredemagi Sorry, There is one syntax error I have used same quotation Try this:

var max_val = "{{ env('MIX_MY_VAR') }}";
console.log(max_val );

@KVITHALANI - Hmm... it yields {{ env('MIX_MY_VAR') }} in the browser.

You cant run {{ }} inside pure .js file

{{ }} is php code and it wont execute in .js file

what you can do is

in .blade file

//something.blade.php

<script>
let my_env_var = "{{ env('MIX_MY_VAR'}}";
</script>
<script src="{{asset('js/something.js')}}"></script>
//my_env_var is available inside it

Hi @fredemagi,

To be sure, are you using Mix? If so, after prefixing your environment variable with MIX_, have you restarted the watch task as well? As per Laravel Documentation, you should do it and then it will be accessible via process.env.MIX_<env_var_name>

If you're not using Mix, you should import a package that loads environment variables in your project, like motdotla/dotenv.

@ERICKPATRICK - Yes, I use the precoded webpack.mix.js that comes with Laravel and have restarted watch:

const mix = require('laravel-mix');

mix.sass('resources/sass/app.scss', 'public/css');

mix.combine(
    [
        'public/js/custom/test.js'
    ], 'public/js/app.js')

mix.browserSync('localhost:8000');

The test variable looks like:

MIX_MY_VAR=1234

And the sample js code:

var max_val = process.env.MIX_MY_VAR;
    console.log(max_val);

It fails with: "Uncaught ReferenceError: process is not defined".

Don't access .env variables directly.

First bring it into config.

The js-file is pure jQuery code, starting the document with:

$(function()
{
});

It gets combined with other js-files to a single one. However, it cannot seem to find the process object, whihk I don't understand. Shouldn't it be global in js?

@FREDEMAGI - Ok, I think I got your problem.

see your webpack.mix.js file:

mix.combine(
    [
        'public/js/custom/test.js'
    ], 'public/js/app.js')

The line where you have public/js/custom/test.js seems to be the problem. To be able to use your process.env.MIX_MY_VAR variable, you should have your JS file coming from resources/js folder, not from public.js.

The public/js should be only generated files or files moved by Mix which will not be parsed/compiled. So, your public/js/custom/test.js should actually be at resource/js/custom/test.js, then it will be compiled and your console.log(max_val) will show 1234 as expected.

If this does not happen, could you try sharing with us some more of your project structure/code so we can try to understand and help you in a better way?

@ERICKPATRICK - Now I tried to move the file inside resources/js/test.js with the sample code:

$(function()
{
    console.log(process.env.MIX_MY_VAR);
});

I have tried to restart the watch command and manually run the dev command, but it still cannot seem to find the process object.

The project structure is a standard Laravel project folder structure. I normally place my js code inside the public folder, but in this case I tried to inside the resources. The js code is compiled(combined to a single fine, which happens to reside in public/js and linked to in the html body before end tag.

Do you still have the error? If not, I think it's due to Mix removing console.log for whatever reason (I just saw this behavior in my machine). Try alert(process.env.MIX_MY_VAR).

In theory this should not be problem or whatsoever, but by doing this, I was able to open the compiled file and check that process.env.MIX_MY_VAR was replaced by its value we set in .env. So, instead of checking for process.env.MIX_MY_VAR try looking for 1234

@ERICKPATRICK - Still same issue. I have substituted console.log with alert, but it still complains about Uncaught ReferenceError. Have I done something wrong in the Webpack file? Or doesn't process.env work in a pure js file?

I think I have found the issue. I now tried to do a fresh installation of Laravel and put my js code inside the resources/js folder, and compiled it through the mix.js instead of combining, and it seems to be working.

My question is now what the best workflow is? As it is now I have to include every single js file in the html file like:

 <script type="text/javascript" src="{{ asset('js/file1.js') }}"></script>
 <script type="text/javascript" src="{{ asset('js/file2.js') }}"></script>

I want all my custom made js files to be compiled AND combined into 1, so that I only have to include 1. How should the webpack file look like?