Installing Packages in Meteor
Learn about packages and how they’re installed in MeteorJS.
We'll cover the following
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.
Get hands-on with 1200+ tech skills courses.