Develop Office Add-ins with Visual Studio Code
This article describes how to use Visual Studio Code (VS Code) to develop an Office Add-in.
For information about using Visual Studio to create an Office Add-in, see Develop Office Add-ins with Visual Studio.
npm install -g yo generator-office
Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.
Create the add-in project using the Yeoman generator
If you're using VS Code as your integrated development environment (IDE), you should create the Office Add-in project with the Yeoman generator for Office Add-ins. The Yeoman generator creates a Node.js project that can be managed with VS Code or any other editor.
To create an Office Add-in with the Yeoman generator, follow instructions in the 5-minute quick start that corresponds to the type of add-in you'd like to create.
Develop the add-in using VS Code
When the Yeoman generator finishes creating the add-in project, open the root folder of the project with VS Code.
On Windows, you can navigate to the root directory of the project via the command line and then enter
code . to open that folder in VS Code. On Mac, you'll need to add the
code command to the path before you can use that command to open the project folder in VS Code.
Test and debug the add-in
Methods for testing, debugging, and troubleshooting Office Add-ins vary by platform. For more information, see Test and debug Office Add-ins.
Publish the add-in
An Office Add-in consists of a web application and a manifest file. The web application defines the add-in's user interface and functionality, while the manifest specifies the location of the web application and defines settings and capabilities of the add-in.
While you're developing your add-in, you can run the add-in on your local web server (
localhost), but when you're ready to publish it for other users to access, you'll need to deploy the web application to a web server or web hosting service (for example, Microsoft Azure) and update the manifest to specify the URL of the deployed application.
When your add-in is working as desired and you're ready to publish it for other users to access, complete the following steps:
From the command line, in the root directory of your add-in project, run the following command to prepare all files for production deployment:
npm run build
When the build completes, the dist folder in the root directory of your add-in project will contain the files that you'll deploy in subsequent steps.
Upload the contents of the dist folder to the web server that'll host your add-in. You can use any type of web server or web hosting service to host your add-in.
In VS Code, open the add-in's manifest file, located in the root directory of the project (
manifest.xml). Replace all occurrences of
https://localhost:3000with the URL of the web application that you deployed to a web server in the previous step.
Choose the method you'd like to use to deploy your Office Add-in, and follow the instructions to publish the manifest file.