Hello World example for the Integrations Widget
This article will walk the developer through deploying their first custom widget. This custom widget displays an H1 element on the page with an innerHTML value of “Hello World.” It also takes a string value (text) from the configuration screen and displays it as a description below the H1 element.
Tip: This standard “Hello World” example will allow developers to get started quickly without having to configure everything from scratch for the deployment tool to work.
Create a project directory
Create a project directory in your development environment:
#!/bin/sh # This command creates a project directory for the Hello World widget template mkdir mywidget && cd mywidget
#!/bin/sh # This will install the ig-deploy tool in your project directory npm install --save/ig-deploy
Download example project
Download the official Igloo “Hello World” widget example code from one of the following links, and extract it into your project directory:
|Windows||Hello World widget.zip||24kb|
After extracting the sample project into the project directory, please verify the contents are as follows (Fig. 3.1)
(Fig. 3.1) The Igloo Hello World widget project directory.
Open credentials.json and follow the steps in this article to enter the credentials of your Igloo-provided Azure instance.
Warning: Azure credentials are required to work with the Integrations Widget.
Run the following command to deploy the widget to your Igloo-provided Azure instance:
#!/bin/sh # This command runs deploy.js- which deploys the widget to Azure node deploy.js
Inside your Igloo community, place an Integrations widget on a page and select Edit to configure it. Select your own repository from the Integration Library dropdown, and you should see ig-deploy-hello-world in the carousel of widgets (Fig 5.1)
(Fig. 5.1) ig-deploy-hello-world successfully deployed to an Igloo site.