What is the best way to integrate the Firestore SDK into an Oracle JET project?

Short Version: How can I integrate Google Cloud Firestore into an Oracle Jet project?

I'm working on incorporating the Firestore client SDK into my Oracle JET project. I've executed the following command to add the package to my project:

npm install firestore --save

Now, I understand that the path_mapping.json file needs updating, but I'm unsure about its contents.

Path_mapping.json file:

"firebase/firestore": {
      "cdn": "3rdparty",
      "cwd": "node_modules/@firebase/firestore/dist",
      "debug": {
        "src": ["*.js", "*.map"],
        "path": "libs/@firebase/firestore/index.esm2017.js"
      },
      "release": {
        "src": ["*.js", "*.map"],
        "path": "libs/@firebase/firestore/index.esm2017.js"
      }
    }

TS file:

import { collection, getDocs, getFirestore } from "firebase/firestore";

Is it possible to use the Firestore client SDK in an Oracle JET project? If yes, how should the path_mapping.json file be configured to include it?

javascriptfirebasenpmgoogle-cloud-firestoreoracle-jet

Answer №1

When striving for connectivity

{
  "firebase": {
    "cdn": "3rdparty",
    "cwd": "node_modules/@firebase",
    "debug": {
      "src": ["**/*.js", "**/*.map"],
      "path": "firebase/firestore/dist/index.esm.js"
    },
    "release": {
      "src": ["**/*.js", "**/*.map"],
      "path": "firebase/firestore/dist/index.esm.js"
    }
  }
}


import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from "firebase/firestore";

// Provide your firebase configuration details
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


async function getCollectionDocs() {
  const querySnapshot = await getDocs(collection(db, "your-collection"));
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => ${doc.data()}`);
  });
}

getCollectionDocs();

Additionally, ensure that the paths in the path_mapping.json file accurately correspond to the paths in your node_modules directory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interact with USB drive using electron to both read and write data

I am currently developing an electron project that involves copying files from a computer to USB drives. I need the ability to transfer files and folders to the destination USB drive, as well as determine the amount of free space on the drive. I have expe ...

javascriptnode.jsnpmelectron

Having trouble retrieving the tag name, it seems to be giving me some difficulty

I have two separate web pages, one called mouth.html and the other nose.html. I want to retrieve a name from mouth.html and display it on nose.html when a user visits that page. How can I accomplish this using JavaScript? Here is the code snippet from mou ...

javascriptajaxjquery

Utilizing JQuery to differentiate a single element within a group of elements

As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...

javascriptjqueryhtmlcss

Unable to access nvm within a bash script

I'm currently working on automating the setup of my development environment using a shell script. This involves installing Python, NVM, Node, MongoDB, and other tools. For installing Node, I rely on NVM. However, after running the installation command ...

node.jsshellnpmnvm

Can you explain the distinction between object allocation using the '=&' operator and the Object.create() method?

I have been delving deep into JavaScript object operations. My question revolves around the difference between const me = Object.create(person); and const me = person;. Both of these operations provide a similar output as they reference the object to a new ...

javascriptnode.jsobject

Issue arised while trying to open Bootstrap modal window due to conflict with surrounding elements

I'm facing a challenge with getting the bootstrap modal window to pop up on my website. Despite trying various solutions and troubleshooting steps, I haven't been able to resolve the issue. Even after eliminating all scripts except for the boots ...

javascripthtmlcsstwitter-bootstrapbootstrap-modal

Utilizing JSON information acquired through AJAX within a distinct function

Sorry if this question has been asked before, I tried following suggestions from another post but they didn't work for me. What I'm trying to do is fetch some JSON data, save a part of it in a variable, and then use that variable in a different f ...

javascriptphpjqueryajaxjson

My private module is being overlooked by npm and is consistently returning a 404 error when trying to access the

Has anyone encountered this issue before? I have a private module that I want to add to my app. I've referenced it as a tarball on Gemfury, and although it works fine locally, when I try to run "npm install" on my Joyent box, I get the error below. I ...

node.jsnpmjoyent

Obtaining the count of distinct values for a specific property in an array of objects

I have a unique array structure as follows: const uniqueArray = [ { _id: '1', userId: '5' }, { _id: '2', userId: null }, { _id: '3', userId: null }, { _id: '4', userId: '1' }, { _id: &ap ...

javascriptarraysobject

Vetur's "go to definition" feature is unable to redirect users after pressing alt and clicking

I consider myself a proficient user of Vue and I require the ability to ALT+click (multiCursorModifier) on different Vue components in my project to navigate to their definition/implementation. I have already installed Vetur and configured the following se ...

javascriptvue.jsvuejs2vetur

What's the most effective method for handling routes and receiving parameters in ExpressJS?

I have created a unique Express.js system where each file in the /routes folder serves as a separate route for my application. For example, /routes/get/user.js can be accessed using http://localhost:8080/user (the /get denotes the method). You can view m ...

javascriptnode.jsexpresswebroutes

Utilizing jQuery's .done() and .fail() methods to handle

Our goal here is to control the outcome of the createSite function. If it returns {ac:failed}, then the .fail(failOption) will be triggered; otherwise, the sendMail or .done(sendMail) function will be executed while still retaining the data from the crea ...

javascriptjqueryajax

Is it possible to utilize custom CSS to conceal commas and evade a JSX bug?

One element of my website relies on the following .js code snippet: items.add( `field-${field.id()}`, <div className="Mason-Field Form-group"> <label> {field.icon() ? <>{icon(field.icon())} & ...

javascripthtmlcssjsx

Implementing Riot API Promises with Fetch for Ultimate Efficiency

I'm currently working on looping through 10 League of Legends matches and calling another API to retrieve the match details for each match. Here is the function I have set up: function getAllMatchData(ids) { const promises = []; _.take(ids, 1) ...

javascriptnode.jsexpresspromise

Display a linear list organized in a tree format, showcasing instances where children have multiple parents

I am new to Javascript and programming in general. I am working with a list of "step" objects that have a choice/solution field which references another object in the same list. My goal is to create a tree hierarchy based on this field. [ Below is the arr ...

javascriptangularjsalgorithmdebuggingtree

Encountering an unexpected token error in React.js

As a new learner of React, I am still getting acquainted with JavaScript. It has been my first week attempting to import React, and finally adding the CDN script tag into my index.html. Normally, I can easily add XML tags into JS files, but when trying to ...

javascripthtmlreactjs

Enhance default values with inheritance in Javascript using jQuery's prototype extend functionality

Is there a way to expand the default options for multiple Prototype-based JavaScript constructor functions? I am attempting to access the options object in the Events object. Is this achievable? const Website = function(options){ this.options = $.ext ...

javascriptjqueryprototype

Navigating through a complex nested JSON structure using Node.js

I am currently working on a Node.js app and I am facing difficulties in looping through an irregular JSON to extract and print its data. The JSON structure is as follows: { "courses": [ { "java": [ { "attendees": 43 }, ...

javascriptnode.jsjsonnested

What is the best way to transform a GET request with a query string into a promise?

After successfully making a request with querystring params, I encountered an issue while trying to promisify my request: // Works var Promise = require("bluebird"); var request = Promise.promisifyAll(require("request")); request.get({ url: 'htt ...

javascriptnode.jsrequestnpm

Is it possible to create a Vue JSX component inside a Single File Component using the <script setup> syntax and then incorporate it into the template of the S

I am impressed by how easily you can create small components within the main component file in React. Is it possible to do something similar with Vue 3 composition API? For example: Component.vue <script setup> const SmallComponent = <div> ...

javascriptvue.jsjsxvuejs3vue-composition-api