Installing Packages in Meteor

Packages

A package is code authored by someone else that provides a solution to a particular problem. Plenty of packages are available for us to use in our MeteorJS applications. We normally import packages to use alongside our code. We can use two package systems in Meteor.

Atmosphere packages

These are packages that we can search for on Atmospherejs.com. We can add an Atmosphere package to our Meteor package by typing the following command:

meteor add package_name

A package can be removed from our project using the following command:

meteor remove package_Name

For example, if we want to add Bootstrap (a popular CSS framework) to our project, we can install useraccounts:bootstrap by typing this on the terminal:

meteor add useraccounts:bootstrap

Atmosphere packages maintain a naming convention in which the author’s username is useraccounts and the package name is bootstrap, like in the example above. This is necessary to identify each unique package. Atmosphere packages can only be used in a Meteor application.

npm packages

npm packages are made available for the wider Node.js community. npm stands for Node Package Manager and is a repository of useful code written for Node.js projects.

We can search for npm packages on npmjs.com. Installation into a Meteor project is done through the terminal by typing the following:

meteor npm install package_name

npm packages can be used in any Node.js project—unlike Atmosphere packages, which are only compatible with Meteor projects.

Installing a package

To install a package in a Meteor application, we need to navigate to the folder where the application is located and open the terminal at that location. In the task below, we’ll install Bootstrap into our project to use Bootstrap styles.

Task

Let’s install Bootstrap into our Meteor project. Click “Run” and start the application. While the application is running, click the “+” symbol after the terminal tab. This opens a new tab. We’ll then navigate to our project folder. On the newly-opened terminal, type the following command to navigate to the root directory:

cd meteor_react_app

Next, type the following:

meteor npm install bootstrap

This installs Bootstrap into the project. After it finishes installing, click the “Run” button.

Next, proceed to the imports/ui/App.jsx file and, in line 4, add the code below. This imports Bootstrap styles into the application.

import 'bootstrap/dist/css/bootstrap.min.css';

Open the imports/ui/Hello.jsx file and, on line 12, add a Bootstrap class to the button. Look for the button code below:

<button onClick={increment}>Click Me</button>

Replace the button code above with the following:

<button onClick={increment} className="btn btn-danger">Click Me</button>

Click “Run” to see the changes in the application styling.