Office UI Fabric for VSTS Extensions – Getting Started
Continuing from Office UI Fabric for VSTS Extensions. I have spent way too much time trying to get things running the way that I want them to, based on concepts, intentions, and bootstrapping found on blogs and technical websites.
To simplify, I’ve created this series of posts the highlights a "from scratch" way to setup and create a React and Office UI Fabric web project with the goal of creating a VSTS Extension.
At this stage I am going to assume you have some minimum prerequisites:
As with any good start we create a clean directory and initialize it using npm. Load your command line of choice and let’s start.
Initialize
In the directory, we need to initialize things. Run "npm init" and answer the questions that are posed, making sure to specify an entry point of "./src/index.tsx"
Dependencies
Next, we need to add a few dependencies in the "right place".
npm install react react-dom office-ui-fabric-react vss-web-extension-sdk
This will add the basic dependencies to be able to run most of what we want. Now comes the development-time dependencies. These should not be packaged with the production build and are merely used during development.
First the type definitions:
npm install @types/react @types/react-dom
Then a few additional dependencies and libraries that we will need later on:
npm install awesome-typescript-loader tslint tslint-loader webpack webpack-dev-server --save-dev
And now for (at the time of writing this post) a very "important" dependency:
npm install typescript@2.3.4 --save-dev
Note the version. This is an "older" version of Typescript, and the reason for using this version is that VSS SDK still has some errors with regards to the new Typescript implementation. If you see errors like the ones below, you will need to downgrade your Typescript version.
ERROR in [at-loader] ? ./node_modules/vss-web-extension-sdk/typings/vss.d.ts:3441:18
TS2559: Type 'TemplateViewModel' has no properties in common with type 'EnhancementOptions'.
ERROR in [at-loader] ./node_modules/vss-web-extension-sdk/typings/vss.d.ts:10334:18
TS2415: Class 'ComboDateBehavior' incorrectly extends base class 'BaseComboBehavior'.
Types of property 'getValue' are incompatible.
Type '() => Date' is not assignable to type '<TValue>() => TValue'.
Type 'Date' is not assignable to type 'TValue'.
ERROR in [at-loader] ./node_modules/vss-web-extension-sdk/typings/vss.d.ts:10419:18
TS2415: Class 'ComboMultiValueBehavior' incorrectly extends base class 'ComboListBehavior'.
Types of property 'getValue' are incompatible.
Type '() => string[]' is not assignable to type '<TValue>() => TValue'.
Type 'string[]' is not assignable to type 'TValue'.
That should take care of most of the dependencies. Your packages.json file should have the dependencies section looking something like this:
In the next post, we’ll look at Typescript tools and then configure VS Code to give us a decent debugging experience.
Also see
THANKS TO THE REVIEWERS: Steve St. Jean, Hamid Shahid