Meteor website and mobile (ionic/cordova) app in one project


#1

Hey there,

So awhile back (before 1.3) I wrote a project that was both a web app (meteor-angular) and a mobile app (ionic). It shared the logic of the controllers, the views were separate, and the styling was independent as well (i.e. web used bootstrap, mobile used ionic).

Now i’m looking at using the latest version of Meteor (probably angular2/react) and I was wondering if there are any examples/projects of the best way to achieve this. I’m assuming I can use the imports folder and clearly separate web/mobile, but any recommendations on the best folder structure would be great!

The second problem I had was that I couldn’t use the ionic command line to actually view the mobile previews. I had to use meteor to run it on ios/android (which was a pain) and I ended up writing some code to show the mobile result in the browser (and resize the window to suit) which was a bit hacky.

Previously I had to create two packages (one for desktop and one for mobile). I remember one of the main reasons that I did this was to ensure the meteor compiler didn’t importing the bootstrap styles for mobile and vice versa.

Previous folder structure: https://postimg.org/image/4bp2wtalr/

client folder
-> compatibility (special javascript libraries)
-> components
–> layout (shared controllers/views)
–> ui (shared directives)
–> modules (basic definitions of modules)
-> app
–> app.component.js (component that loads the initial desktop or mobile template if it’s cordova)
-> styles
–> shared styles
->lib
–> app.ng.js (array of mobile modules, browser modules,and init of angular based on if cordova or not)
-> model (shared models)
-> public (fonts images)
-> server (methods, publish, startup)
-> packages
–> web
-----> client
-------> bunch of modules / controllers / templates
-------> app.html
-------> main.scss (imports bootstrap css)
—> mobile
-----> client
-------> as above but main.scss imports ionic css

Also looking at the angular2 guide (ionic) he has the desktop using material ui, the mobile using ionic, however all of the css is being loaded on both and the styling is only being “applied” by adding a class to the body “mobile” or “web”… I would rather not have the web css loading on the mobile at all!
http://www.angular-meteor.com/tutorials/socially/angular2/ionic