Setting up your development environment

While you're developing your project, there are several default packages and settings that make your debugging and development work much easier. This recipe will give you suggestions to help create an ideal development environment.

Getting ready


You'll want to make sure you have Meteor installed (of course), and you will need a default project file structure set up. You can either use the Setting up your project file structure recipe from earlier in this chapter, or create a brand new Meteor project using the meteor create [...] command.

This recipe assumes that you have some Mongo collections and/or some kinds of user accounts set up. If you don't have a collection added, you may want to add one just for testing purposes. To do so, create a file named [project root]/both/model.js and enter the following line of code:

testCollection = new Mongo.Collection('testCollection');

With a project in place and at least one Mongo collection to monitor, we're ready to start developing and debugging!

How to do it…

First, we want to make sure that the insecure and autopublish packages are installed, which is usually the case with a default Meteor project.

1. In a terminal window, navigate to the root folder of your project and enter the following command:

   $ meteor list
   

   This will list all the packages used by your project. You should receive something similar to the following:

   autopublish      1.0.2
   insecure         1.0.2
   meteor-platform  1.2.1
   …
   

2. If the autopublish or insecure packages are missing, you can add them manually by entering the following commands:

   $ meteor add autopublish
   $ meteor add insecure
   

3. Next, install the msavin:mongol smart package. In the terminal window, enter the following command:

   $ meteor add msavin:mongol
   

   After a short installation process, you should receive a message indicating that the msavin:mongol package was installed correctly.

4. Start your meteor project by entering the following command in your terminal window:

   $ meteor
   

5. Open your app in a browser by navigating to http://localhost:3000. Once there, press Ctrl + M and look towards the bottom-left of the screen. You will see a small expandable dashboard, similar to the following screenshot:
   

   Clicking on any of the collection names or the Account tab will let you view, update, delete, and insert records, as shown in the following screenshot:

   

This comes in very handy when you're building your app, as you have instant access to your collections and user account profiles.

How it works…

The following line is all that's needed to install a package:

$ meteor add msavin:mongol

This tells Meteor to go and find the msavin:mongol package, with all of its dependencies, and add the package to your project. This is a third-party package, and more details on the package can be found at https://atmospherejs.com/msavin/mongol.

Once installed, you can access it on your browser page by the Ctrl + M shortcut. Under the hood, the mongol package is monitoring for any collections, specifically filtering user-account-related collections into the Account tab. Other than that, all collections are treated the same, and this interface just simplifies your debugging/development process when you need to see what's going on inside your collections.

There's more…

Mongol is very new but it is getting better all the time. You can read about all it's current features and preview upcoming features by visiting https://github.com/msavin/Mongol.

See also

• The Adding Meteor packages, Removing Meteor packages, and Using npm modules recipes in Chapter 2, Customizing with Packages
• The Basic safety – turning off autopublish and Basic safety – removing insecure recipes in Chapter 9, Securing Your Application