{"id":561,"date":"2017-02-10T00:00:00","date_gmt":"2017-02-10T08:00:00","guid":{"rendered":"http:\/\/officedevblogs.wpengine.com\/?p=561"},"modified":"2017-02-10T00:00:00","modified_gmt":"2017-02-10T08:00:00","slug":"creating-add-ins-gets-easier-announcing-updates-to-yo-office","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/creating-add-ins-gets-easier-announcing-updates-to-yo-office\/","title":{"rendered":"Creating add-ins gets easier \u2014 announcing updates to Yo Office"},"content":{"rendered":"
\n

Over the past few months, we’ve done some research and talked to you about your experiences building add-ins. In response to your feedback, we are rolling out changes  to the Yeoman Office Add-in generator. These changes will help you get started with add-ins faster and more easily.<\/p>\n<\/p>\n

Use Fabric templates<\/h3>\n

To help ensure that your add-in is successful, our design team revamped the templates in the generator to use Office UI Fabric. Fabric is the Office design language and includes styles, icons, and components that you can use to build your UI. We’ve also enhanced the generated manifests to implement add-in commands. These templates are now available by default and include the designs that show the highest add-in retention and conform to our design best practices.<\/p>\n

<\/p>\n<\/p>\n

Stay up-to-date on the newest technologies<\/h3>\n

Since we launched Yo Office, the top requests we’ve seen are for Browsersync and Typescript support. Today, we’re happy to announce that we’ve added support for both.<\/p>\n

Types enhance the quality of your code and make it easier to understand. Typescript provides an optional type system for JavaScript and works well with OfficeJS. To use TypeScript, select it as an option when creating your add-in. Visit their site for more information<\/a>.  <\/p>\n

Browsersync is a test assistant that helps you tweak and test your code faster by synchronizing file changes across browsers in real time and across multiple devices.  Once you edit the file, save, and Browsersync will do the rest! To find out more, visit their site<\/a>.<\/p>\n

\"Browesersync""\"<\/p>\n<\/p>\n

Save time – skip the prompts and use arguments<\/h3>\n

We kept a few of the options from the old generator, but updated Yo Office to set most of the values through command-line arguments. You can use arguments to create your add-in and skip most of the prompt questions, as shown in the following example.<\/p>\n

\"arguments""\"<\/p>\n<\/p>\n

Install Yo Office<\/h3>\n

Yeoman is built on Node.js. If you don’t have Node.js installed on your Mac, we recommend using Node Version Manager<\/a> to install it. If you are on Windows, go to nodejs.org and download the distribution for your system<\/a>.<\/p>\n

Next, open a terminal, and install the Yeoman generator and its dependencies globally by using the following command:<\/p>\n

npm install -g yo generator-office<\/code><\/p>\n

If you already have Yo Office installed, use the following command to update your version:<\/p>\n

npm update -g generator-office<\/code><\/p>\n

Now you should be ready to run the generator!<\/p>\n

\"generator""\"<\/p>\n<\/p>\n

Contribute to Yo Office<\/h3>\n

The feedback we received over the past few months has helped us define the changes we’ve made to the generator. If you have more feedback to share, please log an issue on our GitHub repository<\/a>. We would also like to thank the following GitHub community contributors for helping us make Yo Office what it is today!<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n<\/td>\n<\/td>\n\n

<\/a><\/p>\n<\/td>\n

<\/td>\n\n<\/td>\n<\/tr>\n
@<\/span><\/span>JoshuaKGoldberg<\/span><\/span><\/a> <\/a><\/td>\n<\/td>\n@<\/span><\/span>richarddavenport<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>alexkieling<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>Ibrahim-Islam<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>pcostesi<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>LanceEa<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>nigel-dewar<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>rolandoldengarm<\/span><\/span><\/a> <\/span><\/span><\/td>\n<\/td>\n@<\/span><\/span>CodeMoggy<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>bpkennedy<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>gavinbarron<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>stefanreimers<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>jasonjoh<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>TristanD-MSFT<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>ashuetawah<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>vboctor<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>Mimetis<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>andrewconnell<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>justsayno<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>waldekmastykarz<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>Ricalo<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>YannickGagnon<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>jthake<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>MrPiao<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>brucemcpherson<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>martellaj<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>mauricionr<\/span><\/span><\/a><\/td>\n<\/tr>\n
@<\/span><\/span>ministainer<\/span><\/span><\/a><\/td>\n<\/td>\n@<\/span><\/span>StfBauer<\/span><\/span><\/a><\/td>\n<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\n

We value your feedback and hope you continue to contribute to our generator. To make this easier, we have restructured the generator-office project files on GitHub. For example, when you include a framework folder under either js or ts, the generator will update itself to include the framework as an option for that question. To see all these changes, check out our repository<\/a>. And if you haven’t already contributed to Yo Office, see our contributor’s guidelines<\/a>.<\/p>\n<\/p>\n

See also<\/h3>\n

Yo Office repository<\/a><\/p>\n

Sideloading your add-in<\/a><\/p>\n

JavaScript API for Office reference<\/a><\/p>\n

Best practices for developing Office Add-ins<\/a><\/p>\n

Debugging your add-in<\/a><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

Over the past few months, we’ve done some research and talked to you about your experiences building add-ins. In response to your feedback, we are rolling out changes  to the Yeoman Office<\/p>\n","protected":false},"author":69076,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[18,12],"class_list":["post-561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins","tag-excel","tag-outlook"],"acf":[],"blog_post_summary":"

Over the past few months, we’ve done some research and talked to you about your experiences building add-ins. In response to your feedback, we are rolling out changes  to the Yeoman Office<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69076"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=561"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/561\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}