### NPM Scripts for Build, Test, and Deployment Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt Complete set of npm scripts for managing the Office add-in lifecycle including production and development builds, development server startup, add-in debugging, unit and end-to-end testing, manifest validation, and code linting. Provides convenient commands for developers to build, test, and deploy the add-in. ```JSON { "scripts": { "build": "webpack --mode production", "build:dev": "webpack --mode development", "dev-server": "webpack serve --mode development", "start": "office-addin-debugging start manifest.xml", "stop": "office-addin-debugging stop manifest.xml", "test": "npm run test:unit && npm run test:e2e", "test:unit": "mocha -r ts-node/register test/unit/*.test.ts", "test:e2e": "mocha -r ts-node/register test/end-to-end/*.ts", "validate": "office-addin-manifest validate manifest.xml", "lint": "office-addin-lint check", "lint:fix": "office-addin-lint fix", "convert-to-single-host": "node convertToSingleHost.js" } } ``` -------------------------------- ### Initialize React App Component with Fluent UI Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt Main application component that renders the Office add-in task pane using React and Fluent UI theming. It initializes the React root element when Office is ready and renders the App component with theme provider. The component displays a header, hero list with feature descriptions, and text insertion functionality. ```TypeScript import App from "./src/taskpane/components/App"; import { FluentProvider, webLightTheme } from "@fluentui/react-components"; import { createRoot } from "react-dom/client"; // Initialize the add-in const rootElement: HTMLElement | null = document.getElementById("container"); const root = rootElement ? createRoot(rootElement) : undefined; Office.onReady(() => { root?.render( ); }); // App component structure const App: React.FC = (props: AppProps) => { const listItems: HeroListItem[] = [ { icon: , primaryText: "Achieve more with Office integration" }, { icon: , primaryText: "Unlock features and functionality" }, { icon: , primaryText: "Create and visualize like a pro" } ]; return (
); }; ``` -------------------------------- ### Configure Webpack Development Server with HTTPS Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt Webpack configuration for Office add-in development featuring HTTPS support with automatic certificate generation, hot module reloading, and CORS headers. Uses office-addin-dev-certs for certificate management and configures entry points for polyfill, React, task pane, and commands bundles. ```JavaScript // webpack.config.js configuration const devCerts = require("office-addin-dev-certs"); module.exports = async (env, options) => { const dev = options.mode === "development"; const config = { devtool: "source-map", entry: { polyfill: ["core-js/stable", "regenerator-runtime/runtime"], react: ["react", "react-dom"], taskpane: { import: ["./src/taskpane/index.tsx", "./src/taskpane/taskpane.html"], dependOn: "react" }, commands: "./src/commands/commands.ts" }, devServer: { hot: true, headers: { "Access-Control-Allow-Origin": "*" }, server: { type: "https", options: await devCerts.getHttpsServerOptions() }, port: 3000 } }; return config; }; // Start development server // npm run dev-server ``` -------------------------------- ### Office Add-in Manifest XML Configuration Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt This XML manifest file defines the core properties of an Office Add-in, including its unique ID, version, provider, and display information. It specifies which Office applications (hosts) the add-in supports (e.g., Word, Excel, PowerPoint, OneNote), the default URL for the add-in's task pane, and the required permissions (e.g., ReadWriteDocument). ```xml 05c2e1c9-3e1d-406e-9a91-e9ac64854143 1.0.0.0 Contoso en-US ReadWriteDocument ``` -------------------------------- ### Text Insertion Component with React Hooks Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt Interactive React component that provides a textarea input field and button for users to insert custom text into documents. Uses useState hook to manage text state and handles text change and insertion events asynchronously through props callback function. ```TypeScript import TextInsertion from "./src/taskpane/components/TextInsertion"; import { Button, Field, Textarea } from "@fluentui/react-components"; import { useState } from "react"; // Usage in parent component // Component implementation const TextInsertion: React.FC = (props) => { const [text, setText] = useState("Some text."); const handleTextInsertion = async () => { await props.insertText(text); }; const handleTextChange = async (event: React.ChangeEvent) => { setText(event.target.value); }; return (