Create Config Files For VueJS

In this tutorial we're going to learn how you can create different configuration files to be used on your VueJS/Laravel application depending on which environment you're working in. If you're working on a full VueJS SPA you would most likely start the application by using something like the vue-cli library on github. Vue-cli In this library you're able to create a webpack template for your SPA. Vue Webpack Template This already has a built in method on how to deal with different environment settings, but if you're using VueJS in Laravel then you have the config settings for the backend but not the frontend. This is what we can fix in this tutorial.

#NPM

Within the package.json file you'll see the scripts section which tell npm what to run and where you can change what the script does depending on the environment. As you can see in the development script we set the NODE_ENV to development and in production the NODE_ENV is set to production. We can use this NODE_ENV settings to select which configs to use.

  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

#Environment Files

First we need to create the config environment files for development, staging and production. For the example shown we're going to add a variable of API_URL in each of the config files. ### Development

export default {
  API_URL: 'https://local.dev'
}

#Staging

export default {
  API_URL: 'https://staging.dev'
}

#Production

export default {
  API_URL: 'https://production.com'
}

#Config.js

We need to then create a config.js file which will be used to load the different environment files in depending on the NODE_ENV.

var env = process.env.NODE_ENV || 'development'

var config = {
  development: require('./config/development.js'),
  production: require('./config/production.js'),
  staging: require('./config/staging.js')
}

module.exports = config[env]

To use this in your application you simply import the config.js file and then you have access to the API_URL variable.

import config from 'config.js'

Inside the config variable we can access the API_URL by using config.API_URL in our code. Now when this is deployed into production your code will look the same but your API_URL will have a different value.