Setting up different Environments in Vite Projects

Trying to use different environments in Vite?

Recently I have faced a situation where I was to build my Vue3 project for different environments using Vite. I used to do that in webpack but in vite, it is hard to figure out!!!

Let's do one thing at a time!

Project Setup (I know you are an expert, you can skip it)

I was using Vue3 composition api with TS, so let's create one with same configuration

Enter command npm create vue@latest, and choose the options as mentioned below in the screenshot:

Now do

• cd <your_project_name>
• npm i

That is all you need for the initial setup, now you can open the project in some code editior (I am using VS Code).

And you will see a folder structure like below.

😒 Hey!!! where are my environment files???
Actually by default we don't get any! But we can create few. All you have to do is, create a .env file in the project root folder and append . to it. Like:

env.production
env.uat
env.staging

Now your project folder structure will look something like this

Now we have environment files 😍, but I don't have any environment variables 🤦‍♂️.

Let's create one! But remember, environment variables must start with a keyword, and they vary from frameworl to framework (or library). In our case I am buing Vue3, so my environment variables must start with VITE_USER_.

That being said, I am creating VITE_USER_DEPLOYMENT_INSTANCE_TYPE

So it will have following values in files:

1. env.staging => VITE_USER_DEPLOYMENT_INSTANCE_TYPE=STAGING
2. env.uat => VITE_USER_DEPLOYMENT_INSTANCE_TYPE=UAT
3. env.production => VITE_USER_DEPLOYMENT_INSTANCE_TYPE=PRODUCTION

But wait a minute? Where are we using them??? Let's use them.

First Let's start your dev server npm run dev, once dev server is up and running you can see your app running on http://localhost:5173/, and this is what you will see!

Let's replace

You Did it!

with the value of VITE_USER_DEPLOYMENT_INSTANCE_TYPE.

So in vue3 (composition API) if you want to access environment, we do it using import.meta.env. Let's dig in!!!

1. Open file App.vue
2. Inside the script tag just write const env = import.meta.env;
3. Find this line in App.vue <HelloWorld msg="You did it!" />
4. And replace it with <HelloWorld :msg="env.VITE_USER_DEPLOYMENT_INSTANCE_TYPE" />
5. 😨 And I don't see anything in browser. And that is because we don't have env.development, so either we can create env.development file and add VITE_USER_DEPLOYMENT_INSTANCE_TYPE=DEVELOPMENT or use Nullish coalescing operator .

I am using Nullish Coalescing Operator => (Basically use provided default value if the left hand side is null or undefined) so replace the line with <HelloWorld :msg="env.VITE_USER_DEPLOYMENT_INSTANCE_TYPE ?? 'DEVELOPMENT'" />.

1. And You are done. Your homepage will look like this.

Building the project

npm run build, however it builds for production by default.

Let's see the preview, do npm run preview.

Build for staging or uat.

The process is simple, you have to replace your build-only script in package.json with this "build-only": "NODE_ENV=${NODE_ENV:-production} && vite build --mode $NODE_ENV"
in linux and mac or "build-only": "setx NODE_ENV production && vite build --mode %NODE_ENV%" in windows.

So here we are checking if the NODE_ENV is set, and if not then use production as default value,a nd then we are passing NODE_ENV as mode to the vite build

And we are done!

Now let's build for staging environment,

1. export NODE_ENV=staging for linux and Mac or set NODE_ENV=stagingfor windows
2. npm run build
3. And preview npm run build.

And that is it! Now this is the one of the solutions I have found, but if you have anything better, please let me know in the comments!!!

Happy coding 🎉