How to Deploy Nuxt JS in Firebase Hosting with Firestore Realtime Database

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, avr: 5.00)

Firebase Hosting provides fast and secure hosting for the web app, static and dynamic content, and microservices. you can quickly deploy web apps and serve both static and dynamic content. You can also pair Firebase Hosting with Cloud Functions. This tutorial demonstrates step by step how to deploy Nuxt JS Firebase Hosting

Nuxt.js is a framework for creating Vue.js app, it’s easily integrated to Firebase/Firestore realtime Database and simple to deploy Nuxt JS Firebase Hosting with three modes application: SSR, SPA or Static Generated.

Prerequisites

Before starting with this guide, you’ll need to create a project in Firebase account. If you don’t have an account, you can create one here. Once you create the account you’ve signed in with your Google account Add Project button and start a new project.

For this tutorial, we will use Nuxt.Js 2.4.2 and Firestore Realtime Database


Step 1: Install Firebase CLI Tool

The Firebase CLI (command line interface) to manages the deployment of code and assets to your Firebase project, including Firebase Hosting site, Cloud Functions for Firebase, Realtime Database, Cloud Storage for Firebase, Cloud Firestore and many more. To install the Firebase CLI using npm by running the command below:

npm install -g firebase-tools

Step 2: Generate Static Page Nuxt.JS Project

Nuxt.js lets you choose between three modes to deploy your application: SSR, SPA or Static Generated.

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

To deploy Static Generated Deployment (Pre-rendered) Nuxt.js gives you the ability to host your web application on any static hosting. Use cd to go into your Nuxt.JS project’s root directory then run the following command

npm run generate
or
yarn run generate

The process may take a few minutes and once completed you will be presented on the terminal console

Hash: 81b5f081c22663513708
Version: webpack 4.29.1
Time: 34783ms
Built at: 02/05/2019 4:38:39 PM
                  Asset       Size  Chunks             Chunk Names
225fd07a78e337a570ee.js    157 KiB       1  [emitted]  pages/index
9aee7b0705212ae5c87f.js   60.4 KiB       3  [emitted]  pages/other
bcf2254905c1d20e8e89.js  836 bytes       2  [emitted]  pages/inspire
              server.js    368 KiB       0  [emitted]  app
   server.manifest.json  483 bytes          [emitted]  
 + 4 hidden assets
Entrypoint app = server.js server.js.map
ℹ Generating pages                                           16:38:39
✔ Generated /inspire                                         16:38:41
✔ Generated /other                                           16:38:41
✔ Generated /                                                16:38:41
✨  Done in 108.39s.

It will create a dist folder in Nuxt.JS project’s root directory and everything inside ready to be deployed on a static hosting site.


Step 3: Sign into Firebase Account

Sign into Firebase using your Google account to connects your local machine to Firebase and grants you access to your Firebase projects.

firebase login

You will be prompted Allow Firebase to collect anonymous CLI…. and type Y

? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes
Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-.................
Waiting for authentication...

It will open new tab in the browser then login with your Google or Gmail account. After login you will see Woohoo! success message


Step 4: Initialize a Firebase project

Before deploying to a Firebase project it requires to initialize project directory to be deployed. A project directory is generally the same directory as your source control root, and after running firebase init, the directory will contain a firebase.json configuration file.

To initialize a new Firebase project, run the following command from within your app’s directory:

firebase init

You’re about to initialize a Firebase project in this directory, to choose pres arrow key UP/DOWN and to select press SPACE on the keyboard then press ENTER

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm yo
ur choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

Let’s associate this project directory with a Firebase project. If you don’t have the project you can choose [create a new project]

? Select a default Firebase project for this directory: 
  [don't setup a default project] 
❯ axfon-lab (axfon) 
  [create a new project] 

Hosting Setup
Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy and type dist for the public directory, configure single-page App Yes and Overwrite index.html file No

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
✔  Firebase initialization complete!

The firebase init command creates a firebase.json configuration file in the root of your project directory. Make sure the code like as the follow

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

Step 5: Deployment to Firebase Hosting

By default, firebase deploy creates a release for all deployable resources in your project directory. To deploy specific Firebase services or features, use partial deployment. To deploy to a Firebase project, run the following command from your project directory:

firebase deploy

Deploying to Firebase Project

i  deploying firestore, hosting
i  firestore: checking firestore.rules for compilation errors...
i  firestore: reading indexes from firestore.indexes.json...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: deployed indexes in firestore.indexes.json successfully
i  hosting[axfon-lab]: beginning deploy...
i  hosting[axfon-lab]: found 33 files in dist
✔  hosting[axfon-lab]: file upload complete
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[axfon-lab]: finalizing version...
✔  hosting[axfon-lab]: version finalized
i  hosting[axfon-lab]: releasing new version...
✔  hosting[axfon-lab]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/axfon-lab/overview
Hosting URL: https://axfon-lab.firebaseapp.com

Step 6: Testing on the Browser

You can now view this page in your web browser by visiting Firebase Hosting URL: https://YOUR_PORJECT_NAME.firebaseapp.com


If this tutorial could help you, please rate above Star button rating and share to help others find it! Feel free to leave a comment below.

Recommended For You

Adzan

About the Author: Adzan

Internet enthusiast like to share about newest information technology such as programming language, software developer and etc...