How to Get Environment Variable in Laravel React JS?

Hi,

This article will provide examples of laravel react js environment variables. I would like to share with you how to get env variable in laravel react vite. if you want to see example of how to get environment variable in react js laravel then you are the right place. we will help you to give an example of laravel react import.meta.env. Alright, let’s dive into the steps.

Laravel 9 added Vite for React JS and Vue JS front-end development and if you need to add environment variable in .env file and need to access .env variable in react js app then i will help you how to get environment variable in laravel react js app. Laravel added import.meta.env to access all .env variable in js file.

So, let's see the below solution with an example:

Add Environment Variable:

Here, we will add "VITE_APP_NAME" environment variable with title. so let's add in .env file.

.env

VITE_APP_NAME="Vite React Demo Title"

Access Environment Variable:

Now, we will access "VITE_APP_NAME" environment variable with title in react js file. let's see the below solution with an example:

Solution:

import.meta.env.VITE_APP_NAME;

Example Code:

import './bootstrap';
import '../css/app.css';
  
import React from 'react';
import { render } from 'react-dom';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
  
const appName = import.meta.env.VITE_APP_NAME;
  
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});
  
InertiaProgress.init({ color: '#4B5563' });

I hope it can help you...