How to Get Environment Variables in Laravel React

Environment variables store your app settings like API keys and URLs. You can use them in Laravel React apps in a few ways.

What are Environment Variables

Environment variables go in your .env file. They have different values for development and production.

Method 1: Laravel Mix Way

Put variables in .env with MIX_ at the start:

MIX_APP_NAME=MyApp
MIX_API_URL=https://api.example.com
MIX_STRIPE_KEY=pk_test_123456

Then use them in React:

function MyComponent() {
    const appName = process.env.MIX_APP_NAME;
    const apiUrl = process.env.MIX_API_URL;
    
    return (
        <div>
            <h1>{appName}</h1>
            <p>API: {apiUrl}</p>
        </div>
    );
}

Method 2: Vite Way

Put variables in .env with VITE_ at the start:

VITE_APP_NAME=MyApp
VITE_API_URL=https://api.example.com
VITE_STRIPE_KEY=pk_test_123456

Use them in React like this:

function MyComponent() {
    const appName = import.meta.env.VITE_APP_NAME;
    const apiUrl = import.meta.env.VITE_API_URL;
    
    return (
        <div>
            <h1>{appName}</h1>
            <p>API: {apiUrl}</p>
        </div>
    );
}

Method 3: Get from Laravel Backend

Make a controller in Laravel:

<?php
namespace App\Http\Controllers;

class ConfigController extends Controller
{
    public function getConfig()
    {
        return response()->json([
            'app_name' => env('APP_NAME'),
            'api_url' => env('API_URL'),
        ]);
    }
}

Add a route:

Route::get('/config', [ConfigController::class, 'getConfig']);

Get data in React:

function MyComponent() {
    const [config, setConfig] = useState(null);
    
    useEffect(() => {
        fetch('/api/config')
            .then(response => response.json())
            .then(data => setConfig(data));
    }, []);
    
    if (!config) return <div>Loading...</div>;
    
    return (
        <div>
            <h1>{config.app_name}</h1>
            <p>API: {config.api_url}</p>
        </div>
    );
}

Stay Safe

Don’t put secret stuff in frontend variables. Only put safe things in MIX_ or VITE_ variables. Use Laravel backend for secret things.

Safe stuff:

VITE_APP_NAME=MyApp
VITE_STRIPE_PUBLIC_KEY=pk_
MIX_GOOGLE_MAPS_KEY=AIza

Don’t do this:

VITE_DB_PASSWORD=secret123
VITE_JWT_SECRET=mysecret
MIX_STRIPE_SECRET=sk_live

How to Set Up

1. Put variables in .env file
2. Use MIX_ for Laravel Mix or VITE_ for Vite
3. Get them in React with process.env.MIX_NAME or import.meta.env.VITE_NAME
4. Restart server after adding new variables

Fix Common Issues

Variables don’t work – Check if you used MIX_ or VITE_ and restart server

Works in dev but not production – Check your build settings

TypeScript errors – Make type definitions

Summary

Environment variables help you manage settings in Laravel React apps. Here’s what to remember:

• Use VITE_ for new Laravel versions
• Use MIX_ for old Laravel versions
• Use Laravel backend for secret data
• Don’t put secrets in frontend
• Restart server after changes

Pick what works for your Laravel version. Start with VITE_ or MIX_ for basic stuff. Use Laravel backend for secret stuff.

This way you can handle different settings for development and production.