2

I want to build a Service with the Smartphone-App differing from the Website or WebApp respectively. My idea was to have different routing tables in iron router, like so:

/client

  • routes.js

/cordova

  • routes.js

...

Additionally the files could be enclosed by "if (Meteor.isCordova) {" and "if (Meteor.isClient) {" brackets.

So far I tried this:

Router.map(function() {
  if (Meteor.isCordova) {
    this.route('homeCordova', {
      path: '/'
    });
  }

  if (Meteor.isClient) {
    this.route('homeWeb', {
      path: '/'
    });
  }
}

and it works for the paths, but not for the layout, so

if (Meteor.isCordova) {
    Router.configure({
      layoutTemplate: 'mainLayoutCordova',
      loadingTemplate: 'loadingCordova',
...

  if (Meteor.isClient) {
    Router.configure({
      layoutTemplate: 'mainLayout',
      loadingTemplate: 'loading',
...

doesn't go.

As an alternative I could have two different Meteor-Apps running at the same time on my server? Does that make any sense?

Any idea how to fix it or how to solve this issue?

The example-app localmarket only has the smartphone app, so only 1 router.js file, also verso, if you're logged in, the WebApp looks pretty much the same as on the phone.

Regards

user3819370
  • 513
  • 1
  • 6
  • 15

5 Answers5

3

I'm brand new to Meteor, but am finding that this approach seems to work:

I have two different parent templates for web and mobile. And a main template that dynamically serves one or the other based on an environment variable. 

<body>
  {{> main}}
</body>

<template name="main">
  {{> Template.dynamic template=environment}}
</template>

<template name="web">
  <h2>On the Web</h2>
</template>

<template name="mobile">
  <h2>On a Phone</h2>
</template>

A main helper changes the environment variables based on the value of Meteor.isCordova.

Template.main.helpers({
  environment: function() {
    return Meteor.isCordova ? "mobile" : "web");
  }
});

This may be overly simplistic and doesn't involve any routing, but as a way of serving essentially two different apps on the client it seems to work.

nicholas
  • 14,184
  • 22
  • 82
  • 138
  • Thank you for your answer. Since I asked the question some time ago, meanwhile I implemented the solution pointed out by @Guidouil. While your kind of solutions work, to me the main issue is that both apps are served on the Web- and Cordova-Client respectively, which I just didn't find elegant, space-efficient, in addition to security-issues (WebApp has Admin privileges). For that reason I prefered two completely different Meteor projects, connected by a linked common Folder and also the mongodbs need to be connected (see above). – user3819370 Jan 21 '15 at 14:50
2

Please, note that Meteor.isClient is true in any client environment, including mobiles. So in your case you may test if you are in web this way:

if (Meteor.isClient && !Meteor.isCordova) { // here comes web }

romaroma
  • 658
  • 8
  • 13
1

It might seem's stupid but maybe you should do two meteor app, one with the browser and server and the mobile version as a standalone connected to the server. You will have to share the global and server folders during the dev part but it might be the most direct working way to do so. On my side I'm doing identical for web and app so I don't get your issue...

Guidouil
  • 1,694
  • 2
  • 18
  • 18
  • you mean you don't have my issue. But thank you, yes, I've thought about this possibility before, but since I am not too familiar with the insides of NodeJS and MongoDB, I thought probably problems arise due to 2 Meteors running at the same time, there would be two mongo instances. Then there could be caching or synchronization problems. But that's what I would probably try next. Mostly if both Apps look the same it is a "simple" App. In my case the Cloud-Service is a central controlling service for the Smartphones, it got more functionality, so it cannot be identical, that's why. – user3819370 Nov 15 '14 at 10:48
  • @user3819370 the idea is not that bad, you might simply run 2 instances of meteor and share the same MongoDB [see here](http://stackoverflow.com/questions/13115723/how-can-i-share-mongodb-collections-between-meteor-apps) note that changes on mongoDB are now triggered in realtime (as it wasn't the case in 2012 where the propagation was done every 10sec) – Flavien Volken Nov 30 '14 at 18:51
  • That was what I was looking for. Seems a possible solution, thx. Makes sense somehow, since for complex apps, it's really two different apps, the website and the smartphone app. Files can be shared via softlink, will try it out and share my results. – user3819370 Nov 30 '14 at 20:14
1

Whilst the OP was 10 months ago, this is a question I had been trying to get my head around for some time also and have found far more dead ends than useful links, therefore I'm adding this to help direct others towards what I've learned is the best solution within Meteor for this use case.

The easiest and most elegant way to deliver two or more specifically focused apps (i.e. traditional web app and hybrid mobile app) is to use Meteor's Packages feature.

Packages allow you to create individual code packages and inject them only under specific circumstances, i.e.: mobile would require the mobile package as well as the core server package to function, but would exclude the web only content package. That way, dedicated resources are not packages and distributed unnecessarily, keeping load times and storage space lower.

There are a couple of basic boilerplates you can inspect or even build from: https://github.com/Compy/meteor-mobile-desktop

https://github.com/danielfbm/meteor-cordova-web-example/tree/master/packages

The one big gotcha to watch out for using packages is the need to manually add file references to the api.add_files declaration of the relevant package.js file, otherwise the package will not recognise and include them in the build process.

awlh
  • 11
  • 1
0

A simple solution is to add a different basePath for each version like: "/mobile/main" and "/desktop/main". On the mobile you just need to be sure you start on a mobile route and you also need to handle 404 errors so you don't redirect the mobile client to a desktop route.

Mário
  • 1,603
  • 14
  • 24