title: Web dev - setup firebase firestore question
body: <p>i asked here few questions before and i did always got help so here i am again,
  im kinda new to HTML,CSS,JS and i just wrote some html- css -js code for single webpage and i need to add some data that i can manage (data base) i searched online and found firestore and good solution for me (if u recommand on other ways to use live-data on ur site ill be happy to hear)
  anyway i opened firestore database and set everything in firebase website went to my project followed this instructions:
  <a href="https://firebase.google.com/docs/firestore/quickstart#web-version-9" rel="nofollow noreferrer">https://firebase.google.com/docs/firestore/quickstart#web-version-9</a>
  and
  <a href="https://firebase.google.com/docs/web/setup" rel="nofollow noreferrer">https://firebase.google.com/docs/web/setup</a>
  and few videos online
  i tried all methods in these websites and youtube and still i cant make this work i even tried to load my website on XAMPP (maybe its not related to my problem but i cant think of any more solutions) please help me figure it out and try to explain the details as much as u can so it will really clear this for me.</p>
  <p>this what ive done now:
  1.my project is in htdoc folder inside XAMPP
  2.i run Apache module in XAMPP in port 8080
  3.i use localhost:8080/Website/Main.html in google chrome to reach the website
  4.used npm install firebase in visual studio code console
  these are my files:
  Index.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt; Calander &lt;/title&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/7.14.2/firebase-database.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/7.14.2/firebase-storage.js&quot;&gt;&lt;/script&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;Calander.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&quot;&gt;
  
      &lt;div class=&quot;calander&quot;&gt;
  
      &lt;/div&gt;
      &lt;script type=&quot;module&quot; src=&quot;firebase.js&quot;&gt;&lt;/script&gt; 
      &lt;script src=&quot;Calander.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>firebase.js</p>
  <pre><code>import { initializeApp } from &quot;.//node_modules/@firebase/app&quot;;
  import { getFirestore } from &quot;.//node_modules/@firebase/firestore&quot;;
  
  
  const firebaseApp = initializeApp({
      apiKey: &quot;******************&quot;,
      authDomain: &quot;******************&quot;,
      projectId: &quot;******************&quot;,
      storageBucket: &quot;******************&quot;,
      messagingSenderId: &quot;******************&quot;,
      appId: &quot;******************&quot;,
      measurementId: &quot;******************&quot;
  });
  
    const db = getFirestore();
    
    import { collection, addDoc } from &quot;.//node_modules/@firebase/firestore&quot;; 
  
    try {
      const docRef = await addDoc(collection(db, &quot;users&quot;), {
        first: &quot;Ada&quot;,
        last: &quot;Lovelace&quot;,
        born: 1815
      });
      console.log(&quot;Document written with ID: &quot;, docRef.id);
    } catch (e) {
      console.error(&quot;Error adding document: &quot;, e);
    }
  </code></pre>