Vite JS Tutorial: Working with Environment Variables in Production

Welcome back, coders! Today, we're diving into an essential topic for production-ready applications: Environment Variables in Vite JS. Let's get started!

What are Environment Variables?

Environment Variables are user-defined variables that store data needed to configure an application. They are crucial for managing sensitive information like API keys, database credentials, and configuration settings across different environments (development, testing, production). 💡 Pro Tip: Using environment variables helps keep sensitive data out of code repositories and config files.

Setting Up Environment Variables in Vite

Vite provides a built-in plugin for working with environment variables called vite-plugin-env. Let's see how to set it up.

Install the plugin:

bash

npm install vite-plugin-env --save-dev

Add the plugin to the vite.config.js file:

javascript

import { defineConfig } from 'vite'
import env from 'vite-plugin-env'

export default defineConfig({
  plugins: [env()]
})

Now, we can define our environment variables in a .env file in the project root:

bash

API_KEY=your_api_key
DATABASE_URL=your_database_url

Accessing Environment Variables

To access the environment variables in your JavaScript code, you can use the import.meta.env object:

javascript

import { API_KEY, DATABASE_URL } from '$env/dynamic'

console.log(API_KEY) // your_api_key
console.log(DATABASE_URL) // your_database_url

📝 Note: Vite will replace these variables in the output bundle with their respective values.

Handling Different Environments

Vite allows us to create separate .env files for different environments (e.g., .env.development, .env.production) and load the appropriate file based on the environment the app is running in. To achieve this, you need to use the import.meta.env.MODE property:

javascript

import { API_KEY, DATABASE_URL } from `$env/${import.meta.env.MODE}`

Now, in your vite.config.js, you can specify the environment:

javascript

export default defineConfig({
  server: {
    port: 3000,
    strictPort: true,
    host: 'localhost',
    envDir: './',
    // Set the environment to development by default
    env: {
      NODE_ENV: 'development'
    }
  },
  plugins: [env()]
})

Quiz Time 🎯

Wrapping Up

In this tutorial, we learned how to work with environment variables in Vite JS. This is an essential skill for building production-ready applications and managing sensitive data securely. Happy coding! 👋

Keep in mind that you can find more detailed content on environment variables and other topics on CodeYourCraft. Stay tuned for more tutorials!

📝 Note: If you're curious about how to handle environment variables in other frontend frameworks like React, Next.js, and Angular, be sure to check out CodeYourCraft for comprehensive tutorials on these topics as well!