×
Photo by Rebekah Howell on Unsplash

Using Environment Variables with Jekyll, Vue.js, and Netlify

Written by John Vicari
3
This post is days old.

We operate in a typical QA -> Production workflow on both our front-end and back-end teams. So, what happnes when your front-end is in QA but is pointing to a Production API? Nothing good happens, son… nothing good.

As I’ve mentioned before, we run a few websites built with Jekyll and Vue.js, and recently launched a new site with a similar setup. Since this site had never been released, we hardcoded a handful of QA endpoints into a Vue component. This didn’t present any issues during initial development, but when it was released (and the endpoints were updated to Production) and minor bugs were being worked on, front-end QA was pointing to back-end Production. Not good, especially if data is being manipulated.

The Solution

Create a .json file to hold your environment specific variables and make them available to your Vue component.

Define environment variables in Netlify

We’re using Netlify to deploy and host this site and have setup a QA and Production build. The build settings allow you to define environment variables, this is where you add the Jekyll environment variable.

JEKYLL_ENV=production

Which would look like this in the Netlify Build & Deploy settings (your development build would obviously be set to development, although I think development might be the default): Netlify Environment Variable Setting

Create JSON file

In the root of your project create a .json file, something like environment-variables.json. Within that file we have:


---
---
{% if jekyll.environment == "production" %}
{
    "productionUrlA": "https://production-url-a.com",
    "productionUrlB": "https://production-url-b.com",
    "productionUrlC": "https://production-url-c.com"
}
{% else %}
{
    "qaUrlA": "https://qa-url-a.com",
    "qaUrlB": "https://qa-url-b.com",
    "qaUrlC": "https://qa-url-c.com"
}
{% endif %}

Be sure to open the file with empty front matter so Jekyll knows to process it. When Jekyll builds, environment-variables.json will be in your _site directory with only one set of environment variables ready for your Vue component to use.

{
    "qaUrlA": "https://qa-url-a.com",
    "qaUrlB": "https://qa-url-b.com",
    "qaUrlC": "https://qa-url-c.com"
}

Note: Jekyll will interpret line breaks where your conditional statements are, if that annoys you, start the JSON syntax at the end of the conditional line.

Fetch the environment variables in your Vue component

Set the empty data:

data: function() {
  return {
    environmentVariables: {}
  }
}

Fetch your JSON:

created: function() {
  fetch('/environment-variables.json')
  .then(response => response.json())
  .then(response => {
    this.environmentVariables = response;
  })
  .catch(error => {
    console.log(error);    
  });
}

Now your variables are set in the environmentVariables object and ready to be used in your component.

Data crisis averted!

John Vicari
John Vicari
Front End Developer
Development
JavaScript
Dev Ops
Vue
Vue.js
Jekyll
Suggested reading

Orchestrating Web Server Integration Tests Using npm

JavaScript
It can be tricky to run integration tests targeting a web server using the co...
Read now

Vue Group Transitions

Vue.js JavaScript
Simple transitions Vue.js has an extremely helpful was to handle animations ...
Read now

Vue CLI Environment Variables

Vue.js JavaScript
In development it is common to not want to share everything in our code. Thin...
Read now

Computed Side Effects in Vue.js

Vue.js JavaScript
In Vue computed properties are a life saver when it comes to being able to ad...
Read now

Global State versus Component State

JavaScript Vue
State management, Redux, Vuex… whatever you want to call it or whatever flavo...
Read now

The Key to the Vue v-for

JavaScript Vue
If you’re familiar with Vue at all, you’re probably familiar with the v-for. ...
Read now

Comments

Stay fresh! The brighter green, the fresher the article!