Handling Environment Variables in Vite, React, TypeScript Projects!
Tags: vite, react, typescript, environmentvariables
Published: 2023-08-04 22:45:05


---
title: Handling Environment Variables in Vite, React, TypeScript Projects!
description: Learn how to manage different settings for development, staging, and production environments.
tags: Vite,React,TypeScript,EnvironmentVariables
published: true
---


### 〜 Properly Differentiate Between Staging and Production Environments 〜

## Table of Contents
1. [Introduction](#intro)
2. [Setting Up Environment Variables](#setting-env-vars)
3. [Updating npm scripts](#update-npm-scripts)
4. [Using Environment Variables in Vite](#using-env-vars-in-vite)
5. [Ignoring .env Files in Git](#ignoring-env-files-in-git)
6. [Conclusion](#conclusion)

<a id="intro"></a>
## Introduction
When managing a project with Vite, React, TypeScript, you'll often need different settings for different environments such as development, staging, and production. In this article, I'll guide you through setting up environment variables specific to each environment.

<a id="setting-env-vars"></a>
## Setting Up Environment Variables
First, create `.env` files for each environment at the root of your project:

- `.env.development.local`: Set the environment variables for the development environment here.
- `.env.staging.local`: Set the environment variables for the staging environment here.
- `.env.production.local`: Set the environment variables for the production environment here.

In each file, set environment variables prefixed with `VITE_`. For example:

```dotenv
VITE_APP_TITLE="My Cool App"
```

<a id="update-npm-scripts"></a>
## Updating npm scripts
Next, update the `scripts` section of your `package.json`:

```json
"scripts": {
    "dev": "vite --mode development & npm run sv",
    "build:staging": "vite build --mode staging",
    "build:prod": "vite build --mode production",
    "vite": "vite",
    "sv": "php -S localhost:8080",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "api:build": "aspida"
}
```

With this, when you run `npm run dev`, the `.env.development.local` file is loaded. When you run `npm run build:staging`, the `.env.staging.local` file is loaded. And when you run `npm run build:prod`, the `.env.production.local` file is loaded.

<a id="using-env-vars-in-vite"></a>
## Using Environment Variables in Vite
In Vite, you can reference environment variables in your application like `import.meta.env.VITE_APP_TITLE`. Here is a sample code:

```jsx
import React from "react";

const AppTitle = () => (
    <h1>{import.meta.env.VITE_APP_TITLE}</h1>
);

export default AppTitle;
```

<a id="ignoring-env-files-in-git"></a>
## Ignoring .env Files in Git
Finally, exclude these `.env` files from Git versioning. This prevents potential security issues. Add the following line to your `.gitignore` file:

```
.env*.local
```

This excludes all files starting with `.env` and ending with `.local` from versioning.

<a id="conclusion"></a>
## Conclusion
In this article, I explained how to set different environment variables for development, staging, and production environments in Vite, React, TypeScript projects. With this method, you can easily manage different settings for each environment.

---

Thank you for reading! If you have any questions or comments, feel free to leave them in the comment section below.