Using Environment Variables in JavaScript

With Laravel Elixir

About .env

While working on your Laravel project, you may want to have some dynamic behavior based on your environment. For example, you want to set the database connection settings, or you want to specify the applications URL.

Laravels way of dealing with this, is by providing a .env file. This file can contain any variable, which can hold different values on all your environments (dev, test, live, etc..), and can be read by Laravel. This gives a very convenient way of manipulating our applications behavior on these different environments.

How about JavaScript?

Sometimes you wish to use a variable from your .env file in JavaScript. Maybe you want to redirect to your applications URL, or you want to set a debug value for a JavaScript library for example.

In this case there are a few options to consider:

Global variable

The most straight-away approach is to define the value in a template file, making a global variable, which we can read from our JavaScript file.

This will look something like this in our template file:

<script>
 window.myVar = '{{ env('MY_VAR') }}';
</script>

Note: this snippet must be included before you access this variable, so I recommend that you put this in your head, or at least somewhere before your JS-include.

Also, in Laravel it is recommended that you use the config helper instead of accessing env directly.

Now you can use ‘myVar’ in your JavaScript and it will contain the value of your PHP code.

This is a nice and quick way of handling env variables in JavaScript, however this will not work if you try to include your JavaScript file on a different website, that doesn’t include the code snippet to set the value of the variable. This may be the case if you are working on a widget that can be included on multiple websites, or want to share your JavaScript with another applications, for example.

Compiling variables

The most clean way of dealing with this would be by compiling our variables directly to JavaScript. With this we can use a ‘placeholder’ in our JavaScript file, and as we compile the code, the placeholder will be replaced with the actual value of our .env file value at that time. This is great if you are already using Laravel Elixir / Gulp to compile your JavaScript code.

I found this nice package that can pass variables to the process.env variables of Webpack, so you can simple access them by referencing process.env.myVar in your JavaScript. With this knowledge I figured that we could simple read out our whole .env file en pass it to Webpack, awesome :).

To make things easy for you, I wrapped this up in a nice, simple package which you can include in your Gulpfile (if you are using Laravel Elixir and Webpack).

Installation instructions to get you started on GitHub: github.com/appstract/laravel-elixir-env

I hope this will make it clearer for you when to use which option to access your env variables in JavaScript.

If you have any questions or feedback, please let met know.

Happy programming!