yo

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.

Tag: yo

Microsoft Office Development Environment Setup Script

BUT WAIT, THERE’S MORE…