How to Deploy VueJs Application to Firebase for Different Environment

In this tutorial, we are going to deploy our Vue application to the firebase server for different environments.

Before putting any project into production it needs to develop, QA first.

So, for different cases, we may need different configurations and need to use different server resources.

According to this requirement, we need to set up different configuration files for different environments. So while deploying, it can take a specific config for the corresponding environment.

Generally, what we are going to do is:

1. Create different projects for different env in firebase
2. Set up firebase hosting in our application
3. Configuring test config file for different environment
4. Deploy the application for different environment

1. Create projects in firebase for different environment

Go to the "https://console.firebase.google.com/" and create a project.

Here we are creating two sample projects for develop and qa environment.

- Give the name of the project, we are giving "develop-vue-test" to develop and "qa-vue-test" to qa environment

Note: Create two different projects for two different environments.

2. Set up a firebase hosting in our application.

Here, we are considering you already have your vuejs application. Go to the project directory and initialize the firebase.

- Install Firebase CLI:

For npm package manager:

npm install -g firebase-tools

For yarn package manager:

yarn global add firebase-tools

- Initialize your project:

firebase login

This will redirect you to login with a Google account. Use the same account to login which is used to create for the different firebase projects previously.

Now, initialize the firebase project using the following command:

firebase init

The above process will create the following two different files in your project directory:

- .firebaserc:

{
  "projects": {
    "default": "develop-vue-test"
  }
}

As we use default firebase project as "develop-vue-test" while doing firebase init.

- firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This is the firebase config file where you can see the setup we did previously. For e.g "public": "dist" as we choose dist as public.

3. Configuring test config file for the different environment:

Now let's create some config files in the project directory for different env.

For production:

.env.production

For develop:

.env.develop

VUE_APP_ENDPOINT=https://develop.com

You can create whatever config key-value pair here with the respective environment. We are using VUE_APP_ENDPOINT test sample.

For qa:

.env.qa

VUE_APP_ENDPOINT=https://qa.com

You can access that config file property anywhere by using:

process.env.VUE_APP_ENDPOINT

Now let's add a qa-vue-test firebase project inside firebase.json

{
  "projects": {
    "default": "develop-vue-test",
    "qa": "qa-vue-test"
  }
}

Let's go to the package.json file and add and change the build script to use this config file.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "develop": "vue-cli-service build --mode develop",
    "qa": "vue-cli-service build --mode qa"
  },

Here, we added two more scripts for develop and qa environment.

"develop": "vue-cli-service build --mode develop",

"qa": "vue-cli-service build --mode qa"

4. Deploy the application:

For develop:

yarn develop

Which will build the application for develop env.

firebase deploy

as inside the firebase.json file, the default project is selected as develop-vue-test so it will simply deploy to develop.

For qa:

yarn qa

firebase deploy -P qa

Make sure the name "qa" needs to same as the name of the project defined in firebase.json. This will simply deploy the build folder to "qa-vue-test" firebase project.

Finally, we have successfully deployed our vuejs application to firebase for different environments.

If you want to track the hosting inside the firebase console then you can go to the Hosting tab in the console.