Environment Variables

Environment variables are a secure way to store and manage configuration data or sensitive information, such as API keys, database connection strings, or environment-specific settings. In React.js, environment variables are defined in .env files and can be accessed during build time or runtime, depending on their prefix.

1. Setting Up Environment Variables

The template already comes with a .env file located in the root directory. Modify these variables as needed. Example:

REACT_APP_API_BASE_URL=https://api.example.com
DATABASE_URL=postgres://user:password@localhost:5432/db_name

2. Understanding Environment Variable Types

• Private Variables: Variables prefixed with REACT_APP_ are exposed to the browser. These should not include sensitive data.

3. Accessing Environment Variables

Access public variables in your React components:

import { useEffect } from 'react';
const apiBaseUrl = process.env.REACT_APP_API_BASE_URL;

export default function ShowApiUrl() {
    useEffect(() => {
        console.log('API Base URL:', apiBaseUrl);
    }, []);

    return 
API URL: {apiBaseUrl}
;
}