CREATING WORD ADD-IN USING JAVASCRIPT (Part 2)

3 min readMar 16, 2020

Creating your first add-in

You can create your Office add-in easily using yeoman generator for Office Add-ins or visual studio. The yeoman generator creates a NodeJS project that can be managed by any editor, whereas visual studio creates a visual studio solution. In this tutorial, I am using yeoman generator to create our first word add-in.

Prerequisites

Latest LTS version of Node.js
Latest version of Yeoman and Yeoman generator for Office Add-ins.Install this globally by running following command:

>>npm install -g yo generator-office

Creating add-in project

Run following command to create an add-in project using yeoman generator:

>> yo office

You will be prompted to the following screen:

Select the type of project. Choose suitable type using arrow keys.

2. Choose script type . I am using typescript for this project.

3. Type name of your add-in

4. Select which office client application you would like your add-in to support.

Now lets look at the folder structure of the project recently created:

The manifest.xml file in the root directory defines the settings and capabilities of the add-in.
The .src/taskpane folder contains the components folder for react component, taskpane.css for style classes and taskpane.html file contains HTML markup for the taskpane
The .src/taskpane/index.tsx file contains code to render our office add-in in the taskpane of host application.

Once you are done exploring the project, now you can run following commands:

>> cd wordaddin

>> npm run dev-server //if you are running your add-in in mac

>> npm start //if you want to test your add-in on desktop

>> npm start:web // if you want to test your add-in on browser

To use your word add-in:

Open word document and click on insert option.

· Go to My Add-ins menu and select your add-in.

· Clicking on the add-in will side load your word add-in in the same document as below: