Configuring a Vue.js SPA with Environment Variables

In a previous blog post I showed how to set up ASP.NET Core Web API to support a Vue.js client SPA. In this post I will show how to extend on that example so that the Vue.js SPA supports a development and production configuration.

Since I am extending the previous example, I am assuming the API is available at http://localhost:5000 when in development and for this example I will assume that the production API is available at https://example.com.

Creating the configuration files

The first step we need to take is creating the configuration files for the development and production environments.

In the root of /clientapp we need to create a .env file for the development configuration and a .env.production file for the production configuration. The development configuration file will look like this.

VUE_APP_API_ROOT_URL=http://localhost:5000/api

This sets VUE_APP_API_ROOT_URL to a value of http://localhost:5000/api which is the base URL for our API endpoints.

The production configuration will look like the following file.

VUE_APP_API_ROOT_URL=https://example.com/api

This sets VUE_APP_API_ROOT_URL to a value of https://example.com/api which is where I am assuming the base URL of the production API would be.

It is important that the variables in this file start with VUE_APP otherwise they will not automatically be available for use in the Vue.js SPA.

Setting up axios

Our next step is to move the configuration of axios into its own file, so that we can easily import this into Vue components which would need to make use of our API.

We can do this by creating a axios directory inside clientapp/src. Inside the new axios directory create an index.js file and populate it with the following content.

import axios from 'axios'

export default axios.create({
    baseURL: process.env.VUE_APP_API_ROOT_URL
});

This will create a new axios instance and set the baseURL to match VUE_APP_API_ROOT_URL which is set in the configuration file. This means that when the app is published, baseURL will automatically be changed to match the URL specificed in .env.production.

Modifying our Vue.js SPA

Now we have our configuration sorted, we need to update our Vue.js SPA to use the new axios instance with the automatically configured baseURL.

We can do this by making the following changes inside App.vue.

Line 12 will need to be updated to import axios from "@/axios".

This will import our own instance of axios instead of it coming directly from the axios library, which means it will have the baseURL configured.

Line 25 will need to be updated to const url = "/HelloWorld";

The URL has been changed to account for the baseURL being set. This will cause axios to automatically prepend the baseURL to the URL we provide for the API call. As a result, using a URL of /HelloWorld would actually make a request to http://localhost:5000/api/HelloWorld when in development, and https://example.com/api/HelloWorld when in production.

Summary

If you run the API and Vue.js in development at this point, you should find that it functions exactly as before. If you publish the Vue.js SPA, the API requests will be made to the value of the variable set in the .env.production file.

In this post we have updated the previously created ASP.NET Core Web API and Vue.js SPA to support configuration from environment variables. This allows us to maintain different root URLs for the API in development and production deployments.

You can find a full example in this GitHub repository.