Deploy

1. Register the widget

Return to Visual Studio Code. In the left navigation, expand src > widgets and click on custom.js to open it.

• Add the following script right below the cssgrid section we worked on earlier.

	XCC.X.vimeo = function (widgetPath) {
		function content(container$, widgetData) {
			XCC.require(["https://luwes.github.io/vimeowrap.js/vimeowrap.js"], function () {
				XCC.require(["https://luwes.github.io/vimeowrap.js/vimeowrap.playlist.js"], function () {
					XCC.require(["https://luwes.github.io/vimeowrap.js/vimeowrap.carousel.js"], function () {
						XCC.require([widgetPath + ".js"], function (vimeoWidget) {
								vimeoWidget.content(container$, widgetData);
						});
					});
				});
			});
		}

		XCC.W.registerCustomWidget("LAB8498 Vimeo", "table", content);
	};

Note 1 : Our widget will leverage open source libraries and we need to ensure that the libraries are loaded before we try to do anything. ICEC provides the requirejs library already loaded; we just need to make use of it by calling XCC.require with the appropriate callback.

Note 2: The vimeowrap library has mutiple plugins available. In order to use the plugins, the main library vimeowrap.js must be loaded first on the page. We can nest XCC.require statements to ensure that the main library is loaded first and then the plugin.

Note 3: Finally, we require our own JavaScript file, which when registered can be found either on our development server or the ICEC server, depending on the variable we use under the init function of the custom.js as seen previously.

The name of the widget is vimeo as seen from the line that starts with XCC.X.vimeo = function() . We need to add that exact name to the appropriate variable. This is a custom widget that is NOT replacing an existing ICEC widget. We can add it to the XCC.X.customWidgetsDEV array.

• Click File > Save to save the update you just made.

Return to the ICEC page using your browser.

• Click Customize > Engagement Center Settings > Customization Files > Upload File

• Navigate to the location of the custom.js that you saved in an earlier step, select it, and click Open. You should receive a result similar to the screen below, confirming that the file was uploaded.

2. Add the vimeo widget to the Vimeo page

• Click on the nagivation link for Vimeo to be taken to that page. Validate by looking for the page title and the ?page=vimeo in the URL displayed by the browser.
• Click on Customize > Widgets > Create Widget.

Warning If the widget does not show up in the list, bring up your developer console and reload the page after clearing the cache as was done in a previous exercise.

• Select the LAB8498 Vimeo widget from the list. In the ID field enter a unique name LabVimeo and click Create.

The widget is added to the page and you can interact with the widget to play videos and cycle through the list.

3. Modifying and updating the widget

Edit index.js and change the plugin to use, from playlist to carousel.

plugins: { 
    'carousel':{} 
} 

In order to make the updates to the widget available to ICEC we are going to run a build task that packages all the required files/changes and deploys them to our Development server under the /build/public directory and also under the dist directory.

• Issue the following command from a terminal window while in the src/widgets/vimeo directory.

npm run build

• Back in your browser, refresh the vimeo page to see the changes.

You can now make updates to the widget as you iterate through your code, run a build process, and test. When you are ready to deploy to production, perform the following steps.

4. Deploying to Production

Now that you have completed development of your widget, you want to deploy it to the ICEC server. Every time you run a build process, the minified version of your code is added to the dist folder. You can take all the files from that directory and upload them to the ICEC server under customization.

To switch from your development server to the ICEC server for serving the files, update the custom.js file and switch the location of the widget registration from the XCC.X.customWidgetsDEV array to the XCC.X.customWidgetsPROD array.

	// These should custom Widgets you created and/or are making available.
	XCC.X.customWidgetsDEV = [
	];

	// These should out of the box widgets that you are replacing (overriding) with your own (can be derivative work or new). Example: "communityOverview"
	XCC.X.replaceWidgetsDEV = [
	];  

	// These should custom Widgets you created and/or are making available.
	XCC.X.customWidgetsPROD = [ 
		"navigation",
		"helloWorld",
      "cssgrid",
      "vimeo"
	];  

Refresh your browser cache and the widget will load from the ICEC server instead of your development server.