Last Updated:
June 12, 2023
by
Kathy Ziomek
| Version: 13
| 2,670 views
| 0 followers
members are following updates on this item.
Deploying your first integration
This article walks you through deploying your first integration. This integration will be a custom widget that displays an <h1> element on the page with an innerHTML value of "Hello World." It will also take a string value (text) from the configuration screen and display it as a description below the <h1> element.
Tip: We recommend using the Hello World integration as a template to avoid the hassle of configuring everything from scratch for the deployment tool to work.
Note: The widget renders inside an <iframe> on the page, and that entire page is rendered by our platform upon a GET request. For this reason, CORS issues don't exist, but some porting may be required for JavaScript code to access objects in the parent window.
Note: The <iframe> gives you total control of how you implement HTML, CSS, and JavaScript in your widget, and you should feel free to disregard the style of this code example in place of your own best practices.
1. Download the example project
Download the official Igloo Hello World integration code found at the end of this article and extract it into a project directory. Take a read through the README.md file, which contains more detailed instructions about the development, build, and deployment process.
2. Download project dependencies
The downloaded project contains a package.json file that contains the necessary project dependencies, including the ig-deploy library that handles the deployment of integration widgets to your digital workplace.
We will want to download dependencies for the project and create the node_modules folder that manages these dependencies. To do this, after creating a local directory for your new project, run the following command inside it using Command Line (Windows) or Terminal (mac), or the terminal of your preferred code editor:
npm install
3. Manage credentials
In the conf folder, you will see a README.md file, as well as a credentials.example.json file. Following the steps of the README.md file in this folder, duplicate the example file, and rename the file to credentials.json. Open credentials.json from the root of your project directory and configure the contents as follows:
{
"account": "<yourIglooRepoName>",
"key": "<yourAzureKey>",
"url": "https://<yourIglooRepoName>.blob.core.windows.net/",
"environment": "<friendlyName>",
"provider": "azure"
}
The field mappings are:
- account: The name of your Igloo-provided Azure instance.
- key: Access/authorization key for the instance.
- url: Exact URL of the Azure blob store.
- environment: A name for developers to identify their credential set (e.g., sandbox, testing, or production).
- provider: azure — do not change this value.
That's it! You're all set up and ready to go.
4. Deploy
Last, the project needs to be assembled into a build folder that gets deployed to your Azure repository. In order to do this, run the following command to deploy the widget to your Igloo-provided Azure instance:
npm run build
5. Test the integration in your digital workplace
Inside your Igloo digital workplace, place an Integrations widget on a page and select Edit to configure it. Select your repository from the Integration Library dropdown, and you should see Hello World Example with a red Igloo icon as shown in the figure below (Fig 5.1)
(Fig. 5.1) Hello World Example icon
Select Hello World Example and then select Update to add the integration to the page. Next, publish the page by scrolling to its bottom and selecting Publish Page. You can now view the integration in your digital workplace.
Themes
See How to create a theme to learn more about how you can host a theme in Azure so that it's available in your digital workplace's Theme Library.
Viewed 2,670 times