Part 1: Creating your plugin
What is a Reaction plugin?
A Reaction plugin is a plain old JavaScript module.
Going forward, Meteor is moving away from their proprietary package format and towards the ES6 modules standard. Reaction is adopting the module approach as well. While adding some boilerplate structure, using JavaScript's native built-in modules adds clarity and removes some of the magic that created global Meteor elements.
Before moving forward you should have a good understanding of how imports and exports work and importing CSS and HTML files.
Getting started
client
and server
directory structure
Add Start with a fresh checkout of the latest version of Reaction.
- Create a directory with the name of the plugin,
beesknees
, within theimports/plugins/custom
directory of Reaction. - Within
beesknees
, createclient
andserver
directories.
You may, at this point want to also git init
so you can start tracking your new package with source control.
The reference files for this tutorial are available here.
register.js
Create a The first file we create is going to be our register.js
. This is absolutely the bare minimum you need to create
a plugin. The register.js
adds your plugin to the Registry, the Packages collection in the database.
- Create a
register.js
file would look something like this:
// register.js
import { Reaction } from "/server/api";
Reaction.registerPackage({
label: "Bees Knees",
name: "beesknees",
icon: "fa fa-vine",
autoEnable: true
});
At this point, your local directory should look like:
└── imports
└── plugins
└── custom
└── beesknees
└── client
└── server
├── register.js
Load the plugin
Now, to see load the plugin, run:
reaction reset -n
Registry entries are added when the app first starts, but they don't get reloaded if they already exist. Running reset
will reset the database and restart the app, allowing the app to read the register.js
file you just created.
An alternative option to load a plugin would be to remove that entry directly from the Packages
collection.
ProTip: Pass the
-n
flag toreaction reset
to skip deleting the node_modules folder.
Next: Using Layouts