DEV Community

Cover image for Mastering Environment Variables in Vite+TypeScript+React
HidetoshiYanagisawa
HidetoshiYanagisawa

Posted on

Mastering Environment Variables in Vite+TypeScript+React

#vite #typescript #react #environmentvariables

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
Enter fullscreen mode Exit fullscreen mode
  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"
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode
  1. In the .env.production file, set the environment variables for your production environment. For example: 
VITE_APP_TITLE=My App (Production)
Enter fullscreen mode Exit fullscreen mode
  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)"
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (4)

Collapse
 
wesleycheek profile image
Wesley Cheek • • Edited

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!

Collapse
 
kelvink96 profile image
Kelvin Kiptum Kiprop • • Edited

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

Collapse
 
irfanbakhtiar profile image
M Irfan Bakhtiar •

Thanks for sharing.

Collapse
 
mikromajor profile image
Alex Solianyk • • Edited

God bless you for that:
Resolving 'Property 'env' does not exist on type 'ImportMeta''!!!