Accessing Balena Device Environment Variables in an Electron Vue CLI 3 Project

Posted by

Vue.js supports developer defined environment variables which are stored in one or more .env files in the root of your project. Only developer defined environment variables that start with VUE_APP_ can be accessed in a Vue application’s code through the process.env global variable. See Modes and Environment Variables.

When creating an Electron application with Vue using the Electron Builder Vue CLI Plugin, All VUE_APP_* environment variables are available in both the main and renderer processes.

However, when using Balena to deploy an Electron Vue application to an IoT device (specifically a Raspberry Pi in my case) the device variables set in the Balena Cloud dashboard are only available in the main process’s process.env global variable and not the renderer process’s global variable.

To solve this issue, I modified BalenaCloud-Electron-VueCli3 Starter, removing the JSON config code (which I don’t need) and adding code to send a message that contains any VUE_APP_* environment variables from the main process to the renderer process. The device variables (with the VUE_APP_ prefix removed) along with any other process.env variables are then exposed as a $env object in all components of the Vue application. My version of the base balena-electron-vue starter application is on GitHib.

Reference: Stop struggling with kiosk applications: modern electron-vue-balena workflow

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.