When the generator is run on an existing project, the existing tsd.json file is overwritten. We should support updating existing tsd.json the same way we do it for the bower.json file.

Rather than call every manifest "manifest.xml" actually create file name as "-manifest.xml". Makes it useful when having a shared network folder for a Trusted add-in catalog on a local machine when testing in Office Windows client.

It seems like Gulp tasks follow the naming convention where a main task is a single word and a sub task consists of multiple words separated by a - or a :. In our case case the generated gulpfile.js files contain tasks such as serve-static and validate-xml. Shouldn't we have main tasks called serve and validate to call the existing sub tasks? We could either rename the existing tasks or add new tasks which would allow us for more flexibility in the future (like additional validation or serving files differently(?))?

Got this error on a fresh windows 10 environment with node, git installed after running

npm install -g yo generator-office bower

I used yo office and for folder location "\My First" and it threw an error. Iwanted it to create a sub folder and add there but it broke. Doing it with "/MyFirst" with no space and the bower bit works fine. Looks like its something on how the bower command is run.

It appears it doesn't adhere to the folder structure as not everything gets put in the subfolder "MyFirst".

Got this error

C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\node_modules\bower-config\lib\util\rc.js:56
throw error;
^

Error: Unable to parse C:\Users\Jeremy\src.bowerrc: Unexpected token M
at parse (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\node_modules\bower-config\lib\util\rc.js:49:21)
at C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\node_modules\bower-config\lib\util\rc.js:76:20
at Array.forEach (native)
at json (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\node_modules\bower-config\lib\util\rc.js:74:14)
at rc (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\node_modules\bower-config\lib\util\rc.js:31:9)
at Config.load (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\node_modules\bower-config\lib\Config.js:14:20)
at Function.Config.read (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\node_modules\bower-config\lib\Config.js:49:19)
at readCachedConfig (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\lib\config.js:21:51)
at defaultConfig (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\lib\config.js:11:24)
at Object. (C:\Users\Jeremy\AppData\Roaming\npm\node_modules\bower\lib\index.js:40:32)

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v4.1.2
npm ERR! npm v2.14.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: bower install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'bower install'.
npm ERR! This is most likely a problem with the my-first package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! bower install
npm ERR! You can get their info via:
npm ERR! npm owner ls my-first
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Jeremy\src\npm-debug.log

C:\Users\Jeremy\src>

When running the $ gulp validate-xml task you get the TypeError: undefined is not a function error. This has to do with the fact that the xml is passed to the icon validation function as a string buffer rather than a string. Let me get that fixed.

Hi, i tried to create a TaskPane Addin and got the following error. Is is a bug or is there something I can do about?

This generator can also be run with: yo office

Generated projects have the tsd.json file setup with references to Angular and Office typings. It would be helpful to include the reference to the /typings/tsd.d.ts file in all .js files so that developers can benefit of intellisense even if they're coding in plain JavaScript.

The new validate-xml feature does not catch the error that HighResolutionIconUrl has to be https

This app can't be installed. The value of the HighResolutionIconUrl attribute, 'http://dev.office.com', contains an unsupported URL. You can only use https:// URLs..

Update tests to improve code coverage. This may involve ignoring some non-applicable code paths with istanbul's ignore comment options.

Add Angular + ADAL JS as technology to simplify building add-ins connected to Office 365. Add-in generated using this technology would contain all the manual steps described in the ADAL JS manual.

I think you should add the following snippet into the package.json file to automatically run bower install after running npm install. I know this is done when you first use the generator, but if I do a fresh clone of a project that has used the generator and run npm install, I'll be left without any of my bower components. It's a pretty simple addition and I can submit a PR if you think this would be beneficial.

"scripts": {
    "postinstall": "node_modules/.bin/bower install"
  }

For a Mail Add-in the appread/app.routes.js file contains an invalid reference to the home/home.html file. The generated reference is appread/home/home.html while it should be home/home/html to point to the correct location of the file.

Apparently having the HighResolutionIconUrl element is mandatory in submitting an Office Add-in. Might as well include that by default then.

@andrewconnell, @jthake: do you guys think it would be useful to have a subgenerator that adds new views (view + controller and perhaps route registration to app.routes.js) to Angular and Angular ADAL add-ins? I know it's quite common to have SPAs with multiple views but I wonder how useful would that be for add-ins.

https://github.com/borisyankov/DefinitelyTyped/tree/master/office-js

ties in closely with #77

Is it by design that even if you choose to have a Mail Add-in registered with the read form only the generator still creates assets for compose forms (ie. app files + manifest.xml registration info)?

Update the /docs folder with new content:

• update readme.md
• move & refactor the CONTRIBUTING.md doc to docs (rename to contributing.md)
• add details on CLA
• add developer-guide.md
• add developer-testing.md
• revamp example docs
• revamp docs/readme.md
• add instructions on forking, resyncing & committing

Create a gulp task that will perform XSD validation on the Add-in manifest to ensure it's valid after edits.

This requires the *.d.ts files to be in DefinitelyTyped.com which is coming soon.

I'm unfamiliar with SSL certificates and the like, but is there anyway to make the server started by Gulp "safe"? Unless you go to the index.html page in a browser and accept that it's unsafe, the Add-in fails to render. There might be no way around this, but it would be nice to not have to explicitly have to give instructions to go and accept the SSL certificate in our READMEs for samples and stuff.

I believe we could simplify bootstrapping the add-in by removing jQuery from app.module.js and slightly changing the HTML structure in index.html.

Maybe I'm just being lazy but TypeScript to me would be a great option to have in the list of Technology to use choices.

Is it supposed to be possible to run your private instance of the generator (presumably using gulp run-yo) without messing up your gulfile.js and others? What is the expected developer steps to test your version of the generator?

Looks like file structure changed, but includes in index.html files haven't.

When creating a Office Task Pane Add-in or Content Add-in, prompt the user for the Office client products that the add-in is for:

• Word
• Excel
• PowerPoint
• OneNote
• ...

This should be an extra question and allow 1 or more selections, but this should only show when the user picks one of these two add-in types.

Getting an error in uploading the manifest.xml when using yo office.

"This app can't be installed. The HighResolutionIconUrl value '[Icon URL]' isn't a corectly formatted URL."

Although it's great we use these values. I think its better to actually include a icon placeholder in the project and reference that with https://localhost:8443/ url as we are hard coding that anyway. Less steps to getting it running that way.

Add support to generate scaffolding of web applications communicating with Office 365. Sample of how this could look like is available at https://github.com/waldekmastykarz/sample-generator-office365app.

@andrewconnell, @jthake: What do you guys think about including additional Gulps tasks in the generated gulpfile.js to support releases, such as copy the add-in files to be deployed to a separate folder (eg. dist), minifying scripts and CSS and bumping the version number in the manifest.xml and package.json? How about taking a look at the ability to upload the manifest.xml to the App Catalog? The main goal of these tasks would be to support developers in the deployment and release of projects built with the generator.

Need to do a regex check when collecting info: ^[a-zA-Z0-9]*$

When one of the tests in $ gulp test breaks at the end you get the following error:

/Users/usr/github/generator-office/gulpfile.js:129
  $.log(err.toString());
    ^
TypeError: undefined is not a function
    at Stream.handleError (/Users/usr/github/generator-office/gulpfile.js:129:5)
    at Stream.emit (events.js:129:20)

Shouldn't https://github.com/OfficeDev/generator-office/blob/master/gulpfile.js#L129 be referring to the function defined in https://github.com/OfficeDev/generator-office/blob/master/gulpfile.js#L113 (so calling log rather than $.log)?

According to the HTML5 spec if a script tag refers to a text/javascript script, then the type attribute is not required. Removing it from the code would simplify the markup.

For a Mail Add-in the appread/index.html file contains an invalid reference to the jquery.fabric.min.js file. The generated reference is scripts/jquery.fabric.min.js while it should be ../scripts/jquery.fabric.min.js to point to the correct location of the JavaScript file. The same invalid path is also used in references to content/fabric.min.css and content/fabric.components.min.css.

I noticed that if you put the XSD with the OfficeApp schema in the same directory as manifest.xml, Visual Studio Code gives you intellisense for the manifest's XML. I can imagine this being very useful for editing it. I'm not sure if this behavior is specific for VSCode but if there are more editors supporting it, we could include the XSD with the generated project to simplify working with the manifest.xml.

Apparently having the SupportUrl element is mandatory in submitting an Office Add-in. Might as well include that by default then.

Since we're now having multiple gulp tasks, how about we added help to make it easier to use them?

Currently the generator builds mail read & compose forms. When picking a mail add-in, the generator should instead then prompt the user for four options, of which they can pick one or more:

• Mail Compose Form
• Mail Read Form
• Calendar Compose Form
• Calendar Read Form

This helps editors like Code understand this is a JS project and not require developers to include the /// <reference comments at the top of all JS files.

When it's publicly released, include the Office Fabric UI as a dependency to all add-ins as using both bower & (if provided) the public CDN's.

Include both references in the index.html file but comment out the local bower references (default to CDN).

We should show off the new add-in commands in the add-in that's generated.

http://blogs.msdn.com/b/exchangedev/archive/2015/08/31/introducing-add-in-commands.aspx
http://blogs.msdn.com/b/exchangedev/archive/2015/09/01/building-add-ins-with-commands.aspx

I have a demo add-in that shows the three command button types that's a straight HTML/CSS/JS project. It also uses Fabric: https://github.com/jasonjoh/command-demo

I'd propose using this in place of the demo add-in that's there now. We could prompt the user to include the command button types they are interested in and only include those types. I'm working on a prototype in my fork of this repo, I'll update once I have something to look at.

Where appropriate, include a tsd.json file in the root of the generated projects that includes references to the relevant type definition files for the JS libraries referenced.

Using generator on Windows 10 in the following manner:

yo office
? Project name (display name): yotest2
? Root folder of project? Default to current directory
 (C:\Users\jasonjoh\Source\Repos\mail-addins\yotest2), or specify relative path
  from current (src / public):
? Office project type: Mail Add-in (read & compose forms)
? Technology to use: HTML, CSS & JavaScript

After the generator does its work, and the final line is output:

microsoft.office.js#2b215a298b bower_components\microsoft.office.js

The generator seems to hang, with the cursor just flashing. If you press Enter, it will exit.

Ideally the need to hit Enter can be removed, but if it can't, the tool should tell the user they need to hit Enter to exit.

The generator creates an invalid add-in manifest file. If you try to upload the manifest.xml directly after generating the add-in, the Apps for Office catalog in SharePoint Online will consider the manifest as invalid. In order to fix the issue you need to remove the empty <SupportUrl/> element from manifest.xml. After that you will be able to upload the manifest.xml file as expected.

Hey there, i'm trying to run this generator using angular, but i got this error, any sugestion?

Thanks!

When generating an add-in in a directory relative to current the following structure is generated (based on a Task Pane Add-in built using HTML):

.
|- bower.json
|- gulpfile.js
|- jsconfig.json
|- manifest.xml
|- node_modules
|- package.json
|- tsd.json
|- [project root directory]
|  |- app
|  |- bower_components
|  |- content
|  |- images
|  |- scripts

Shouldn't all files be placed in the project root directory which is what you get when you choose the current directory to be the project root directory, ie:

[project root directory]
|- bower.json
|- gulpfile.js
|- jsconfig.json
|- manifest.xml
|- node_modules
|- package.json
|- tsd.json
|- app
|- bower_components
|- content
|- images
|- scripts

The problem seems to be right here in gulpfile.js:

  spawn('node',
    [
      '--debug',
      path.join(which.sync('yo'), '../../', 'lib/node_modules/yo/lib/cli.js'),
      'office',
      ' --skip-install'
    ], {
      stdio: 'inherit'
    });

This ends up looking for cli.js in the wrong place:

C:\Users\alexpark\OneDrive\fun\generator-office>gulp run-yo
[21:34:11] Using gulpfile ~\OneDrive\fun\generator-office\gulpfile.js
[21:34:11] Starting 'run-yo'...
[21:34:11] BE AWARE!!! - Running this with default options will scaffold the project in the generator's source folder.
[21:34:11] Finished 'run-yo' after 15 ms
Debugger listening on port 5858
module.js:338
    throw err;
          ^
Error: Cannot find module 'C:\Users\alexpark\AppData\Roaming\lib\node_modules\yo\lib\cli.js'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Changing path.join(which.sync('yo'), '../../', 'lib/node_modules/yo/lib/cli.js'), to path.join(which.sync('yo'), '../../', 'npm/node_modules/yo/lib/cli.js'), works, but a proper fix would switch based on the OS or maybe programmatically find the npm path?

When browsing to the root of the app, I see the contents of the root folder.

However, I think what you're trying to show is something like the following image

If this is right, you just need to add ng-app and ng-controller directives to index.html

<html ng-app="officeAddin">
...
<body id="container" ng-controller="homeController">

and set directoryListing: false in gulpfile.js

Standardize coding style & rules. Include this as a gulp task.

I just setup the Yo and getting the error. Any pointers for fixing? I am running it on Win10 Pro.

In the index.html file all JavaScript references specify the script type as application/javascript. Shouldn't it be text/javascript instead which is the default script type in HTML5? If the script type will be changed consider removing it altogether as mentioned in issue #40.