When developing an app or component, we often need to use different types of resources depending on the application phase we are working on.

For instance, we’ll need a different setup either for development or production stage, where needed resources or variables can differ in each of the working environments, such as API URLs, domain names, and so on.

Dev environment

Test environment

Prod environment

Therefore, to get this to work around we make use of the System library for us being able to set up the different environments (dev, test, and prod) containing the needed resources for our application.

Why set up environment variables?

As all of our app information will depend on which environment we are in, it’s easier for the development process to set up a global configuration of the application itself containing all the related variables it will consume.

For example, let’s say we need different domain names for each of the environments we are working on in an app. The fact that we use a configuration file for the whole application helps us save time as we are only affecting that file when we need some new changes.

Getting started with @oasis/system

In this section, we'll learn how to install and use Oasis System.

Installation

• Once you've followed the process of Granting access to the dependencies you can run the npm command:

npm i @oasis/system

# or upgrade to the latest version

npm update @oasis/system

Setup

• Import System in the entry point file of your project as follows:

import Vue from 'vue';
import '@oasis/system';

❗ You must import Oasis System at the top of the main.js, just after importing the Vue instance

Frontend app config

If you’re implementing Oasis System for your Vue application.

In your project root folder, create a mui-conf.js file with the following structure:

module.exports = {
    "dev": {
        // dev/local environment variables
        "appName": String,
        "urlResources": String,
    },
    "test": {
        // test environment variables
        "appName": String,
        "urlResources": String,
    },
    "prod": {
        // production environment variables
        "appName": String,
        "urlResources": String,
    },
};