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:
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:
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" |
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.