Vulcan: Environment Variables

Environment Variables are common in Web Development, but can be a little confusing to people - they sound super technical, but they’re not really.

An environment variable is a dynamic-named value that can affect the way running processes will behave on a computer.

They are part of the environment in which a process runs.

In web development, environment variables are commonly used to separate the configuration from the code. This has many benefits, including Security.

For example, a Production system will often use different API keys to a staging, test or local development environment.

It is for a very similar use case that we have introduced Environment Variables to Vulcan.

Environment Variables in Custom Components

Vulcan Custom Components are simple but powerful Vue.js Components. As such, we can do all sorts of things, like connecting to third party API’s to fetch and store data, integrate services and crate dynamic workflows.

Since we’re a small bootstrapped company, but we want to enable the full flexibility and power of Components in Vulcan early, we’ve made it possible for Developers to bring their own services, instead of waiting and relying on our ability to hook up (sometimes very expensive) APIs.

It’s a very flexible approach, so let’s break it down.

Simple Usage

Here is a full sample component for generating website screenshots inside the Vulcan MagicEditor.

<template>
    <div>
      <v-img :src="imageSrc" lazy-src="https://source.unsplash.com/random/400x600" transition>
           <v-layout
        slot="placeholder"
        fill-height
        align-center
        justify-center
        ma-0
      >
        <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
      </v-layout>
      </v-img>
    </div>
</template>

<script>
    module.exports = {
        name: 'WebsiteScreenshot',
        props: {
            url: {
                type: String,
                default: "bbc.co.uk"
            },
            ENV: {
                type: Object,
                hidden: true
            }
        },
        data: function () {
          return {
              screenshot: ""
          }
        },
        methods: {},
        computed: {
            imageSrc() {
                return `https://api.urlbox.io/v1/${this.ENV["URLBOX_APIKEY"]}/png?thumb_width=800&ttl=86400&url=` + encodeURIComponent(this.url);
            }
        }
    }
</script>

<style scoped>
    /* styles here */
</style>

It’s a simple component, but includes a couple of important things:

  1. ENV in Props
props: {
  ENV: {
    type: Object,
    hidden: true
  }
}
  1. Using the ENV object to make an API request.
imageSrc() {
  return `https://api.urlbox.io/v1/${this.ENV["URLBOX_APIKEY"]}/png?thumb_width=800&ttl=86400&url=` + encodeURIComponent(this.url);
}

So where does the Component get this ENV object from? Great question…

There are three places that ENV can be set, each with a priority level as the usage becomes more specific.

:person_in_lotus_position: User Account Level - lowest priority
:file_folder: Project Level
:card_file_box: Component Level - highest priority

User Account ENV Settings

Visit https://app.vulcanapp.com/settings when signed in. Click the “Configuration” tab.
From here you can add new Environment Variables.

Environment Variables can be added line by line or you can upload a CSV file with keys and values.

Project ENV Setting

Click “Edit Project” and use the Advanced area.

Component ENV Setting

Accessed in the third tab on the left half of the Component Editor.