Setting Variables in JavaScript: process.env

Setting variables vary specified beyond the JavaScript implementation atmosphere.

There’s a collection of atmosphere variables specified by the OS, for instance:

• INDIVIDUAL: the present customer
• HOUSE: the present customer’s residence course
• PWD: the present functioning directory site
• COURSE: directory sites to look to carry out a command

In relation to JavaScript and also Node.js community, you may discover the adhering to variables usual:

• NODE_ENV: figures out if the manuscript runs in advancement or manufacturing setting. Generally takes among the worths: manufacturing, prod, advancement, dev, or examination
• PORT: the port which the running application must be collaborating with (e.g. 3000, 8080, and so on)

Allow’s see just how you can access these atmosphere variables (either OS or Node.js certain) in a JavaScript documents.

1. process.env things

When performing a JavaScript documents as a Node CLI (command line user interface) command, Node produces an unique things process.env which has the atmosphere variables as residential properties.

For instance, allow’s carry out the JavaScript documents / home/dmitri/main. js in the command line:

 celebration
 NODE_ENV= manufacturing node main.js

Where main.js documents has the adhering to code:

 javascript
/// home/dmitri/main. js
 console log( procedure env INDIVIDUAL); // dmitri
 console log( procedure env PWD); /// home/dmitri/
 console log( procedure env NODE_ENV); // manufacturing

process.env.USER is the os customer name that carries out the command. The variable has a worth of ' dmitri' due to the fact that this is my OS customer name.

process.env.PWD has the outright course to the directory site where the carried out documents lies. Considering that the carried out documents course is / home/dmitri/main. js, after that the present functioning directory site course is '/ home/dmitri/'

The over variables are drawn from the atmosphere of the os.

process.env.NODE _ ENV variable amounts to ' manufacturing' This variable, in contrast to the 2 over, is specified by the prefix NODE_ENV= manufacturing of the command NODE_ENV= manufacturing node main.js

If you would love to offer neighborhood defaults to particular atmosphere variables, after that inspect the dotenv task.

2. process.env in an internet browser atmosphere

The atmosphere variables, consisting of process.env, come to manuscripts running in the CLI.

process.env, nevertheless, is not offered in an internet browser atmosphere. The internet browser does not specify process.env

Luckily, subjecting atmosphere variables to the runtime in the internet browser can be done utilizing bundlers. Allow’s see just how it’s done utilizing Vite and also webpack.

2.1 Vite

Vite subjects a predefined collection of variables with import.meta.env things:

• import.meta.env.MODE: is either ' advancement' or ' manufacturing'
• import.meta.env.PROD: is real in manufacturing setting
• import.meta.env.DEV: is real in advancement setting
• import.meta.env.SSR: is a boolean whether the application works on the web server side
• import.meta.env.BASE _ LINK: the base link

In addition to that, Vite can likewise pack variables from env documents. Under the hood, Vite makes use of dotenv Yet you do not need to by hand call anything pertaining to dotenv: Vite does whatever for you.

For instance, having an env documents similar to this:

 celebration

after that you can access this worth in the internet browser throughout runtime import.meta.env.VITE _ MY_VAR, which is mosting likely to be ' worth'

Please keep in mind that Vite subjects openly only variables beginning with VITE _ prefix.

Open Up the demonstration and also see that the variables given by Vite are made on the web page.

Vite has a in-depth overview on just how to access the atmosphere variables.

2.2 webpack

The integrated plugin EnvironmentPlugin subjects atmosphere variables in webpack.

For instance, to subject the NODE_ENV env variable, you can make use of the adhering to setup:

 javascript
// webpack.config.js
 const { EnvironmentPlugin}  =  need(' webpack');
 component exports  = {
  // ...
   plugins: [
    // ...
    new EnvironmentPlugin(['NODE_ENV'])
] 
} 

Open Up the demonstration NODE_ENV variable was subjected by webpack and also its worth is made on the web page.

If NODE_ENV variable is not offered in the atmosphere, the plugin will certainly toss a mistake. Yet you can designate a default worth to a variable utilizing an ordinary JavaScript things (with the worth being the default worth):

 javascript
// webpack.config.js
 const { EnvironmentPlugin}  =  need(' webpack');
 component exports  = {
  // ...
   plugins: [
    // ...
    new EnvironmentPlugin({
      NODE_ENV: 'development'
    })
  ]
} 

With the above setup, if NODE_ENV variable isn’t established, webpack defaults process.env.NODE _ ENV to advancement

3. Final Thought

A JavaScript documents carried out in Node CLI can access the atmosphere variables utilizing the unique things process.env

For instance, process.env.USER has the customer name that carries out the manuscript.

The atmosphere variables are not offered throughout runtime in an internet browser. Yet modern-day bundlers like Vite and also webpack can subject particular variables.

For instance, Vite subjects the present running setting of the application utilizing import.meta.env.MODE In webpack EnvironmentPlugin allows you subject the needed variables.