Quick Guide: Using Axios with Environment Variables in Vite

Hey folks! 👋

So, I ran into a small issue recently while setting up Axios in a Vite-powered React app. It’s one of those things that took me a minute to figure out, and I thought I’d share the fix with you all so you can avoid the same confusion. Here’s a quick guide on how to get your environment variables working properly in Vite!

The Problem:

If you’ve worked with Create React App (CRA) before, you’re probably used to accessing environment variables like this: process.env.REACT_APP_API_URL. But in Vite, things are a little different, and if you try using process.env like you would in CRA, you’ll hit this frustrating error:

Uncaught ReferenceError: process is not defined

Yikes, right? Don’t worry, though—it’s easy to fix once you know what’s going on.

The Solution:

1. Update Your .env File

In Vite, you can’t use the REACT_APP_ prefix like you would in CRA. Instead, Vite expects environment variables to start with VITE_. So, in your .env file, you’d write something like:

VITE_API_URL=http://localhost:8000

This tells Vite that this environment variable is important, and it needs to be accessible throughout your app.

2. Access Environment Variables in Code

Now that you’ve got your environment variable set up, you’ll want to access it in your app. Here’s the thing: instead of using process.env, Vite requires you to use import.meta.env. So to grab your API URL, you’d do something like this:

const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:8000';

This is the proper way to access environment variables in Vite, and once you get the hang of it, it’s pretty smooth sailing!

3. Restart Your Dev Server

After updating your .env file and making changes, don’t forget to restart your Vite dev server. This ensures that the new environment variables are properly loaded and applied:

npm run dev

Why This Matters

You might be thinking, “But why can’t I just use process.env like before?” The key difference is that Vite has its own way of handling environment variables, which is a bit different from CRA. Understanding this will save you a ton of time and frustration. Once you’re familiar with import.meta.env and the VITE_ prefix, you’ll have a much smoother experience when working with Vite.

Wrapping Up

So, to quickly recap:

• Use the VITE_ prefix for your environment variables in Vite.

• Access them using import.meta.env (not process.env).

• And don’t forget to restart your dev server after making changes.

And that’s all there is to it! With just these simple steps, you’ll be good to go with environment variables in your Vite-powered app. Hopefully, this helps, and if you’ve got any questions, feel free to drop them below. Happy coding! 🚀