How To Use Vue.js Environment Modes with a Node.js Mock Data Layer

The author selected Open Sourcing Mental Illness to receive a donation as part of the Write for DOnations program.

Introduction

When it comes to software development, there are two ends of the stack. A stack is a collection of technologies used for your software to function. Vue.js, the progressive user interface framework, is part of the frontend, the part of the stack that a user directly interacts with. This frontend is also referred to as the client and encompasses everything that is rendered in the user’s browser. Technologies such as HTML, JavaScript, and CSS are all rendered in the client. In contrast, the backend commonly interacts with data or servers through technologies like Java, Kotlin, or .NET.

The application is the data itself, and the interface (frontend) is a way to display data meaningfully to the user for them to interact with. In the begining phase of software development, you don’t need a backend to get started. In some cases, the backend hasn’t even been created yet. In a case such as this, you can create your own local data to build your interface. Using Node environments and variables, you can toggle different datasets per environment or toggle between local data and “live” data via a network call. Having a mock data layer is useful if you do not have data yet, because it provides data to test your frontend before the backend is ready.

By the end of this tutorial, you will have created several Node environments and toggled these datasets with Node environment variables. To illustrate these concepts, you will create a number of Vue components to visualize this data across environments.

Prerequisites

To complete this tutorial, you will need:

• Node.js version 10.6.0 or greater installed on your computer. To install this on macOS or Ubuntu 18.04, follow the steps in How To Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04.
• Vue CLI installed on your machine and a fresh project generated. To get this, follow Steps 1 and 2 of How To Generate a Vue.js Single Page App With the Vue CLI.
• You will also need a basic knowledge of JavaScript, HTML, and CSS, which you can find in our How To Build a Website With HTML series, How To Build a Website With CSS series, and in How To Code in JavaScript.

Step 1 — Creating Environments with Modes

Modes are an important concept when it comes to Vue CLI projects. A mode is an environment type, or a set of variables that gets loaded during a build. These variables are stored in .env files in the root directory of your project. As part of the default vue-cli-service plugin, you immediately have access to three modes. These are:

• development: used when vue-cli-service serve is executed.
• test: used when vue-cli-service test:unit is executed.
• production: used when vue-cli-service build and vue-cli-service test:e2e are executed.

Perhaps the most used mode is development mode. This is the mode that Vue.js developers use when working on their application on their local machine. This mode starts a local Node server with hot-module reloading (instant browser refreshing) enabled. The test mode, on the other hand, is a mode to run your unit tests in. Unit tests are JavaScript functions that test application methods, events, and in some cases, user interaction. The last default mode is production. This compressess all of your code and optimizes it for performance so it can be hosted on a production server.

The project that is generated for you from Vue CLI has these commands pre-mapped to npm run serve, npm run test:unit, and npm run build.

Each environment is associated with its own .env file, where you can put custom Node environment key/value pairs that your application can reference. You will not have these files after generating a project from the CLI, but you can add these using one command in your terminal.

You will now generate a development environment file, which you will use later in the tutorial. Open your terminal and enter the following in the root directory of your project:

touch .env.development

Open the newly created file in your text editor of choice. In this file, you’ll want to explicitly define the environment type. This is a key/value pair that could be anything you want. However, it’s considered best practice to define the environment type that corresponds with the name of the .env file.

You will be using this NODE_ENV later in the tutorial by loading different data sets depending on the environment or mode selected on build. Add the following line:

NODE_ENV="development"

Save and exit the file.

The key/value pairs in this file will only affect your program when the application is in development mode. It’s important to note that Git will automatically commit these files unless you add the file in your .gitignore file or append the .local extension to the file name: .env.development.local.

You are not limited to the standard environments that Vue.js provides. You may have several other environments that are specific to your workflow. Next, you’ll create a custom environment for a staging server.

Start by creating the .env file for the staging environment. Open your terminal of choice and in the root directory run the following:

touch .env.staging

In this file, create a key/value pair that’ll define the NODE_ENV of this project. You may open this file in your text editor of choice, or you can modify it using the terminal. Nano is an editor that is used in the terminal window. You may have other editors such as Vim.

You will be using this NODE_ENV later in the tutorial by loading different data sets depending on the environment or mode selected on build.

Add the following to the file:

NODE_ENV="staging"

Save and exit the file. In nano, you can save the file with CTRL+X then CTRL+Y.

In order to use this environment, you can register a new script in your package.json file. Open this file now.

In the "scripts" section, add the following highlighted line:

{
  ...
  "scripts": {
    ...
    "staging": "vue-cli-service serve --mode staging",
  },
  ...
}

Save this file, then exit the editor.

You’ve just created a new script that can be executed with npm run staging. The flag --mode lets Vue CLI know to use the .env.staging (or .env.staging.local) file when starting the local server.

In this step, you created custom NODE_ENV variables for two Vue.js modes: development and staging. These modes will come in handy in the following steps when you create custom datasets for each of these modes. By running the project in one mode or the other, you can load different data sets by reading these files.

Step 2 — Creating a Mock Data Layer

As stated in the Introduction, you can start developing your user interface without a backend by using a mock data layer. A mock data layer is static data that is stored locally for your application to reference. When working with Vue, these data files are JavaScript objects and arrays. Where these are stored is your personal preference. For the sake of this tutorial, mock data files will be stored in a directory named data.

In this tutorial, you’re building a “main/detail” airport browser application. In the “main” view, the user will see a number of airport codes and locations.

In your terminal, in the root project directory, create a new directory using the mkdir command:

mkdir data

Now create a .js file named airports.staging.mock.js using the touch command. Naming these files is personal preference, but it’s generally a good idea to differentiate this mock data from essential files in your app. For the sake of this tutorial, mock files will follow this naming convention: name.environment.mock.js.

Create the file with the following command:

touch data/airports.staging.mock.js

In your editor of choice, open this newly created JavaScript file and add the following array of objects:

const airports = [
    {
        name: 'Cincinnati/Northern Kentucky International Airport',
        abbreviation: 'CVG',
        city: 'Hebron',
        state: 'KY'
    },
    {
        name: 'Seattle-Tacoma International Airport',
        abbreviation: 'SEA',
        city: 'Seattle',
        state: 'WA'
    },
    {
        name: 'Minneapolis-Saint Paul International Airport',
        abbreviation: 'MSP',
        city: 'Bloomington',
        state: 'MN'
    }
]

export default airports

In this code block, you are creating objects that represent airports in the United States and providing their name, abbreviation, and the city and state in which they are located. You then export the array to make it available to other parts of your program. This will act as your “staging” data.

Next, create a dataset for another environment like “development”—the default environment when running npm run serve. To follow the naming convention, create a new file in your terminal with the touch command and name it airports.development.mock.js:

touch data/airports.development.mock.js

In your editor of choice, open this newly created JavaScript file and add the following array of objects:

const airports = [
    {
        name: 'Louis Armstrong New Orleans International Airport',
        abbreviation: 'MSY',
        city: 'New Orleans',
        state: 'LA'
    },
    {
        name: 'Denver International Airport',
        abbreviation: 'DEN',
        city: 'Denver',
        state: 'CO'
    },
    {
        name: 'Philadelphia International Airport',
        abbreviation: 'PHL',
        city: 'Philadelphia',
        state: 'PA'
    }
]

export default airports

This will act as your “development” data when you run npm run serve.

Now that you’ve created the mock data for your environments, in the next step, you are going to iterate or loop through that data with the v-for directive and start building out the user interface. This will give you a visual representation of the change when using the different modes.

Step 3 — Iterating Through Mock Data in App.vue

Now that you have your mock data, you can test out how useful environments are by iterating through this data in the App.vue component in the src directory.

First, open up App.vue in your editor of choice.

Once it is open, delete all of the HTML inside the template tags and remove the import statement in the script section. Also, delete the HelloWorld component in the export object. Some general styles have also been provided to make the data easier to read.

Add the following highlighted lines to your App.vue file:

<template>
  
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.airport {
  border: 3px solid;
  border-radius: .5rem;
  padding: 1rem;
}

.airport p:first-child {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 1rem 0;
<^>}

.airport p:last-child {
  font-style: italic;
  font-size: .8rem;
}
</style>

In this case, CSS Grid is being used to create these cards of airport codes into a grid of three. Notice how this grid is set up in the .wrapper class. The .airport is the card or section that contains each airport code, name, and location.

Next, import the development mock data that was created earlier. Since this is vanilla JavaScript, you can import it via an import statement. You will also need to register this data with the data property so the Vue template has access to this data.

Add the following highlighted lines:

...
<script>
import airports from '../data/airports.development.mock'

export default {
  name: 'App',
  data() {
    return {
      airports
    }
  }
}
</script>
...

Now that the mock data has been imported, you can start using it to build your interface. In the case of this application, iterate through this data with the v-for directive and display it in your template:

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation" class="airport">
      <p>{{ airport.abbreviation }}</p>
      <p>{{ airport.name }}</p>
      <p>{{ airport.city }}, {{ airport.state }}</p>
    </div>
  </div>
</template>
...

v-for in this case is used to render the list of airports.

Save and close the file.

In your terminal, start the development server by running the command:

npm run serve

Vue CLI will provide you a local address, generally localhost:8080. Visit that addresss in your browser of choice. You will find the data from airports.development.mock.js rendered in your browser:

At this point, you created a static mock data layer and loaded it when you executed npm run serve. However, you will notice that if you stop the server (CTRL+C) and start the staging environment, you will have the same result in your browser. In this next step, you are going to tell your app to load a set of data for each environment. To achieve this, you can use a Vue computed property.

Step 4 — Loading Environment-Specific Data with Computed Properties

In Vue, computed properties are component functions that must return a value. These functions cannot accept arguments, and are cached by Vue. Computed properties are very useful when you need to perform logic and assign that return value to a property. In this respect, computed properties act similar to data properties as far as the template is concerned.

In this step, you will use computed properties to use different datasets for the staging and the development environment.

Start by opening src/App.vue and importing both sets of data:

...
<script>
import DevData from '../data/airports.development.mock'
import StagingData from '../data/airports.staging.mock'

export default {
  name: 'App',
  ...
}
</script>
...

If you still have one of the environments running, your data will disappear. That is because you removed the data property that connected your JavaScript mock data to the template.

Next, create a computed property named airports. The function name is important here because Vue is taking the return value of the function and assigning it to airports for the template to consume. In this computed property, you’ll need to write a bit of logic; an if/else statement that evaluates the Node environment name. To get the value of the Node environment in Vue, you can access it with process.env.NODE_ENV. When you created your Node environments, Vue automatically assigned NODE_ENV to development and staging respectively.

...
<script>
import DevData from '../data/airports.development.mock'
import StagingData from '../data/airports.staging.mock'

export default {
  name: 'App',
  computed: {
      airports() {
        if (process.env.NODE_ENV === 'development') return DevData
        else return StagingData
      }
  }
}
</script>
...

Now you are loading each set of data per its respective environment.

In your terminal, start the local development environment with npm run serve.

npm run serve

The data will be identical to what it was before.

Now, start the staging environment by first stopping the server and then executing npm run staging in your terminal window.

npm run staging

When you visit localhost:8080 in your browser, you will find a different set of data.

Conclusion

In this tutorial, you worked with different Vue.js environment modes and added environment scripts to your package.json file. You also created mock data for a number of environments and iterated through the data using the v-for directive.

By using this approach to make a temporary backend, you can focus on the development of your interface and the frontend of your application. You are also not limited to any number of environments or the default environments provided by Vue. It isn’t uncommon to have .env files for four or more environments: development, staging, user acceptance testing (UAT), and production.

For more information on Vue.js and Vue CLI 3, it’s recommended to read through their documentation. For more tutorials on Vue, check out the Vue Topic Page.