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.
http://docs.meteor.com/#/basic/quickstart

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.

Conclusion

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.