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.

Prerequisites

• Visual Studio Code

• A project creation tool. You have the following options.

  • The Yeoman Generator for Office Add-ins (also called "Yo Office"). For installation and usage instructions, see Create Office Add-in projects using the Yeoman Generator. With this tool, you have the option of creating add-ins that use either the add-in only manifest or the unified manifest for Microsoft 365. For more information about the differences, start with Office add-ins manifest.
  • The Microsoft 365 Agents Toolkit for Visual Studio Code. For installation instructions, see Install Agents Toolkit. For usage instructions, see Create Office Add-in projects with Microsoft 365 Agents Toolkit. With this tool you can create add-ins that use the unified manifest for Microsoft 365.

  Note

  The unified manifest for Microsoft 365 can be used in production Outlook add-ins. It's available only as a preview for Excel, PowerPoint, and Word add-ins.

Develop the add-in using VS Code

To work with the project, open the root folder of the project with VS Code.

Both tools create a basic add-in with limited functionality. You can customize the add-in by editing the manifest, HTML, JavaScript or TypeScript, and CSS files in VS Code. For a high-level description of the project structure and files in the add-in project that the Yeoman generator creates, see the Yeoman generator guidance within the 5-minute quick start that corresponds to the type of add-in you've created.

Test and debug the add-in

Methods for testing, debugging, and troubleshooting Office Add-ins vary by platform and by the tool that is used to create the project. For more information, see Test and debug Office Add-ins and Create Office Add-in projects with Microsoft 365 Agents Toolkit.

Publish the add-in

An Office Add-in includes two basic components: a manifest file and your own web application. The manifest defines various settings, including how your add-in integrates with Office clients. Your web application serves the HTML, JavaScript, and other files that provide the add-in's functionality and UI.

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.

1. 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.

2. 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.

3. In VS Code, open the add-in's manifest file, located in the root directory of the project. Replace all occurrences of https://localhost:3000 with the URL of the web application that you deployed to a web server in the previous step.

4. Choose the method you'd like to use to deploy your Office Add-in, and follow the instructions to publish the add-in.

See also

• Core concepts for Office Add-ins
• Develop Office Add-ins
• Design Office Add-ins
• Test and debug Office Add-ins
• Publish Office Add-ins