Getting started
Step 1: Clone the Hollaex plugin starter
Clone the Hollaex plugin starter package from the Github repository.
Step 2: Install dependencies.
Step 3: Choose the plugin type
Step 4: Initialize the plugin template
Run
npm run add-plugin --plugin=<PLUGIN_NAME> --type=<PLUGIN_TYPE>
to initialize a plugin template.
Step 5: Disable CORS on your browser.
Step 6: Plugin interactive development mode
Once the plugin is initialized, run the following commands simultaneously:
Run
npm start --plugin=<PLUGIN_NAME>
on the Hollaex plugin starter kit web dir.Run
npm run dev:plugin --plugin=<PLUGIN_NAME>
on the Hollaex kit web dir,
In order to see the plugin's changes, we need to refresh the page after every change.
Step 7: Using the kit context
We can always directly use props passed from the kit to the remote component. However, to prevent passing some props through many levels, a context is provided to make these props globally accessible. You can partially subscribe to the context to access props from the kit in a more efficient way.
Step 8: Using strings and icons
We can use strings and icons from the main kit.
We also can define new strings and icons by adding them to strings.json and icons.json under the assets folder respectively.
These values are added to the kit strings and icons object during kit initialization. To use local assets in your component, you should convert the local id to the global one by using the generateId function from the kit context.
Consider we have the following strings.json file.
To use the title
string, we need to make the string key global using the generateId
function. This function is globally accessible in the kit context.
Then we can get the string from the global strings object using the above-mentioned global id. The global strings object is also available in the kit context.
Last updated