Mongo in client-side only

help
1

So, I was wondering it there is a chance to have the mongodb running only in client-side, in my React front-end?

Thats because in the back-end I have the database with MySQL.

Thanks!

2

It would be awesome if there was a clear-cut way to use Minimongo on the client only. I think it may be possible, perhaps not documented. It would be a nice simple alternative to things like Local Storage.

I know currently it is coupled with Meteor backend features. I’m not sure if it works without that coupling. We’d need to investigate that part of the code base.

Here’s the official minimongo package to start with (some details in its README there).

There also appears to be some a fork of it here, forked in 2014, to make it standalone on NPM. What’s neat about that fork is:

It is either IndexedDb backed (IndexedDb), WebSQL backed (WebSQLDb), Local storage backed (LocalStorageDb) or in memory only (MemoryDb).

3

Thanks for the reply!

I did left the minimongo in the packages but I just discovered the package “reywood:publish-composite”, will give it a try and hopefully stick with it in my project.

4

I don’t think that has anything to do with client-side-only Mongo, right? But anyway, if you make any progress on clientside Mongo, interested to know! :slight_smile:

5

I’ve used local, client side only, collections for things like shopping carts I do not want to manage sophisticated cart state for.

Just pass a null in as the name of the collection.

See: https://docs.meteor.com/api/collections.html

3 Likes
6

Mongo-like DB client storage is RealmDB.

1 Like
7

I think it is possible already. Some repro code here:

  1. Create a minimal Meteor project
$ meteor create nomongo --minimal
$ cd nomongo && meteor npm install
  1. create a local package that includes mongo package client-only:
$ mkdir packages && cd packages
$ meteor create --package minimongoclient
$ meteor add minimongoclient

Then in package.js:

Package.describe({
  name: 'minimongoclient',
  version: '0.0.1',
  // Brief, one-line summary of the package.
  summary: '',
  // URL to the Git repository containing the source code for this package.
  git: '',
  // By default, Meteor will default to using README.md for documentation.
  // To avoid submitting documentation, set this field to null.
  documentation: 'README.md'
})

Package.onUse(function (api) {
  api.versionsFrom('1.10.2')
  api.use('ecmascript')
  api.imply('mongo', 'client')
})
  1. Start app and look for the Mongo definition

Add the following code to server/main.js and client/main.js:

Meteor.startup(() => {
  console.log(global.Mongo)
})

It will login on server:

undefined

and on client:

{
  Collection: function Collection(name, options)​,
  Cursor: class Cursor { constructor(collection, selector) }​,
  ObjectID: class ObjectID { constructor(hexString) }
}

You can also lookup the folder .meteor/local/build/programs/server/ contains no mongo.js file, while .meteor/local/build/programs/web.browser/does.

I am not sure if this will work on deployment but it seems to work as any project created using --minimal does not contain mongo by default.

1 Like
8

yep that’s all you need to do. I have a few client-only apps. When you pass null as the collection name, it’s a client side only collection. Simple as that.

Also take a look at ground:db for persistent storage. I don’t think it has been updated recently, but minimongo hasn’t changed in a while either.

1 Like
9

@jkuester @drollins That’s great to know.

After that, how can we consume the client-only build? For example, suppose we have a static file server. What files would we need to serve (without running a Meteor server)?

I tried simply serving the folder .meteor/local/build/programs/web.browser/ but that isn’t enough, none of the scripts are included that way. head.html has no script tags in it. Looks like we need to make a script that injects it the same way the Meteor server does.

It’ll be great to make this really simple and documented. Then we can tout Meteor as a dev tool, not just a full stack framework.

10

Checkout on GitHub

It will dies exactly what you need- create a Client Side bundle that only contains HTML/CSS/JS and assets