Setting up different Environments in Vite Projects
Tags: vite, npm, javascript, webdev
Published: 2023-09-13 14:01:47

## 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:

![Initial Prject Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7jbysq9h4u1lp8hw5sf.png)

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.
![Initial Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4wry066a5yxz9ikds6j.png)
😒 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 .<env_name> to it. Like:

```
env.production
env.uat
env.staging
```
Now your project folder structure will look something like this

![Project structure with env files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bky1lmd74z0cmkys6eks.png)

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!

![Initial APP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1m2ebes4m45dx0f62pq.png)

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'" />`.
6. And You are done. Your homepage will look like this.

![Home Page with ENV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6g4btvtg77tmluygj4w.png)


## Building the project

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

![Production Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awyfzbhgu4n8p56ff0dl.png) 

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

![Production Build Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dc7n3mr1evit8mbk5vx.png)


## 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=staging`for **windows**
2. `npm run build`
![Staging Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tii4c02m4u3t0xiwq9wr.png)
3. And preview `npm run build`.
![Page with Staging Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77q8gtthaev1wo5mifz4.png)


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 🎉