title: Error While Working With Firebase Storage
body: <p>This is my first attempt working with Firebase storage and I'm following this tutorial provided by Firebase: </p>
  
  <p><a href="https://www.youtube.com/watch?v=SpxHVrpfGgU" rel="nofollow noreferrer">https://www.youtube.com/watch?v=SpxHVrpfGgU</a></p>
  
  <p>I've seem to follow the tutorial step-by-step, however, I'm getting the following error and I can't find a solution for it: </p>
  
  <pre><code>firebase-storage.js:3469 Uncaught Error: No Storage Bucket defined in Firebase Options.
      at t.ref (firebase-storage.js:3469)
      at HTMLInputElement.&lt;anonymous&gt; (myFile.js:18)
  </code></pre>
  
  <p>When I click on 't.ref' it leads me to the following catch: </p>
  
  <pre><code>catch(error) {
     throw new Error(
         'Cannot instantiate firebase-storage.js - ' +
         'be sure to load firebase-app.js first.'
  )
  </code></pre>
  
  <p>Here's my HTML: </p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;title&gt;...&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="stylesheets.css" /&gt;
  
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;script src="https://www.gstatic.com/firebasejs/4.1.5/firebase.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          // Initialize Firebase
          var config = {
              apiKey: "...",
              authDomain: "...",
              databaseURL: "...",
              projectId: "...",
              storageBucket: "",
              messagingSenderId: "..."
          };
          firebase.initializeApp(config);
      &lt;/script&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav&gt;...&lt;/nav&gt;
  
      &lt;progress value="0" max="100" id="uploader" style="margin-top: 35px;"&gt;0%&lt;/progress&gt;
      &lt;input type="file" value="uploader" id="fileButton" /&gt;
  
      &lt;script src="myFile.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And my corresponding Javascript: </p>
  
  <pre><code>// Get elements
  var uploader = document.getElementById('uploader');
  var fileButton = document.getElementById('fileButton');
  
  // Listen for file selection
  fileButton.addEventListener('change', function(e) {
      // Get file
      var file = e.target.files[0];
  
      // Create a storage reference
      var storageRef = firebase.storage().ref('mover_docs/' + file.name);
  
      // Upload a file
      var task = storage.put(file);
  
      // Update progress bar
      task.on('state_changed',
  
          function progress(snapshot) {
              var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              uploader.value = percentage;
          },
  
          function error(err) {
  
          },
  
          function complete() {
  
          }
      );
  });
  </code></pre>
  
  <p>I guess my primary question is, is this error occurring since the storageBucket found within the initialize Firebase area has an empty value or am I missing something else?</p>