Creating your own bundle

Decide <bundle-identifier> which is unique and describes the functionality the bundle offers e.g. 'search' (already implemented so prefix it with something like mysearch).

Create a folder with the name of your <bundle-identifier> under /packages/framework/ and /bundles/framework/. If you require styling/images create one under /bundles/framework/<bundle-identifier>/resources/css also. The /framework/ directory isn't enforced and you can replace it with something fitting your bundle compilation. The framework directory refers to the namespace of the same name and it includes (almost) all code written by the Oskari core team. It is encouraged to create your own namespace (and directories) for your own bundles.

Create a bundle.js file under /packages/framework/<bundle-identifier>/. You can use this sample as a template:

  • Change all the <bundle-identifier>s
  • Change the bundle name (MyBundle) to something more describing.
  • Change the bundle instance name (MyBundleInstance). Usually its the bundle name postfixed with "Instance".
  • List all the implementation files and css files under scripts. Note that CSS files need to have "type" : "text/css"
  • List all the localization files under locales or you can remove the locales property if your bundle does not include localization.

Create a instance.js file under /bundles/framework/<bundle-identifier>/. instance.js is a file you referenced in bundle.js scripts. You can use this sample as a template:

  • Change all the <bundle-identifier>s
  • Change the bundle instance name (MyBundleInstance). Use the same one you used before.

Add your bundle to the applications startup sequence like you did in previous steps (change the <bundle-identifier>):

    "bundlename" : "<bundle-identifier>",
    "metadata" : {
        "Import-Bundle" : {
            "<bundle-identifier>" : {
                "bundlePath" : "../../../packages/framework/"

Start adding your code in instance.js. If you have lots of code it is encouraged to add multiple .js files beside the instance.js (under the bundles implementation folder structure). These files can define other Oskari classes that the instance.js creates and operates. You'll need to add references to these additional files in bundle.js scripts array.

Read more details here.

Last modified: Fri Jun 07 2024 11:06:13 GMT+0300 (Eastern European Summer Time)