Variables de entorno y modos

There are two concepts that we need to understand that can be quite useful: 1. Environment variables, they are external variables to our project and are nothing more than a name assigned to a value. 2. Modes, as we have seen in previous classes, there are two, the development mode (dev) and the production mode (build).

Modes

Let's continue editing our vite.config.js file, but first we must understand that in our function we are receiving some arguments, among them command and mode, command is the command that we use to execute this file and mode tells us if we are in production mode or development mode.

``` import { defineConfig } from "vite";

export default defineConfig(({ command, mode }) => { const port = 8080;

console.log(command: ${command} and mode: ${mode});

return { server: { port }, }; }; }); ```

If we run with dev (npm run dev) we will see that you are using the serve command and the development mode:command: serve and mode: development

But if we run with build (npm run build) the command would be build and the mode would be production:command: build and mode: production.

This can be useful because we can implement a logic depending on the mode we are in, in the following very basic example a message will be printed depending on the mode.

``` import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ command, mode }) => { const port = 8080;

console.log(command: ${command} and mode: ${mode});

if (command === "development") { console.log("Development mode"); } else { console.log("Production mode"); }

return { server: { port }, }; }; }); ```

Environment variables

To access to our environment variables we must first create in the root of the project a file with the name .env and inside this we can create the environment variables that we need.

Structure of an environment variable

The structure of the environment variables is as follows: VITE_VARIABLE_NAME=value, as you will be able to see it is necessary that it begins with the word VITE, so that later it can be recognized.

VITE_NAME="vite demo".

Using environment variables

In the previous example we created an environment variable with the name VITE_NAME, which will store the name of our project. Now, to use it inside vite.config.js we must use loadEnv, a function that is imported from vite and gives us all the variables in the .env file.

Keep in mind that it will only deliver the variables that begin with VITE.

About loadEnv

loadEnv receives two parameters, which are:1. The mode we are in (development mode or production mode). This is because our .env file can also have the name of .env.development or .env.production, if we are in production mode it will bring the variables that are in .env.development, if we are in production mode it will bring the variables of .env.production and if none of these files exist it will bring by default the ones of .env. 2. Location to access via Nodejs to read the file. To access the location we can use process.cwd(), a Nodejs function that gives us the project address.

Example

Next we are going to import loadEnv, create a variable with the name env and inside it use the loadEnv function, giving it the necessary parameters.

````import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ command, mode }) => { const port = 8080; const env = loadEnv(mode, process.cwd());

console.log(command: ${command} and mode: ${mode}); console.log("Environment variables:", env);

if (command === "development") { console.log("Development mode"); } else { console.log("Production mode"); }

return { server: { port }, }; }); ```); ```

Finally we will print the variable env and we will see that it gives us in a JSON format the variables of the file .env

Environment variables: { VITE_NAME: 'vite demo' }

Recap

Now you are able to access the environment variables, something very useful for your professional life, and you can also know in which mode you are and which command you are using. I remind you that you can review this section of the Vite documentation if you want to go deeper into the subject.

Contribution created by: Jofay Zhan Segura