meteorminimongo

How to make minimongo.js works in browser?

The github presentation of minimongo states it as

Client-side mongo database with server sync over http

There is a also a minimongo-standalone providing a minimongo.min.js which states :

You could also just download the minimongo.min.js, place it on your server, and reference it in your source.

For browsers

<script src="/js/minimongo.min.js"></script>

I previously used d3.js which is packaged in a way so the .js file works both in web-browsers as a lib and on nodes as a npm packages.

So I tried locally with my newly downloaded minimongo.js to build a classic webpage with indexeddb in Chrome as I would do with D3.js. It gives something like that (jsfiddle) :

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MiniMongo</title>
    <script src="https://rawgit.com/rurri/minimongo-standalone/master/minimongo.min.js"></script>
    <!-- https://github.com/rurri/minimongo-standalone/blob/master/minimongo.min.js -->
  </head>
  <body></body>
  <script>
    // Require minimongo
    var minimongo = require("minimongo");
    var LocalDb = minimongo.MemoryDb;
    // Create local db (in memory database with no backing)
    db = new LocalDb();
    // Add a collection to the database
    db.addCollection("animals");
    doc = { species: "dog", name: "Bingo" };
    // Always use upsert for both inserts and modifies
    db.animals.upsert(doc, function() {
      // Query dog (with no query options beyond a selector)
      db.animals.findOne({
        species: "dog"
      }, {}, function(res) {
        console.log("Dog's name is: " + res.name);
      });
    });

  </script>
</html>

It returns the errors :

Uncaught ReferenceError: _ is not defined
    at minimongo.min.js:1
    at minimongo.min.js:3
Uncaught ReferenceError: require is not defined
    at (index):5911
Uncaught ReferenceError: _ is not defined
    at (index):91
    at window.onload ((index):5889)

What am I missing or misunderstanding ? How to make it work if possible ?

Solution

  • A few things

    1. Dependencies

    If you read the README.MD of minimongo-standalone, it says

    Requirements

    underscore, async

    So you will need to include both those libraries on your page before the minimongo script tag.

    <head>
  <script src="https://link/to/underscore.js"></script>
  <script src="https://link/to/async.js"></script>
  <script src="https://rawgit.com/rurri/minimongo-standalone/master/minimongo.min.js"></script>

    It's important to mention that you need to get the browser versions of these libraries. It seems that async don't use a Universal Module Definition (UMD) and so provide separate files for different targets.

    2. Require

    The function require doesn't exist unless you are using browserify or another commonJS module loading framework.

    I haven't checked async or underscore, but most libraries will fallback to ordinary globals in the browser if a module system isn't present.

    After including the three script tags you should be able to access minimongo-standalone's exported symbols globally

    3. minimongo-standalone has a very different API to minimongo

    A frustrating point; minimongo-standalone implements the Meteor wrappers around minimongo, and then renames them again. Meaning that any minimongo or Meteor code is not directly transferable.

    The good part is that the API is a great deal simpler. The equivalent code for your example would be

    // Create collection
var animals = new LocalCollection('animals');
// Insert/update a document

var doc = { species: "dog", name: "Bingo" };
animals.upsert('dog', doc);

// Fetch document and log
var myDog = animals.findOne({ species: "dog" });
console.log("Dog's name is: " + myDog.name);