Creating Office add-in generator using Vue (part-2)
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.