How to deploy Nuxt on Firebase

How to deploy Nuxt to firebase?

Cloud is popular nowadays, and there are good reasons for this. You don’t have the burden of managing servers on your own, the pricing is affordable and the availability is good. Probably you were thinking if you should use any cloud services for your next app. This always depends on your needs and plans, but if you are willing to use cloud infrastructure for your next Nuxt app, now is a good time for it. Here we will see how to deploy Nuxt to Firebase.

There are different reasons why you should host Nuxt on Firebase. But before this, we should review what are the possibilities of Firebase. Even though it is often used as a place where you can store application data, it is more than that. Firebase has a plethora of different products. Let’s review what is the Firebase and how you could benefit your Nuxt app with it.

What is a Firebase?

Firebase for Nuxt

Firebase is a platform created by Google for mobile and web app development. Under the name of Firebase, there are 19 products that help to develop. Everything Firebase provides is in the cloud, so you don’t have to manage your own server. And this is why the Firebase is popular. Some of the many products of the Firebase are application hosting, cloud storage, cloud messaging, various analytics, and real-time database. Firebase is pretty popular among developers as it provides great services which are free until a given threshold. So, if you are building a hobby app or a service that will not have many users in the beginning, it is a great platform. If the project starts growing, you can always upgrade your plan without migrating to another infrastructure. For example, these are the quotas you will get with a Firebase free plan of Realtime Database if you will decide to use Firebase with Nuxt:

Firebase realtime database for Nuxt.js

What is a Nuxt.js?

Host Nuxt on Firebase

Nuxt.js is a progressive framework based on Vue.js. What problem does the Nuxt solve? It has the ability to support different targets and server-side rendering could be used with it. As it is based on Vue, it still has the best features of Vue, but on top of it, it adds more great things. Nuxt could be used for creating different types of applications, is performant, and can provide better SEO. The framework is based on Vue, Node, Webpack, and Babel. So as you might guess, the usability of the framework is pretty universal.

Why should you deploy Nuxt to Firebase?

There are various reasons why you should host Nuxt on Firebase instead of another choice. Some things you might want to consider:

  • Firebase is a solid platform backed up by Google, so it provides high reliability and you don’t have to worry it will be gone anytime soon.
  • It has plenty of great products (over 19). If you are not building a rocket ship, these products will probably be pretty handy for your project.
  • You don’t have to manage a server on your own. And the costs and time spent on the administration of servers might add up over time. Firebase will save you some resources on this.
  • For basic needs for a hobby project or a small app, you won’t need to pay anything. The free plan might be enough in your case, so you won’t need to pay for anything.

How can we deploy Nuxt to Firebase?

Step 1: create a Firebase account

Ok, so let’s say we have a Nuxt project that we want to be hosted on Firebase, what’s next? A step we should make first is to create a Firebase account. This can be done here. This is pretty fast and straightforward as you only need to log in with your Google account. After this, you will have to name your project. If you don’t have a Nuxt project created yet, don’t worry, we will do this in Step 2.

Creating a Firebase account for Nuxt: enter the name

After giving your project a meaningful name (or not that meaningful), you will be asked if you want to enable Google Analytics. If you are not familiar what is the Google Analytics, it is basically an analytics platform by Google that will help you to perform A/B testing, generates reports of your site visitors, and can help you in many other ways. During the setup, it will be recommended to enable it (well, it is also a Google product, so no wonder it is being recommended). That’s completely up to you if you want to use it. If you are making a test project and don’t expect any visitors, then this is overkill. But if you are launching a project to live, Google Analytics will benefit you in the future.

So after making a decision if you want or don’t want to use Analytics, you should get your Firebase account being created.

Creating Firebase account for Nuxt

After the loader has ended loaded, you will be redirected to the dashboard of Firebase. From this point, you could start deploying Nuxt to Firebase.

Step 2: create a Nuxt project

Finally, after you have the Firebase account ready, let’s get to the technical things, and let’s see how can we deploy Nuxt to Firebase. The first step we are going to cover is to create a Nuxt project that could be hosted on Firebase. If you already have a finished project and you are ready to deploy, feel free to skip to Step 3.

First of all, it is worth mentioning that SPA or static websites could be deployed to the Firebase cloud pretty easily. However, If you want to have an SSR application made with Nuxt, this might not bet that straightforward. You will need to integrate Firebase cloud functions for this. But follow along and you will see how you can do it.

Anyway, let’s get started by creating a new Nuxt project. This can be done as simply as executing this command:

npx create-nuxt-app

You will have to answer questions about the project creation. You may leave the defaults, or change what you want, however, make sure that the “Choose rendering mode” is selected as Universal (SSR).

Project creation setup

Now check if the project creation was successful by navigating to the project directory and executing npm run build.

Step 3: installing firebase-tools and trying to deploy Nuxt to Firebase

If everything works fine after the previous steps, you can move on. In order to use the Firebase related tools, we will have to install an additional npm package, called firebase-tools. This is a Firebase command-line interface that will help us to deploy Nuxt to Firebase. It provides many different features, among which is Cloud Functions, that we will be using. Let’s get straight to the business. This is the package you need to install:

npm install -g firebase-tools

Now, as we have finished installing Firebase tools globally, let’s initiate a Firebase project. For this purpose, in your project directory execute firebase init. If you got an “Error: Failed to authenticate, have you run firebase login?” error, just execute the firebase login command. It will open your default browser and will ask you to log in to the Google account. Log in with the account you used in the first step when creating a Firebase account. After this, you should get a success message in the browser.

Firebase tools login

Anyway, if everything went fluently without the Firebase login error, you will get asked for a few questions during the setup. Answer Yes when you will be asked if you want to proceed. To be able to host Nuxt on Firebase, you should choose Functions and Hosting.

Firebase init setup questions

Note: you should press Space for confirming an option, and after you had selected both needed choices, press Enter. Then you will be asked to associate the project directory with a Firebase project. Choose Create a new project as this will create a new project on the Firebase (in the cloud). However, if you had already created a project in the Firebase dashboard, you could just choose an existing project and associate it. You will be asked some more questions, but choosing the default options is fine.

As we have the firebase-tools, deploying to the cloud is pretty easy. All we need to do is to execute the firebase deploy command. After this, you will see the deployment process on your terminal:

=== Deploying to 'nuxt-test-cde2e'...

i  deploying functions, hosting
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
+  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing functions directory for uploading...
i  hosting[nuxt-test-cde2e]: beginning deploy...
i  hosting[nuxt-test-cde2e]: found 2 files in public
+  hosting[nuxt-test-cde2e]: file upload complete
i  hosting[nuxt-test-cde2e]: finalizing version...
+  hosting[nuxt-test-cde2e]: version finalized
i  hosting[nuxt-test-cde2e]: releasing new version...
+  hosting[nuxt-test-cde2e]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/nuxt-test-cde2e/overview
Hosting URL: https://nuxt-test-cde2e.web.app

However, all you will gonna to see, is this default Firebase page:

Firebase setup default page

After we’ve initiate a Firebase project, these directories were created:

  • functions
  • public

And also a file called firebase.json. So as you might guess, after using the firebase deploy command, we deploy everything we have in the public directory. What should we do? We need to put the files we want to be served into the public directory

Final words

That’s it, now when you are able to deploy Nuxt to Firebase, you should consider if the service fits your needs. Firebase is a great platform, however, it has some limitations, which, might be important to you, if you are willing to host a serious enterprise application.

Leave a Comment

Your email address will not be published. Required fields are marked *