68

Can a Meteor template be packaged up and deployed as a PhoneGap application?

Marcus Estes
  • 791
  • 1
  • 6
  • 5
  • Please see the most recent answer by @Mitja Bezenšek for the most up-to-date supported way to do this with the latest release of Meteor (0.9.3). – Norman H Sep 29 '14 at 14:05

7 Answers7

39

Yes, this is possible, but not by packaging the meteor app on the phone. You have to point phonegap to your meteor server instead (you will still be able to use the API for accessing functionality on the device). Here are the instructions:

That's it. Compile and run the app.

A couple of time savers:

  • You can start setting up your meteor directory by copying the www/ directory contents into your meteor server root directory. Make sure to copy the javascript files under the client/ directory so that they get loaded before the main meteor js file.
  • Run app.initialize(window) from your main meteor js file, if the window parameter is not passed, the app will crash.
  • Don't try to set up the meteor server under the www/ directory in Xcode. You won't be able to deploy to a device because the .meteor subdirectory contains symbolic links to your node modules.
snez
  • 2,400
  • 23
  • 20
  • 8
    Thanks! But i didn't change the ViewController. I just changed the `config.xml` to `` as thats the property thats gets set in the ViewController to appURL by default. – nooitaf Oct 14 '13 at 05:29
8

As of 0.9.2 version of meteor it is easy to use Phonegap: https://www.meteor.com/blog/2014/09/15/meteor-092-iOS-Android-mobile-apps-phonegap-cordova

Mitja Bezenšek
  • 2,503
  • 1
  • 14
  • 17
  • Here is a Dev shop video showing how to do this: https://www.youtube.com/watch?v=4dJLPLWMImw – Justin Sep 30 '14 at 22:33
7

Well, I guess the best starting point is figuring out how far you want/need to go.

Would you want

  • A Meteor.js PhoneGap app that connects to a server somewhere? Then you´d probably want to use the Meteor classes in a PhoneGap project and connect to your server with Meteor.connect(url).

  • Offline App data persistence - That´s gonna get tough... That´s not something Meteor was designed to do, although there surely are ways
    to achive it. I remember that discussions from backbone, spine and
    other client side JS frameworks. It´s easy to use local storage, but the real effort there begins when you want to sync data between local and the server.

That should help to get to the point...

thomasf1
  • 1,782
  • 4
  • 18
  • 32
4

I have done in crude way to some extent and here the process I followed:

  • Take todos example
  • Create a todos bundle with meteor bundle ../todos.tgz
  • Extract the bundle Open the extracted bundle in your editor
  • Open the .js file in static_cacheable/ folder and format it, and replace the ajax call from "file://" request with actual host request.
  • I did this on line 1766 which creates the ajax handler with 

    u.protoype._start = function(a, d, e, f){
        d = d.replace("file://localhost","http://localhost:3000");
        ...
    }

After this open the app.html file in browser and make sure the server is already running. This way you would most of the application working.

However this is not how would you like to use it in your real application but with more changes it is possible to use the client side in Phonegap with server running somewhere else.

Edit

Meteor has a method connect to connect to a different meteor application which might resolve the above url replace call, although I have not tried that yet.

dhaval
  • 7,611
  • 3
  • 29
  • 38
  • I'm not seeing any "file://" strings in my static_cacheable/*.js file. I tried editing the css and script lines in app.html to use the fully qualified server URL ('http://myapp.meteor.com/xxxx.js' instead of '/.xxxx.js'), but that just results in a white screen in the Phone Gap app. Phone Gap is serving app.html locally, how can I modify the js to point to my server? – mb. May 17 '12 at 15:59
  • You wont find it directly, it comes as a parameter to the `_start()` method. Check the `_start()` method definition which creates the XHR object and replace the url parameter with you target domain. – dhaval May 18 '12 at 06:03
4

Here is simple steps to port Meteor app in mobile device using PhoneGap Meteor on Mobile Device using PhoneGap

Just change your stream_clientbf90.js to port to your domain.it works.

snowflax
  • 49
  • 2
  • 2
    Welcome to Stack Overflow! Thanks for posting your answer! Please be sure to read the [FAQ on Self-Promotion](http://stackoverflow.com/faq#promotion) carefully. Also note that it is *required* that you post a disclaimer every time you link to your own site/product. – Andrew Barber Nov 24 '12 at 13:31
  • 2
    this blogpost seems outdated, as Meteor is in rapid change. The file mentioned in the post does not exist in my project – Micha Roon Jan 02 '13 at 20:08
2

Here is live demo on phonegap + meteorjs + oauth2.
I created this app with meteor on google play.
https://play.google.com/store/apps/details?id=com.youiest.tapmatrix&hl=en
It's a private work so could not disclose source code.
Please feel free to ask questions on it.
There are multiple ways I tried to work with meteor + phonegap.
Thanks.

nicolsondsouza
  • 426
  • 3
  • 15
2

There is also this package: https://github.com/awatson1978/cordova-phonegap

I havn't tried it personally, but it seems the right approach.

Update: In the devshop of august, phonegap support has been announced from the core team with cool demos and stuff.

To play around with it: 

meteor update --release CORDOVA-PREVIEW@3

Getting started: https://meteor.hackpad.com/Getting-Started-With-Cordova-Z5n6zkVB1xq

Benjamin Crouzier
  • 40,265
  • 44
  • 171
  • 236