ibm-wch-sdk-ng-vc

Visual Studio Code extension to assist creating single page applications for Watson Content Hub. The extension builds on top of the WCH SDK and the WCH CLI modules.

• First Steps
• Snippets
• Recommendations

First steps

Make sure to have access to a WCH Tenant. You can subscribe for a free trial if you don't have any, yet.

After subscribing you will you have access to an API URL, your username and your password. Since you will need this triplet of information frequently during the development process, it makes sense to save this in a credential store on your development machine.

Credential Management

Follow the steps outlined in Credential Management to store your credentials. On a Linux based system you can use the WCH: Store Credentials command.

In addition to that you might want to configure the Api URL and your username in the configuration section of Visual Studio Code. Head to File | Preferences | Settings and enter default values for wch.username and wch.apiUrl.

Getting Started

Get started by working with an existing WCH application or by creating a new one.

• Create your first Single Page Application
• Create an Application from a Template
• Work with an Existing Application

Create your first Single Page Application

Start the IDE and open an arbitrary folder as your workspace. This will be the parent folder of the application we are going to create. Open the Command Palette and enter the command:

WCH: Create New Project ...

The workflow will ask you for your API URL, the username and the name of your project, information will be read from the workspace configuration if you provided it.

The command will create a new project skeletton with for an Angular 4 based single page application that work with WCH. The generation process will take a little while, in the meantime you will see an activity indicator in the status bare.

The result of the command is an application in a subfolder of your workspace. Open this folder to continue.

Build and run your Application

Open the application folder in your workspace. Switch to the Integrated Terminal and install the node dependencies:

npm install

This may take a little while. When done, type

npm run start

This will build and start the app in development mode and launch your browser on http://localhost:4200 to preview the app.

Snippets

Type part of a snippet, press enter, and the snippet unfolds.

HTML WCH Snippets

Commands

Type Ctrl+Shift+P to show all commands, then type the name of the command to execute it.

WCH: Create Layout

The command creates a layout and a code component for one single content type. When triggered via the context menu on a particular type, this type will be selected. Else the user is presented with a list of existing types and can select one of the types.

The command will then ask for a name of the layout and suggests a sensible default.

WCH: Create Page Type

The command creates a new type document that represents a page and adds layouts and layout mappings. The page type is initially empty. The type will only be created in the local file system, it has to be pushed to WCH to be available to the server.

The command will then ask for a name of the type.

WCH: Push and Pull

A set of commands allows to push and pull data from WCH using wchtools for the most common usecases of pushing/pulling types, layouts, layout mappings and pages.

WCH: Create New Project From Template

The command creates a new project based on a project template stored in Git. Enter the project description and select from the desired template.

WCH: Store Credentials

The command stores the credentials for a particular API URL. Use this to guide you through the process described in the Credential Management documentation.

Configuration

Fine tune the behaviour of the commands by adding configuration settings.

WCH Configuration

Installation

1. Install Visual Studio Code 1.10.0 or higher
2. Launch Code
3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
4. Select Install Extension
5. Choose the extension
6. Reload Visual Studio Code

Prerequisites

1. Open a workspace on the folder that contains the package.json of your project. In a multi workspace setup, at least one such folder must exist.
2. Identify the folder that contains the wchtools files by pointing the data config property in your package.json to that folder, e.g. {"config": {"data": "./src/wchLayouts"}}. If the folder is called data top level, this is not required.
3. Identify the folder that contains the source files by pointing the src config property in your package.json to that folder, e.g. {"config": {"src": "./mysrc"}}. If the folder is called src top level, this is not required.
4. Make sure the API URL of your tenant is configured for wchtools. I recommend to do this by adding the JSON file .wchtoolsoptions.json with the property x-ibm-dx-tenant-base-url to your data folder. This allows for project specific configuration. Alternatively you can put the .wchtoolsoptions file in your home directory as a fallback.
5. Register username and password with the API URL as described in the Credential Management section, or use the WCH: Store Credentials command.

Sample .wchtoolsoptions.json file

{
    "username": "YOUR_USERNAME",
    "x-ibm-dx-tenant-base-url": "YOUR_API_URL"
}

Recommendations

In addition I recommend the following extensions

• Angular Language Service
• Path Intellisense
• TSLint

Videos

Visual Studio Code setup for WCH development