How to access the laravel .env variables inside javascript

How to access the laravel .env variables inside javascript

Written by TechvBlogs on Apr 14th, 2022 ・ Views ・ Report Post

TechvBlogs Visit User Profile
Table of contents

What is .env?

Its environment variables file. In simple terms, it is a variable text file. In this file we set a variable with a value that you wouldn't want to share with anyone, the purpose of the file is kept secret and secure because in.

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 application's 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 the behavior of our application in these different environments.

Please note that most information about the Laravel framework can be found in the official documentation. This article offers a little more detail in some cases.

In the Laravel framework, this place will be in the resources/js/bootstrap.js file. If you open this file for the first time, you can see the next lines:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

In this very place, we can add any common header that we need (just like the X-Requested-With header). So, let’s do that and appropriate headers add here for the Authorization Bearer token and for the accepted content-type (for example):

window.axios.defaults.headers.common['Authorization'] = 'Bearer <TOKEN>';
window.axios.defaults.headers.common['Accept'] = 'application/json';

But… it is so weird and not secure to keep the token in this file. So, yep, we could get this token from the environment variable. If you use a laravel-mixer for your project, you can achieve it easily.

First of all, you can add to your .env file a new variable, API_TOKEN for example:

API_TOKEN=9ccc75raaa5-3easdsadd2-asdsad-8sdsdsb0-asdfrwedasd

We can always use this variable in our project on the backend. But if you want to use it on the frontend — just add something like that in this very file:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
MIX_API_TOKEN="${API_TOKEN}"

And now you can use this variable in your JS files like process.env.MIX_API_TOKEN. So we need to change an appropriate header in the bootstrap.js file:

window.axios.defaults.headers.common['Authorization'] = `Bearer ${process.env.MIX_API_TOKEN}`;

That’s it.

Thank you for reading this blog.

Comments (0)