Office Boilerplate Starter Extension

This extension allows you to quickly spin up a boilerplate sandbox, starting from either a blank canvas or an Office app template, exclusively using Fluent UI v9 components, design tokens, and icons. It provides a comprehensive foundation for building modern, accessible, and consistent user interfaces with Microsoft's design system.

Features

• Creates a complete 1:1 copy of the Office App Boilerplate repository
• Uses git clone (preferred) with ZIP download fallback for reliability
• Removes .git directory to provide a clean starting template
• Links back to the original boilerplate repository

Get Started

Install the Extension

Install this extension from the VS Code Marketplace. https://marketplace.visualstudio.com/items?itemName=OPGDesignLab.office-boilerplate-starter

Create or Open a Project in VS Code

You can start from an empty workspace or an existing folder.

Open the Command Palette

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).

Run the Create Project Command

In the search bar at the top, type:

Office Boilerplate: Create Project

Select the command from the list.

Name Your Project

Enter a name for your new project in the input field.

Wait for the Boilerplate to Install

The boilerplate files will be copied into your workspace.

Install Dependencies

In the VS Code terminal, run:

npm install

Start Building

You now have the boilerplate ready to go with Fluent UI v9 components, design tokens, and icons.

Development

npm install
npm run dev

Press F5 in VS Code to launch Extension Development Host.

Packaging

npm run package

This produces a .vsix you can install.

Implementation

This extension creates a complete copy of the boilerplate repository using:

1. Git clone (when git is available) - fastest and most reliable
2. ZIP download fallback (when git is unavailable) - downloads and extracts the latest main branch