Mastering Environment Variables in Vite+TypeScript+React

Table of Contents

1. Introduction
2. Setting up Environment Variables in Vite
3. Different Environment Variables for Local and Production Environment
4. Resolving 'Property 'env' does not exist on type 'ImportMeta''
5. Conclusion

1. Introduction

Hello everyone! Today, we'll be discussing how to utilize environment variables in a Vite + TypeScript + React setup, as well as how to resolve some common issues that may arise.

2. Setting up Environment Variables in Vite

First, let's look at the basic steps to set up environment variables in Vite.

1. Create a .env file in the root directory of your project.
2. Set your environment variables in the .env file. For example:

VITE_APP_TITLE=My App

1. Access the environment variable in your TypeScript and React code with import.meta.env.VITE_APP_TITLE:

console.log(import.meta.env.VITE_APP_TITLE); // "My App"

3. Different Environment Variables for Local and Production Environment

Next, we'll see how to set up different environment variables for local and production environments.

1. Create two files in the root directory of your project: .env.development and .env.production.
2. In the .env.development file, set the environment variables for your local development environment. For example:

VITE_APP_TITLE=My App (Development)

1. In the .env.production file, set the environment variables for your production environment. For example:

VITE_APP_TITLE=My App (Production)

1. Access the environment variable in your TypeScript and React code with import.meta.env.VITE_APP_TITLE:

console.log(import.meta.env.VITE_APP_TITLE); // "My App (Development)" or "My App (Production)"

4. Resolving 'Property 'env' does not exist on type 'ImportMeta''

When using environment variables in Vite, you may encounter an error saying "Property 'env' does not exist on type 'ImportMeta'". To resolve this issue, follow these steps:

1. Create a file named vite-env.d.ts in the root directory of your project.
2. Add the following content to this file:

/// <reference types="vite/client" />

With these changes, TypeScript will recognize the type of import.meta.env, and the error should be resolved.

5. Conclusion

In this guide, we discussed how to set up and use environment variables in a Vite + TypeScript + React environment, and how to troubleshoot common issues. Vite is a powerful tool for making frontend development more efficient, but its configuration and error messages can sometimes be challenging to understand. Once you understand them, however, you can leverage its flexibility and power to the fullest.

Happy Coding!

Comments

[Wesley Cheek]

Thanks for the straightforward guide! Actually #4 is setup by create-vue but d.ts files are commonly added to .gitignore - Make sure to include them if you're building remotely in a CICD setup!

[Kelvin Kiptum Kiprop]

Thanks for sharing this, especially #4, it's been a pain for a while in a project I have been working on.