Multiple environments with Firebase Hosting
Tags: firebase, vue, hosting, javascript
Published: 2019-10-16 10:41:15

More often than not, a project requires multiple environments to deploy to. What I commonly use on top of my development environment is a staging environment and of course, a production environment.

I recently started using Firebase Hosting to host my Vue.js applications and I needed to be able to configure hosting so I could easily deploy to any environment easily. Let's see an example.

![Firebase Hosting product page.](https://cdn-images-1.medium.com/max/2560/1*3CMOUkfN4d-xBieR2-Q3ug.jpeg)

## Create a Vue.js project
For this example, we are going to generate a basic Vue.js application using the Vue CLI.

To install Vue CLI, run this command:

```bash
npm install -g @vue/cli
```

Then generate a project, we'll call this one firebase-hosting:

```bash
vue create firebase-hosting
```

Select the default preset and pick `npm` as a dependency manager.
The Vue CLI is going to create the project and install the dependencies, as well as initializing a Git repository.

You can now go to the firebase-hosting directory and run the project:

```bash
cd firebase-hosting && npm run serve
```

Visit `http://localhost:8080` and you should see this:

![A brand new Vue.js project](https://cdn-images-1.medium.com/max/1200/1*Mgk4yeV2kHiN-CCO2W41nQ.png)

## Setup Firebase

> Note: For this example, we will simply initialize Firebase for hosting. If you would like to know how to use the other features that Firebase can offer with Vue.js, stay tuned for future posts.

To initialize Firebase Hosting within your project, you need to install the firebase-tools package globally and log in:

```bash
npm install -g firebase-tools
firebase login
```

To support multiple environments with Firebase Hosting, multiple options are available:

- Use two different sites: example.com and staging.example.com
- Use two completely different projects

I prefer the second approach, as we usually want to also use the other features that Firebase offers and it's usually a good thing to keep things separated.

Then run the initialization command within your project's directory:

```bash
firebase init hosting
```

Then answer the following:

```
? Please select an option: (Use arrow keys): Create a new project
? Please specify a unique project id: firebase-hosting-vue-staging
? What would you like to call your project? (defaults to your project ID) (): use default
? What do you want to use as your public directory? (public): dist
? Configure as a single-page app (rewrite all urls to /index.html)?: y
```

Your project should now be configured within Firebase. You can double-check by running:

```bash
firebase projects:list
```

This will list the projects available in the command-line, where you should see your project name and (current) should be written next to it.

To create the production environment, we will use the `projects:create` command:

```bash
firebase projects:create firebase-hosting-vue
```

---

Now you that we have the staging and production environments ready, you can add them using:

```bash
firebase use --add
```

Select firebase-hosting-vue-staging and type staging as an alias.

Repeat the process for the production project, use production as an alias.

This information is stored in a `.firebaserc` file at the root of your project.

```javascript
{
  "projects": {
    "default": "firebase-hosting-vue-staging",
    "staging": "firebase-hosting-vue-staging",
    "production": "firebase-hosting-vue"
  }
}
```

## Deploy to Firebase Hosting

Now to deploy, we can specify the project withing the command:

```bash
firebase deploy -P staging
firebase deploy -P production
```

---

You can find an example project in this repository:
[WhatDaFox/Firebase-Hosting](https://github.com/WhatDaFox/Firebase-Hosting)

Feel free to follow me on Twitter and/or Instagram and share your tips & tricks with me!