Word Add-in with TypeScript

Open File Explorer and create the (C:\temp\vscode-yeoman) folder.
Open Visual Studio Code.
Display the Terminal window (View > Terminal).
Change to that folder.

cd C:\temp\vscode-yeoman 

Run the Yeoman generator to create the project.

yo office 

Choose a project type: Select "Office Add-in Task Pane project".
Use the arrow keys and press Enter to select.

alt text

Choose a script type: Select "TypeScript".
What do you want to name your add-in: Type "Word-TypeScript".
Choose which office client application you want to target: Select "Word".
All the necessary files will be created for you.

package.json file

Change to that folder.

cd Word-TypeScript 

Open this folder in the current Visual Studio Code instance.

code -a. 

Open the Explorer pane (View > Explorer).
Expand the project "Word-TypeScript".

alt text

Click on the package.json file.

  "name": "office-addin-taskpane",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/OfficeDev/Office-Addin-TaskPane.git"
  "license": "MIT",
  "config": {
    "app-to-debug": "word",
    "app-type-to-debug": "desktop",
    "dev-server-port": 3000
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "dev-server": "webpack serve --mode development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "validate": "office-addin-manifest validate manifest.xml",
    "watch": "webpack --mode development --watch"
  "dependencies": {
    "core-js": "^3.1.4",
    "es6-promise": "^4.2.8",
    "office-ui-fabric-react": "^7.10.0",
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/polyfill": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@types/find-process": "1.2.0",
    "@types/office-js": "^1.0.108",
    "@types/office-runtime": "^1.0.14",
    "@types/react": "^16.8.22",
    "@types/react-dom": "^16.8.4",
    "@types/react-hot-loader": "^4.1.0",
    "@types/webpack": "^4.4.34",
    "@types/webpack-dev-server": "^3.1.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.1.1",
    "eslint-config-office-addins": "^1.0.19",
    "find-process": "^1.4.3",
    "css-loader": "^3.0.0",
    "eslint-plugin-office-addins": "^0.1.1",
    "eslint-plugin-react": "^7.16.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "office-addin-cli": "^1.0.13",
    "office-addin-debugging": "^3.0.34",
    "office-addin-dev-certs": "^1.5.5",
    "office-addin-lint": "^1.0.26",
    "office-addin-manifest": "^1.5.12",
    "office-addin-prettier-config": "^1.0.12",
    "postcss-loader": "3.0.0",
    "react-hot-loader": "^4.12.6",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.2.2",
    "typescript": "^4.0.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  "prettier": "office-addin-prettier-config"


Click on the manifest.xml file.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 

<Id> Unique GUID </Id>
<ProviderName>Better Solutions Limited</ProviderName>
<DisplayName DefaultValue="Word-TypeScript"/>
<Description DefaultValue="A template to get started."/>
<IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png"/>
<HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-80.png"/>
<SupportUrl DefaultValue="https://www.bettersolutions.com"/>
<Host Name="Document"/>
<SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
<VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
<Host xsi:type="Document">
<Title resid="GetStarted.Title"/>
<Description resid="GetStarted.Description"/>
<LearnMoreUrl resid="GetStarted.LearnMoreUrl"/>
<FunctionFile resid="Commands.Url"/>
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<OfficeTab id="TabHome">
<Group id="CommandsGroup">
<Label resid="CommandsGroup.Label"/>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
<Control xsi:type="Button" id="TaskpaneButton">
<Label resid="TaskpaneButton.Label"/>
<Title resid="TaskpaneButton.Label"/>
<Description resid="TaskpaneButton.Tooltip"/>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="Taskpane.Url"/>
<bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
<bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
<bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
<bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812"/>
<bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
<bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
<bt:String id="GetStarted.Title" DefaultValue="Get started with your sample add-in!"/>
<bt:String id="CommandsGroup.Label" DefaultValue="Commands Group"/>
<bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
<bt:String id="GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully.
             Go to the HOME tab and click the 'Show Taskpane' button to get started."/>
<bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane"/>


Click on the webpack.config.file.

const devCerts = require("office-addin-dev-certs"); 
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');

const urlDev="https://localhost:3000/";
const urlProd="https://bettersolutions.com/";

module.exports = async (env, options) => {
  const dev = options.mode === "development";
  const buildType = dev ? "dev" : "prod";
  const config = {
    entry: {
      vendor: [
    taskpane: [
    commands: './src/commands/commands.ts'
    resolve: {
      extensions: [".ts", ".tsx", ".html", ".js"]
    module: {
      rules: [
          test: /\.tsx?$/,
          use: [
          exclude: /node_modules/
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
          test: /\.(png|jpg|jpeg|gif)$/,
          loader: "file-loader",
          options: {
            name: '[path][name].[ext]',
    plugins: [
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin({
        patterns: [
          to: "taskpane.css",
          from: "./src/taskpane/taskpane.css"
          to: "[name]." + buildType + ".[ext]",
          from: "manifest*.xml",
          transform(content) {
            if (dev) {
              return content;
            } else {
              return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
      new ExtractTextPlugin('[name].[hash].css'),
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
          template: './src/taskpane/taskpane.html',
          chunks: ['taskpane', 'vendor', 'polyfills']
      new HtmlWebpackPlugin({
          filename: "commands.html",
          template: "./src/commands/commands.html",
          chunks: ["commands"]
      new webpack.ProvidePlugin({
        Promise: ["es6-promise", "Promise"]
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*"
      https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
      port: process.env.npm_package_config_dev_server_port || 3000

  return config;

Other Project Files

The other project files are displayed on this page for reference.

Load the Add-in - Desktop

Execute the following command:

cd C:\temp\vscode-yeoman\Word-TypeScript 
npm start

This will start the local web server and open Word with the add-in loaded.
A small node window will be displayed.
A security warning dialog box will be displayed (the first time), asking you to install the certificate. Press Yes.
Select the Home tab and you will see a new group called "Commands Group" on the right hand side.
Press the "Show Taskpane" button to display the taskpane.
Press the Run button to insert the text "Hello World".

alt text

When you have finished testing you need to execute the following command:

npm stop 

Load the Add-in - Online

Execute the following command:

cd C:\temp\vscode-yeoman\Word-TypeScript 
npm start web

This will start the debugging.
A small node window will be displayed.
This will start the local web server.
The add-in will not appear automatically and will require side loading.

alt text

© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext