Open In App

Manage Staging Environments in ElectronJS

Improve
Improve
Like Article
Like
Save
Share
Report

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

In a complex or an enterprise desktop application, the developers need different staging environments to test and deploy the application. Depending upon the scope of the application, multiple staging environments are set up to test and check the application before it is finally made available to the end-user. The final staging environment where the application is deployed and made available to the public is known as Production. When the application development is finished or a new feature is added to the application, then it is usually deployed in the Development staging environment. In the Development environment, the developers perform basic unit testing and see the new features of the application in action. Depending upon the enterprise, there can be several other staging environments as well such as QA (Quality Assurance), Sandbox, Pre-Production, etc before the application finally reaches the production stage. Every staging environment has a specific purpose within the application life-cycle. For example, in the QA environment, the application undergoes Integration Testing and Regression Testing. In the Pre-Production environment, the application undergoes performance and load-testing. Once the application passes through all these steps, it can finally be deployed in the production environment where it is made available to the audience. Another advantage of these staging environments is that developers can enable useful utility and debugging features within the application which should not be visible in the production stage. This helps in finding bugs and evaluating the performance of the application. 

There are several ways by which we can enable these staging environments within the Electron application. We already know that Electron supports the global NodeJS process object, which provides us access to the environment variables specifically the NODE_ENV. We can define the staging environment via this property of process object. For more detailed information on the process object and NODE_ENV.

Another way to define the staging environment is to use Environment Variables such as ELECTRON_ENV. Electron supports a number of Environment Variables, and they are also classified into Production and Development variables. For more detailed information on the environment variables.

The problem is, however, that some of these Environment variables are not supported across all OS platforms. Hence, there needs to be a way by which we can distinguish between the different staging environments that work on all OS platforms and is not complex or require configuration changes. This can be achieved by using the electron-is-dev external npm package. We are going to explain the differences between the different staging environments in an Electron application using this external npm package. 

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

  • Project Structure:

Project Structure

Example: Follow the Steps given in Dynamic Styling in ElectronJS to set up the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. We will continue building our application using the same code base. Additionally, install electron-is-dev package using npm. The main purpose of this package is to simply detect if the Electron application is running the DEVELOPMENT or the PRODUCTION Environment. For more Information on electron-is-dev, Refer the link: https://www.npmjs.com/package/electron-is-dev

npm install electron-is-dev --save

Also, perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. The basic steps required to set up the Electron application remain the same. 
package.json: 

{
  "name": "electron-stage",
  "version": "1.0.0",
  "description": "Manage Staging Environments in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-is-dev": "^1.2.0"
  }
}

Output:  

Manage Staging Environments in Electron: As mentioned above, this package is simply used to check if the Electron is running in the development environment or not. This is extremely useful for adding debugging and utility features such as logging, making code generic, etc. This package can be used directly in the Main Process and the Renderer Processes of the application. This package requires Electron 3+ to work correctly. Before we jump into the code, we would like to make certain changes to the main.js file of the application. 
In the main.js file, comment out the lines: 

  • main.js:

Javascript




Open the DevTools.
win.webContents.openDevTools()


  • index.js: We will activate Chrome DevTools from the Renderer Process i.e. the index.js file only if the application is running in Development mode.

Javascript




const electron = require('electron');
// Importing BrowserWindow using Electron Remote
const BrowserWindow = electron.remote.BrowserWindow;
 
const isDev = require('electron-is-dev');
let win = BrowserWindow.getFocusedWindow();
 
if (isDev) {
    console.log('Running in Development Environment');
    win.webContents.openDevTools();
} else {
    console.log('Running in Production Environment');
}


Explanation: By default, the application is started in the Development staging environment. The electron-is-dev npm package returns a Boolean value stating whether the application is running in development or production mode. By default, the value returned is true. In the above code, we have activated the Chrome DevTools only in the development mode using the Instance method openDevTools() of the webContents Property of the BrowserWindow object. 

Output: 

Here the question arises that How are we supposed to activate the Production staging environment in the Electron application. The electron-is-dev npm package should return false or undefined stating that the application is running in production mode and the Chrome DevTools window should not be activated upon application startup. We can toggle between the different environments using the ELECTRON_IS_DEV environment variable. Setting this environment variable to 1 will toggle the development mode and setting this environment variable to any other value such as 0 will launch the application in production mode. To launch the application in production mode, perform the following changes to the package.json file start script. 

package.json:

{
  "name": "electron-stage",
  "version": "1.0.0",
  "description": "Manage Staging Environments in Electron",
  "main": "main.js",
  "scripts": {
    "start": "set ELECTRON_IS_DEV=0 && electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-is-dev": "^1.2.0"
  }
}

Explanation: Since we are on the Windows OS, we cannot set the Environment variable and launch the application from within the same command. Hence, we need to first set the ELECTRON_IS_DEV=0 and then launch the Electron application. 

Note: This Environment variable will be reset upon restarting the system if it was set from the Windows Console as shown in the above example. 

Output:

 



Last Updated : 22 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads