Creating Office add-in generator using Vue (part-2)

By | August 7, 2018

In part-1, I briefly provide the ideas behind creating Office add-in generator using Vue and the working plan. If you have not read part-1 please check it here.

Third step: Create static Office add-in Vue

I follow the steps in “Build an Excel add-in using Vue” to prepare starting template. I will remove the static value with ejs template syntax, so that Yeoman will replace it during the project generation process. In short I will add following code <%= ….. %>, for example:

<%= projectInternalName %>

as a replaceable token. But before I replace the static value, I make sure that the static Office add-in project is working properly. So I run following command to run the webpack-dev-server

npm install
npm build
npm run start

I open another command prompt, and CWD to the project folder and run sideload and start to check if the add-ins work.

npm run sideload

Fourth step: Create the template

I copy all project files from static Office add-in (step-3) to the generator-office project. Now my projects structure becomes:

src
 ├──app
 |   ├──config
 |   ├──helpers
 |   ├──templates
 |   |    ├──hosts
 |   |    ├──js
 |   |    |   ├──angular
 |   |    |   ├──base
 |   |    |   ├──jquery
 |   |    |   └──vue

I remove node_modules folder from ../templates/js/vue , since Yeoman will install the module later. I follow the existing jquery template to find the token variables their usage in the template, then I start to modify the static vue template with ejs syntax. I make changes in few files in the vue template:

packages.json
src\app.vue
src\main.js

Fifth step: Round of round of testing

Since I don’t know how to create testing module. I just run build and testing it locally. If you need a clue, just heads on to first step in part-1. I build, link and run yo office in 2 different command prompts.

Then in the newly generated Office add-ins vue project, I try to build, start, run sideload – until everything perfectly running. I tested for different possible scenario which are available in original Office add-ins generator.

One thought on “Creating Office add-in generator using Vue (part-2)

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

Leave a Reply