Building a pure offline Meteor app

Question

Seems to be some questions about how one can use Meteor offline when there's no internet connection here on Stack Overflow, but I'm interested in if it's possible to build a Meteor application that will only be used offline. For example, is it possible to generate folder containing a single HTML file and all other files necessary (images, and possible CSS files and JavaScript files if they aren't embedded into the HTML file), and everything works out of the box when one opens the HTML file in a browser?

As far as I have tested, one can kind of getting it to work using the appcache package (one visits the page once when one is online, and then one can visit it when one is offline), but it seems unreliable.

I've also noticed the stand alone blaze project, but I want to take advantage of Meteor's features (hot code pushes during development, packages, minimongo, etc.).

So, does anyone know if what I want to do is achievable in some way?

A separate client-side Minimongo appears to be available at https://github.com/mWater/minimongo. — nwk, Jan 05 '15 at 21:17
Do you mind using hacky techniques (e.g extracting out the files from the bundled tar.gz)? It is possible to do what you're asking, I used to do it prior to Meteor's cordova support to make an android app — Tarang, Jan 05 '15 at 22:03
@Akshat, no, if that isn't is too complicated, I can live with it. Do you mind describing the procedure? Or is it quite straight forward? — Peppe L-G, Jan 05 '15 at 22:32

Tarang · Accepted Answer · 2015-01-06T16:36:03.207

You can build a purely offline Meteor app but there are a few 'weird' compromises.

Meteor is a bit forceful when it comes to making a DDP connection, so it is made to 127.0.0.1 as a sort of null loopback, since there is no server.
Meteor already builds the app in this offline-only way since the Cordova system was introduced, so its just extracting that out pretty much. There are builds for server, web.cordova and browser.

1 ) Bundle your app and extract it out

I'll just make a random example out of the todo app (it requires a server side bit, but well ignore that)

meteor create --example todos
cd todos
meteor bundle ~/Desktop/app.tar.gz
cd Desktop
tar xvzf app.tar.gz

2) In bundle there is a directory at /programs/web.browser, this is the framework of your offline app so take that directory and put it somewhere.

3) There are two files with a hash as the filename. Rename them as app.js and app.css

4) There is a directory called app. Move all its contents up to the main directory, i.e

cd app
mv * ../
rm -r app

5) Create a index.html file with the following in it:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="app.css?meteor_css_resource=true">
    <script type="text/javascript">
    __meteor_runtime_config__ = {
        "meteorRelease": "1.0.0",
        "ROOT_URL": "/",
        "ROOT_URL_PATH_PREFIX": "",
        "autoupdateVersion": "00000",
        "DDP_DEFAULT_CONNECTION_URL": "127.0.0.1"
    };
    </script>

    <script type="text/javascript" src="app.js"></script>

    <script type="text/javascript">
    if (typeof Package === 'undefined' ||
        !Package.webapp ||
        !Package.webapp.WebApp ||
        !Package.webapp.WebApp._isCssLoaded())
        console.log("Load Fail");
    </script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
    <meta http-equiv="content-language" content="en">
    <meta name='apple-mobile-web-app-capable' content='yes' />
    <meta name='apple-mobile-web-app-status-bar-style' content='black' />
    <title>Your App</title>
</head>

<body>

</body>

</html>

and voila:

Keep in mind this app *needs* a server so its quite useless this way, but you can make a purely client side app

Keep in mind this app needs a server so its quite useless this way, but you can make a purely client side app if you wanted.

Other considerations:

Use file based html paths for images, fonts and other files (file.jpg instead of /images/file.jpg)
With iron router its a bit tricky but you can't use / you'll have to use index.html and relative paths
You can remove redundant packages in meteor-platform that you will not use, such as autoupdate
There are a few packages on atmosphere that help with data storage such as ground:db instead of mongo collections which require a server side.

I tested this with my own app. `meteor bundle` is deprecated, and I was instructed to use `meteor build` instead. Also, I got no `app` directory (may be because my app got no images?), but the app worked offline without problems. Thanks! — Peppe L-G, Jan 07 '15 at 17:33
@praneybehl No hot code push wont work. Its 100% offline. This isn't to say it can't be implemented some other way since it's just updating the html and js files. — Tarang, Apr 27 '15 at 07:37
This worked for me in 2022 (don't ask why I am doing this in 2022!). I had to add: `"meteorEnv": { "NODE_ENV": "production" }` inside `__meteor_runtime_config`. Using Meteor 1.6 so `bundle` not removed. Deployed to an S3 website with `index.html` set to both root page and error page, so it achieves a similar result to Meteor's SPA behaviour. — Nabil Freeman, Apr 08 '22 at 10:36

Building a pure offline Meteor app

1 Answers1

Linked

Related