# Best way to Handle Environment Variables

In the past, I would add sensitive information directly to the code, which was easy but not recommended. As the application and team expanded, it became necessary to manage environment variables. However, it became challenging to handle application configurations across different environments (development, staging, production) without including sensitive information in the codebase.

Currently, I mainly work on VueJs projects, so the examples in this blog are based on Vue syntax and expressions.

## **Understanding .env Files**

Vue CLI projects can use `.env` files to specify environment variables, which are stored in the root of the project. Different .env files can be used for various environments:

* .env: Default
    
* .env.local: Used in all cases except during testing.
    
* .env.\[mode\]: Used for a specific mode.
    
* .env.\[mode\].local: Used for a specific mode but not tracked by git.
    

Variables beginning with VUE\_APP\_ will be included in the client bundle with `webpack.DefinePlugin`, allowing you to access them in your application code.

```yaml
console.log(process.env.VUE_APP_TITLE);
```

## **Creating Environment Variables**

Lets create .env files in your project root.

For example,

**For development**, you might create a file named `.env.development` with the following content:

```yaml
VUE_APP_API_URL=https://dev.api.example.com
VUE_APP_TITLE=My Vue App (Development)
```

**For production**, you might have a `.env.production` file:

```yaml
VUE_APP_API_URL=https://api.example.com 
VUE_APP_TITLE=My Vue App
```

## **Accessing Environment Variables in Your Application**

Anywhere in your Vue.js application, you can access these variables using process.env.VUE\_APP\_XXX, where XXX is your variable name.

For example:

```javascript
created() {
  console.log(process.env.VUE_APP_API_URL); // Use the API URL based on the environment
}
```

## **Using Environment Variables in Static Files**

Since environment variables are embedded into the build, using them in static files like HTML is not straightforward. However, you can access them in your Vue components and then bind them to the attributes you need in your templates.

## **Mode and Environment Loading**

Vue CLI 3 and later support specifying the mode in which you're running the build or serve commands. Modes can be used to load specific .env files. For example, running `vue-cli-service serve --mode development` will prioritize loading `.env.development` and `.env.development.local` files.

## **Best Practices**

* **Do Not Store Sensitive Information:** Since the environment variables are embedded into the client-side bundle, they can be accessed by anyone using your application. Do not store sensitive information like passwords or secret keys in these variables.
    
* **Version Control:** It's common practice to exclude local environment files (.env.local, .env.\*.local) from version control by adding them to .gitignore. You might include example .env files (like .env.example) in your repository as a template for others.
    
* **Consistency Across Environments:** Ensure that all the environments define the same set of variables, even if their values differ, to avoid runtime errors due to undefined variables.
    

By following these guidelines and practices, you can effectively manage and use environment variables in your Vue.js projects, keeping your application configurations flexible and secure across different environments.

---

Also, Let's delve into more scenarios where handling environment variables in Vue.js can be particularly beneficial, illustrating the flexibility and security they offer in application development and deployment.

### **Scenario 1: Different API Endpoints**

Different API Endpoints Imagine you're developing a Vue.js application that interacts with a backend API. During development, you want your application to hit a development server. However, in production, it should use the production API. Environment variables allow you to switch these endpoints seamlessly without code changes:

`.env.development`

```yaml
VUE_APP_API_ENDPOINT=https://dev.example.com/api
```

`.env.production`

```yaml
VUE_APP_API_ENDPOINT=https://example.com/api
```

In your Vue.js application, you can access the API endpoint like so:

```javascript
axios.get(process.env.VUE_APP_API_ENDPOINT + '/users')
     .then(response => { 
          // Handle response 
     });
```

### **Scenario 2: Feature Flags**

You're rolling out a new feature in your application and want to enable it selectively across different environments or even toggle it for testing. Environment variables can act as feature flags:

`.env.local`

```yaml
VUE_APP_NEW_FEATURE_ENABLED=false
```

`.env.production`

```yaml
VUE_APP_NEW_FEATURE_ENABLED=true
```

In your application, you can conditionally render components or enable functionality based on this flag:

```javascript
<template>
  <div>
    <NewFeature v-if="isNewFeatureEnabled" />
  </div>
</template>

<script>
export default {
  computed: {
    isNewFeatureEnabled() {
      return process.env.VUE_APP_NEW_FEATURE_ENABLED === 'true';
    }
  }
}
</script>
```

### **Scenario 3: Analytics and Third-party Integrations**

Your application might use different keys or IDs for analytics and third-party services across environments to separate development and production data:

`.env.development`

```yaml
VUE_APP_GOOGLE_ANALYTICS_ID=UA-XXXXXX-2
```

`.env.production`

```yaml
VUE_APP_GOOGLE_ANALYTICS_ID=UA-XXXXXX-1
```

Initializing the analytics library with the appropriate ID is straightforward:

```javascript
if (process.env.VUE_APP_GOOGLE_ANALYTICS_ID) { 
   initGoogleAnalytics(process.env.VUE_APP_GOOGLE_ANALYTICS_ID); 
}
```

### **Scenario 4: Application Theming or Branding**

Suppose your Vue.js application needs to support multiple themes or branding options based on the client or deployment target. Environment variables can dynamically set these themes:

`.env.clientA`

```yaml
VUE_APP_THEME=dark 
VUE_APP_LOGO_URL=/assets/logo-clientA.png
```

`.env.clientB`

```yaml
VUE_APP_THEME=light
VUE_APP_LOGO_URL=/assets/logo-clientB.png
```

Then, use these variables in your components to adjust the theme or display the correct logo dynamically.

### **Scenario 5: Build Timestamps**

For debugging or informational purposes, you might want to include a build timestamp in your application. This can be achieved by setting an environment variable in your build script:

`In package.json scripts`

```yaml
"scripts": { "build": "VUE_APP_BUILD_TIME=$(date) vue-cli-service build" }
```

Then, you can display this build time somewhere in your application, such as in the footer or about page.

---

## **Conclusion**

These scenarios illustrate the versatility of using environment variables in Vue.js applications. They enable you to manage different configurations and behaviors across environments efficiently, making your development process smoother and your applications more secure and adaptable.

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. 😎😎

Till then, Keep on Hacking, Cheers

Happy coding! 🚀👩‍💻👨‍💻