WORKING WITH .ENV IN FRONTEND

CREATE-REACT-APP BUNDLER

In Create React App (CRA), the .env files are used to set environment variables during the build process. These files are useful for configuring various aspects of your React application based on the environment (development, production, etc.). The environment variables defined in these files can be accessed in your React components.

Here's a brief overview of how .env files work in Create React App:

1. File Naming Convention:

   • .env: This file contains default environment variables.

   • .env.development: Environment variables specific to the development environment.

   • .env.production: Environment variables specific to the production environment.

2. Variable Access:

   • In your React components or other parts of your code, you can access these variables using process.env.REACT_APP_VARIABLE_NAME.

3. Example:

   • Let's say you have a variable named REACT_APP_API_URL defined in your .env file.

   • In your code, you can access it like this:

       const apiUrl = process.env.REACT_APP_API_URL;
     

4. Handling API Keys and Secrets:

   • Environment variables are useful for storing API keys or other sensitive information without exposing them in your code repository.

5. Usage in Scripts:

   • You can use environment-specific scripts in your package.json. For example:

       "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
         "start:dev": "react-scripts start --env=development",
         "start:prod": "react-scripts start --env=production"
       }
     

     Then, in your .env.development and .env.production files, you can set environment-specific variables.

Remember to restart the development server (npm start) after making changes to the .env files for the changes to take effect.

Keep in mind that environment variables starting with REACT_APP_ are automatically embedded into the build by Create React App. Other variables may not be embedded in the build.

Always be cautious about what information you store in environment variables, especially when it comes to sensitive data.

VITE BUNDLER

In the context of the Vite bundler, which is a build tool for web development, the use of a .env file is common for managing environment variables. Vite supports the use of environment variables through the .env files, similar to other build tools like Create React App.

Here's a brief overview:

1. Create a .env File: In the root of your Vite project, create a file named .env. You can create different .env files for different environments (e.g., .env.development, .env.production) if needed.

2. Define Variables: Inside the .env file, you can define your environment variables. For example:

    VITE_API_KEY=your-api-key
    VITE_BASE_URL=https://api.example.com
   

3. Access in Code: In your Vite project, you can access these variables in your code using the import.meta.env object. For example:

    const apiKey = import.meta.env.VITE_API_KEY;
    const apiUrl = import.meta.env.VITE_BASE_URL;
   

4. Usage in Configuration: You can also use these variables in your Vite configuration files, such as vite.config.js: [OPTIONAL]

    export default {
      define: {
        'process.env': {
          VITE_API_KEY: import.meta.env.VITE_API_KEY,
          VITE_BASE_URL: import.meta.env.VITE_BASE_URL,
        },
      },
    };
   

   This allows you to use these variables during the build process.

5. Use gitignore

   Make sure not to commit sensitive information (like API keys) to version control, and consider using environment-specific .env files for better organization.

Remember to restart your Vite server whenever you make changes to the .env file. Vite automatically loads the variables from the .env files when the development server starts. For production builds, the values are embedded during the build process.