yeoman

If you are new to Office Web Add-in Development, then this post is for you. Even if you are not new and you need to setup a new development environment, this post is for you too.

Now, as far as manually setting up a new Office web add-in development environment, there are a few sources for helping you get started. There is the official guide here:

Set up your development environment

And I have also written one here:

How to-Configure VSCode for Office Development

NOTE: Mine is a tad more complicated, but essentially walks you through setting up for full fledged development, including source control with Git. That article was actually more for me when I wrote it.

BUT WAIT, THERE’S MORE…

However, after a co-worker and fellow Office Developer (Marty Andren) and I got to talking about this topic, I had an idea to create a script essentially automating the entire process. That was how the Microsoft Office Development Setup script, or MODES was born. The script is posted in the following repository:

https://github.com/davecra/modes

The MODES script is provided as-is for folks who need to setup an Office development environment. It is a simple run it and done. Once you have completed this script you will have:

The latest versions of Visual Studio Code
The latest version of NodeJS
The latest version of Node Package Manager (NPM)
The latest version of Yeoman (more info here)
And the Office Yeoman generator.

NOTE: This also installs http-server, a simple local web server that I hope to use in a forthcoming blog post that expands on a previous post demonstrating how easy it is to build a Web Add-ins from scratch.

NOTE: The script installs everything as local user, so there is no need for administrative permissions.

On the MODES GitHub post, you can follow the README directions to download and run the PowerShell script. If you are unfamiliar with PowerShell, you can just follow the steps and should walk you through what you need to do fairly quickly and easily.

If the above script cannot be run on your system (as a script), you can try to perform the steps manually by Copy/Pasting the following GIST into a PowerShell window and pressing enter:

	Add-Type –assembly "system.io.compression.filesystem";$vscode_url = "https://aka.ms/win32-x64-user-stable";$vscode_output = $env:USERPROFILE + "\downloads\vscode.exe";$node_url = "https://nodejs.org/dist/latest/win-x64/node.exe";$node_output = $env:USERPROFILE + "\downloads\node.exe";$node_install_path = $env:USERPROFILE + "\node";$npm_url = "https://nodejs.org/dist/npm/npm-1.4.9.zip";$npm_output = $env:USERPROFILE + "\downloads\npm.zip"
	Invoke-WebRequest –Uri $vscode_url –OutFile $vscode_output
	Invoke-WebRequest –Uri $node_url –OutFile $node_output
	Invoke-WebRequest –Uri $npm_url –OutFile $npm_output
	Start-Process –FilePath $vscode_output –ArgumentList ('/VERYSILENT', '/MERGETASKS=!runcode') –Wait
	md $node_install_path
	copy $node_output $node_install_path
	[io.compression.zipfile]::ExtractToDirectory($npm_output, $node_install_path)
	[Environment]::SetEnvironmentVariable("Path", [Environment]::GetEnvironmentVariable("Path", [EnvironmentVariableTarget]::User) + ";" + $node_install_path, [EnvironmentVariableTarget]::User)
	$env:Path += ";" + $node_install_path
	cd $node_install_path
	Start-Process –FilePath npm –ArgumentList ('install', '-g', 'npm') –WindowStyle Hidden –Wait
	Start-Process –FilePath npm –ArgumentList('install', '-g', 'yo', 'generator-office') –WindowStyle Hidden –Wait
	Start-Process –FilePath npm –ArgumentList('install', '-g', 'http-server') –WindowStyle Hidden –Wait
	$yo_file = $node_install_path + "\yo.ps1"
	ren $yo_file "yo.ps1.old"

view raw

modes_gist.ps1

hosted with ❤ by GitHub

This GIST is a “minified” version of the script on GitHib (no comments, no output and some lines are combined). So if you run this GIST, you will need to do give it time to complete as there is no feedback.

I thought I had written this some time ago, but I guess I did not. So here goes…

NOTE: First, I want to state that if you are creating applications for the full Office clients, it might be best to continue using Visual Studio 2017 as you are able to debug directly in these clients with much more ease than you can from VSCode.

Some might find it hard to believe, but I have been geeking out hard and using VSCode to develop OfficeJS (Office 365 Web Add-ins). I find it a very useful, light client, where I am able to focus on just the basics. When combined with tools like Node Package Manager (NPM), browser sync, Yoeman and Git, you have a surprisingly robust development environment what makes doing things delightfully easy. But it was not always this way, I had a learning curve and it took me a while to get it all setup and running correctly. I am not saying it was hard, just… different. So I channeled my inner geek and much to his delight, it turned out for the better.

So as I stated the challenge was getting it all setup. This is going to be very different, especially if you are coming from the Visual Studio 2017 world (much more so, from the VBA world). So, here are the step by step instructions I use for getting my VSCode development environment all configured for Office Development:

Download and install VSCode: https://code.visualstudio.com/ .
Download and install Node to get Node Package Manager (NPM): https://nodejs.org/en/download/. On this page you will want to download the Windows/MSI/64-bit version.
Download and install Git: https://git-scm.com/download. On this page you will want to make sure you select to install the latest which is from the link in the upper right of the page.
Now we have the basic packages we need in order to begin development. What we need to do now is install the Yeoman generator. To do this:
- Open VSCode
- Press CTRL+`. This will open the console window. Alternatively you can go to the View menu and click Integrated Terminal
- Switch to the Terminal in the Console and then type the following command: npm install —global yo
Now you are ready to start generating OfficeJS add-ins from VSCode, and these steps will walk you through the first one:
- Type: yo office sample-1
- Once you do this the scaffold generator will kick in and ask you a few questions. Answer them as I have, in bold, below:? Would you like to create a new subfolder for your project? No
  ? Which Office client application would you like to support? Excel
  ? Would you like to create a new add-in? Yes, I need to create a new web app and manifest file for my add-in.
  ? Would you like to use TypeScript? No
  ? Choose a framework: Jquery
  ? Would you like to open it now while we finish creating your project? Yes
- Once complete you will not have a solution folder called sample1 under your user profile c:\users\<yourname>\sample-1, but the project will not be open in VSCode, yet…
- To open your project on the File menu, click Open Folder and then browse to and open the sample1 folder, then press Select Folder. NOTE: If you are coming from Visual Studio where the tree of solution files appears on the right side of the screen, the “Explorer” in VSCode appears on the left and it is actually a listing of ALL files and ALL folders in the solution directory.
- You will see the code files for your project on the left hand side in the Explorer. The key files of importance to you, getting started will be:
  - sample-1-manifest.xml – this is your manifest for publishing your add-in.
  - index.html – this is your primary page or “task pane” for your add-in.
- In this example I will not have you edit any of the files, but the basics are completely provided to build a solution. At this point we will check this into Git. Press CTRL+SHIFT+G. This will open the Source Control repository page. Click the icon to the right of the words Source Control, to Initialize Repository. This will open the folder to your solution, simply click Initialize Repository. You can now work with Git to manage your project. I will not go into more detail, but if you are interested, please watch this video: https://git-scm.com/video/what-is-git
- Finally, we are ready to debug. But first, if you are on Windows 10, and you use Edge or Internet Explorer as your default browser, I would strongly suggest using the Google Chrome browser because the debug tools are so much better. However, there is one change you need to make:
  - Open the bsconfig.json file in the Explorer
  - At the top of the configuration you need to place this line: “browser”: “chrome”, so that the file looks like this:
```
{
    "browser": "chrome",
    "ui": {...
```
- To debug, press CTRL+` to open or return to the Integrated Terminal. Type: npm start. This will open your project in Chrome. You might get a warning that the site is not trusted, click Advanced and select to trust anyway / continue.
- Open another tab and browse to office365.com. Once there, log into your account. On the Office menu in the upper left, click Excel. On the Insert menu, click Office Add-ins. In the upper right of the dialog, click Upload my add-in. Click Browse and then select the file: c:\users\<yourname>\sample-1\sample-1-manifest.xml. Your add-in will now load on the Home tab, switch there, and press Show Taskpane.

This looks like a lot of work and I know for most of you that are like me, coming from a Visual Studio and/or VBA background, this is very alien. You might consider this a step backwards or it might seem like it is time to hang up the spurs. But give it some time, especially if you are just getting into OfficeJS, it will grow on you. In the meantime, here are some of my other blog entries around this to help you:

Please let me know if you have questions or would like some help with any of this. What I hope to be able to do at some point is to add posts on:

Importing a Script Lab project into a Yo Office scaffold
A video on the steps outlined in this post. I have done videos for internal training at Microsoft before, but never on my own for my blog. So this will be new territory if I can get around to it.
Other samples posts to getting started with various projects.

If you have any ideas of what you would like to see, please let me know.