Jun 23, 2015

Meteor tutorial - Part II - Building mobile applications

In my previous blog post, I have explained basics of meteor. In this tutorial I am going to add mobile support to the existing meteor application.

Installing mobile SDKs

Before going to start we need to install IOS and android SDKs (Software development kit). Here I am installing SDKs for iOS. Please keep in mind this is one time process.

For installing iOS SDKs, we need to invoke “meteor install-sdk ios”.

The same way you can install android SKDs by invoking “meteor install-sdk android” command.

Adding mobile platform support

I am using already created application called “myapp” and going to add iOS platform support by invoking a command “meteor add-platform ios”.

We can add android platform by invoking a command  “meteor add-platform android”.

Running application on mobile emulator

Once we add mobile platform then we can run our application by using real mobile device or emulator. I have added IOS platform to myapp already. Now I am going to run that application by using iPhone emulator by invoking command called “meteor run ios”. 

Whenever we run above command that will add cordova support to the application and convert our web application into mobile hybrid application by using cordova. Cordova internally use webview for rendering web page. If everything is done, you can see iPhone simulator, that will display our web page.

Running application

By using same way we can launch android simulator by invoking “meteor run android” command.

Running application on real device

We can run our application on real device by invoking below commands.

For iOS - meteor run ios-device
For android - meteor run android-device

Obviously the mobile should be connected to the computer. For iOS, we need to install corresponding provisioning profile into the device before using it for testing. 

Personally I like this approach because there is no real IDE like XCode, Eclipse involved in this process. This is really helpful for beginners because it is very simple and hides lot of internal mechanism involved in the process.

Configuring mobile app – metadata

In mobile application we need to configure lot of information in info.plist (for iOS) and android manifestfile.xml (for android). The meteor simplifies lot of stuffs, which involved in the configuration. For configuring, we simply need to create a JavaScript file called mobile-config.js and needs to include our configuration. Look into the below url for more information. 


In this tutorial we got steps involved in,

1. Adding mobile support to meteor application.
2. Running application on emulators.
3. Running application on real devices
4. Configuring mobile application metadata by using mobile-config.js.

In my next tutorial, I am going to explain internal architecture of the meteor application. 

Meteor tutorial - Part I

What is Meteor?

Meteor is a complete open source platform for building web and mobile application by using JavaScript. It is a combination of NodeJs, MongoDB and client side JavaScript.

Installing meteor

Meteor supports windows, linux and Mac operating systems. Invoke below command in terminal for installing meteor in mac operating system.

Check below link for installing meteor on other operating systems.

Creating an application

The command “meteor create <<app_name>>” is used for creating new meteor application. I have created an app called “myapp” and will see how we can run the application.

Running an application

“meteor run” command is used for running meteor application. Internally it start a node js server and by default that will listen 3000 port number. Just make sure you are in project directory (myapp) before invoking run command.

Other useful meteor commands

Meteor provides lot of useful commands for simplifying development process. This is very simple introduction about other meteor commands.

1. meteor help – This command is used for understanding purpose of other meteor commands. Example – I got the purpose of create command by using help command.

2. meteor debug – This is very useful command for debugging server side code.  Just use JavaScript keyword “debugger” for creating break points. By default it will wait at first statement of server side code.

3. meteor deploy <<site>> - This command is really useful for deploying application. Meteor provide free hosting and you can deploy application in <<appname>>.meteor.com. If someone already used app name then you will have to use different application name for deploying. Let me deploy my application and it will take a while for deploying.

It is deployed successfully and for verification load the URL in browser, which we have used while deploying the application.

4. meteor update – This is used for updating meteor version used by an application. You will have to run this command from your application folder and make sure you are upgrading other packages for avoiding compatibility issues.

5. meteor add – This is used for adding new package into the application.

6. meteor remove – This is used for removing previously added package from the application.

7. meteor search – This command is used for searching available packages in meteor.

8. meteor mongo – This is used for opening MongoDB shell command for modifying mongo database collection. Meteor internally use mongo-db for saving data.

9. mongo reset – This is used for resetting current project to fresh state and it removes all local data.

Meteor File Structure

Meteor is very flexible for structuring application. It automatically loads all of our files, so we don’t need to use script and link tag for loading JavaScript and CSS files. It does the following while loading files.

1. All CSS files are sent to the browser and in production mode it is automatically concatenate and minify the source files.

2. JavaScript is loaded on the both client and server. We need to use Meteor.isClient and Meteor.isServer condition for stopping execution of certain part of the source code.

3. HTML templates are compiled and sent to the client.

Actually meteor provides some directory structure for securing and improving performance of the application.

/client – The files, which are in client directory, are only served to the client. This is a good place for keeping our client side source codes like CSS, HTML templates and client side JavaScript files.

/server – The files, which are in server directory are used and loaded while starting server. These files are never sent to the client. This is good place for keeping server side JavaScript files and by the way we can secure our application.

/public – The files in public folder are served to the client as-is. So this is good place for keeping our static contents like images, and fonts.

/private – The files in private are not sent to the client and also contents are loaded only when access through Assets - server side.


In this tutorial we have seen,

1. What is meteor?

2. Steps for Installing and Configuring meteor.

3. Meteor available commands and corresponding usage.

4. Directory structure of meteor application and deploying meteor application.

In my next tutorial, I am going to explain building mobile apps by using meteor.