Lab Setup

Prerequisites

We’ll assume some familiarity with HTML, CSS, and JavaScript, but you should be able to follow along even if you haven’t used them before. However, you may not know why we did certain things the way we did.

What we will be doing

In this lab, we will start by exploring a HelloWorld custom widget to understand how widgets are registered in ICEC. We will then build four (4) custom widgets to access various external content we want to surface in IBM Connections Engagement Center.

The lab instructions are very specific to the tools we used as we built the lab. However, these are not requirements for building widgets for ICEC! You can use a text editor to write your code. Popular and free solutions are Notepad++, Atom, TextMate and Visual Studio Code. You are free to follow this lab using the development tools you are most comfortable with.

All these tools installation are straightforward, take the defaults during installation and you will be all set.

  • Code version control: It is also a good practice is to use Git for version control. There are a number of options you can choose from. For this lab, we will be using Github to download our starter code, but don’t worry about having an account on Github unless you want to save the code that you create.

Launch Visual Studio Code (or your favorite IDE)

For this walkthrough we are using Visual Studio Code, a free to download/use IDE available for Mac, Windows, and Linux. Click on the icon to open it.
Visual Studio Code

Integrated Terminal

VS Code has an integrated terminal which you can use to run shell commands. You can run Node.js directly from there and avoid switching out of VS Code while running command line tools.

integrated terminal

View > Integrated Terminal will open the integrated terminal and you can run commands throughout the lab, i.e. npm install, npm run build, etc… from there:

For this lab, we will open up two terminal sessions, using the + on the right-hand side:

  • one for the server where our widgets will be served from during our development
  • one to build and package our custom widget code after every iteration.