Creating Office add-in generator using Vue

By | July 4, 2018

Since I read the “Build an Excel add-in using Vue” article here, I have been using the steps to create many Office add-ins project using Vue framework. For me, Vue is much simpler compared to React or Angular. May be it is just my personal opinion, but I have been trying so long to understand React and Typescript – whereas for Vue I can quickly adopt the framework for my project. May be because, I usually develop application using C#, JQuery and Handlerbars for templating.

The steps in the article basically provide following instruction:

  1. Create Vue app webpack project
  2. Add manifest only Office Add-in
  3. Modify the App entry point

I always return to the article to start my project, however as developers we love automation, we love templating – hence I decided to create Office add-in generator using Vue.

First step: Understand build and run Office generator locally

I open my github account and start to fork official generator-office here : https://github.com/OfficeDev/generator-office . Since I never create Yeoman generator before, I just want to understand how I can build and create a custom generator.

In my command prompt, I run following:

git clone https://github.com/cakriwut/generator-office.git
cd generator-office
npm install
npm run build
npm link

Then, I open another command prompt and test if I can execute the yo generator. I run following command:

mkdir test
yo office

Second steps: Understand Office generator project structure

The project follows general guidelines from “Writing Your Own Yeoman Generator” with some specific customization for generator-office, such as support for Typescript and JavaScript template, externalize project configuration etc. Following is my understanding about the generator-office project structure starting from src.

src
 ├──app
 |   ├──config
 |   ├──helpers
 |   ├──templates
 |   |    ├──hosts
 |   |    |   ├──excel
 |   |    |   |--onenote 
 |   |    |   └──//..etc
 |   |    ├──js
 |   |    |   ├──angular
 |   |    |   ├──base
 |   |    |   └──jquery
 |   |    ├──manifest-only
 |   |    └──ts
  • /app , is the default generator where Yeoman will use as the main entry point.
  • /app/config, is the folder to define different projectTypes (angular, jquery, etc.), different types of template (JavaScript, Typescript), prompt etc.
  • /app/templates, is the location where Yeoman will search for the template.

The plan

  1. Create new branch vue-template
  2. Add new vue folder under ../templates/js and ../templates/ts. The vue folder will contains pre-configured template for JavaScript and Typescript respectively.
  3. Modify ../config/projectProperties.json. I will add new projectTypes “Office Add-in project using Vue framework” in this file.

One thought on “Creating Office add-in generator using Vue

  1. Pingback: Creating Office add-in generator using Vue (part-2) – Ideas For Free

Leave a Reply