DEV Community

Valentin Prugnaud ๐ŸฆŠ
Valentin Prugnaud ๐ŸฆŠ

Posted on • Originally published at whatdafox.com

Multiple environments with Firebase Hosting

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.

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:

npm install -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

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

vue create firebase-hosting
Enter fullscreen mode Exit fullscreen mode

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:

cd firebase-hosting && npm run serve
Enter fullscreen mode Exit fullscreen mode

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

A brand new Vue.jsย project

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:

npm install -g firebase-tools
firebase login
Enter fullscreen mode Exit fullscreen mode

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:

firebase init hosting
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

firebase projects:list
Enter fullscreen mode Exit fullscreen mode

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:

firebase projects:create firebase-hosting-vue
Enter fullscreen mode Exit fullscreen mode

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

firebase use --add
Enter fullscreen mode Exit fullscreen mode

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.

{
  "projects": {
    "default": "firebase-hosting-vue-staging",
    "staging": "firebase-hosting-vue-staging",
    "production": "firebase-hosting-vue"
  }
}
Enter fullscreen mode Exit fullscreen mode

Deploy to Firebaseย Hosting

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

firebase deploy -P staging
firebase deploy -P production
Enter fullscreen mode Exit fullscreen mode

You can find an example project in this repository:
WhatDaFox/Firebase-Hosting

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

Top comments (11)

Collapse
 
ryanrousseau profile image
Ryan Rousseau

Nice post!

I started down the path of creating a staging project for one of my apps, but this was right when multiple sites were introduced to hosting and I saw in the docs that's the suggested way of doing this. I think the biggest obstacle I had was getting the database connection right when swapping back and forth between environments. I'll have to go back and see how I did that. I imagine you avoid that completely with this approach.

Collapse
 
valentinprgnd profile image
Valentin Prugnaud ๐ŸฆŠ

Thanks! Each environments has itโ€™s own database, storage etc... I use environment variables in my Gitlab pipelines to build the app with the right environment before deploying to Firebase. I have planned another post covering how I use Gitlab to deploy to Firebase, stay tuned!

Collapse
 
ryanrousseau profile image
Ryan Rousseau

Nice, I do something similar Gitlab to build and package but Octopus Deploy to deploy. Also got a blog in the making on the second part.

Thread Thread
 
valentinprgnd profile image
Valentin Prugnaud ๐ŸฆŠ

Nice! Let me know when your post is ready, Iโ€™d love to read it!

Collapse
 
spock123 profile image
Lars Rye Jeppesen

What if you have multiple sites in each of those projects?

like "admin" and "shop" for example.

No guide on the Internet I've looked at so far has show how to do this.
It's always either 1) one project with multiple sites or 2) 2 projects with one site each.

Collapse
 
valentinprgnd profile image
Valentin Prugnaud ๐ŸฆŠ

You can create multiple sites in the same Firebase project, and leverage the Deployment Targets feature. There is more information here: firebase.google.com/docs/hosting/m...

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Thank you, yes I got it working.

Multiple projects with multiple apps in each project. It was a bit weird to get working though, but finally managed.

Thanks

Collapse
 
messerli90 profile image
Michael Messerli

Really interesting!

When you said "Use two completely different projects" you mean 2 seperate Firebase projects? I recently ran into the project cap (with only 3 active projects) and it wouldn't let me create another one. Google cleared it up quickly and gave me more but now I'm afraid of creating lots of projects now.

Collapse
 
valentinprgnd profile image
Valentin Prugnaud ๐ŸฆŠ • Edited

I usually use the Blaze plan and I never ran into the project limit myself.

An alternative if you are concerned about the project limit, would be to use Deploy Targets within the same project.

Collapse
 
messerli90 profile image
Michael Messerli

I think it was a weird thing with my Google account, I had 3 projects total and when I tried to create a new one it told me I have '-4 projects left', 2 of them were on Blaze

Thanks for that link I'll look into that. ๐Ÿ‘

Thread Thread
 
valentinprgnd profile image
Valentin Prugnaud ๐ŸฆŠ

Strange behaviour indeed. Seems like Firebase has a hidden limit on the number of projects you can create, but no information on what that limit actually is ๐Ÿค”