{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Local Development - Development Portal | Outreach","description":"Outreach extensibility development and documentation portal","siteUrl":"https://developers.outreach.io","keywords":"outreach developer portal, api documentation, api reference docs, sdk documentation","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"local-development","__idx":0},"children":["Local development"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Given that the Outreach context is exclusive to the Outreach environment, it's imperative to establish a secure connection over the local network for development purposes."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"prerequisites","__idx":1},"children":["Prerequisites"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Node.js"]},": Install ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://nodejs.org/","target":"_blank"},"children":["Node.js"]}," which includes npm (Node Package Manager), required to manage the dependencies and run the React application."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["OpenSSL"]},": Ensure ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.openssl.org/","target":"_blank"},"children":["OpenSSL"]}," is installed on your system to generate self-signed SSL certificates. This is often pre-installed on UNIX-based systems (Linux, macOS), but for Windows, you may need to install it manually or use a tool like Git Bash that includes it."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Webpack"]},": The application must be bundled with Webpack, so ensure that Webpack is installed and properly configured for your project."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"installation","__idx":2},"children":["Installation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"shell","header":{"controls":{"copy":{}}},"source":"npm install github:getoutreach/extensibility-sdk\n","lang":"shell"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"setting-up-the-application","__idx":3},"children":["Setting up the application"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Start by setting up a simple React application. This involves initializing the Outreach context, which is only available within the Outreach extension environment. The initialization occurs within a React component, as demonstrated below:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import React, { useEffect } from \"react\";\nimport extensibilitySdk from '@getoutreach/extensibility-sdk';\n\nconst Extension: React.FC = () => {\n  // Using the useEffect hook to initiate the Outreach context\n  useEffect(() => {\n    const init = async () => {\n      const outreachContext = await extensibilitySdk.init();\n      // Handle the outreachContext as needed\n    };\n    init();\n  }, []);\n\n  return (\n    // Your component JSX\n  );\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"generate-ssl-certificate-for-https","__idx":4},"children":["Generate SSL Certificate for HTTPS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You need to generate a self-signed SSL certificate or get one from a Certificate Authority (CA). For local development, a self-signed certificate will suffice."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"shell","header":{"controls":{"copy":{}}},"source":"openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt -subj \"/CN=extension.outreach-dev.com\"\n","lang":"shell"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This will create a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["localhost.key"]}," file for your private key and a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["localhost.cert"]}," file for your self-signed certificate, valid for 10 years (3650 days). Remember, browsers will not trust self-signed certificates by default, and you will need to proceed through security warnings or add an exception for your certificate."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can replace ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["extension.outreach-dev"]}," with the domain you want to use locally."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"update-the-hosts-file","__idx":5},"children":["Update the hosts file"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The hosts file maps hostnames to IP addresses. On your local machine, add your domain to this file."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["On ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Windows"]},", edit ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["C:\\Windows\\System32\\drivers\\etc\\hosts"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["On ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["macOS"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Linux"]},", edit ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["/etc/hosts"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the following code:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"shell","header":{"controls":{"copy":{}}},"source":"127.0.0.1    extension.outreach-dev.com\n","lang":"shell"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["extension.outreach-dev.com"]}," will resolve to your local machine."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"update-webpack-configuration","__idx":6},"children":["Update Webpack configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Modify your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["webpack.config.js"]}," or the relevant configuration file to enable HTTPS and specify your certificate and key."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const fs = require('fs');\n\n//...\n\ndevServer: {\n  https: {\n    key: fs.readFileSync('./localhost.key'),\n    cert: fs.readFileSync('./localhost.crt'),\n  },\n  host: 'extension.outreach-dev.com',\n  //...\n},\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Remember to replace ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["./localhost.key"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["./localhost.crt"]}," with the actual paths to your key and certificate files."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"run-your-webpack-development-server","__idx":7},"children":["Run your Webpack Development Server"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Start your Webpack server. Make sure your local development server is running with HTTPS enabled, as configured with your Webpack development server."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"shell","header":{"controls":{"copy":{}}},"source":"yarn start # Or the appropriate command to start your Webpack server\n","lang":"shell"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"creating-a-test-app","__idx":8},"children":["Creating a test app"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Upon successful setup of the Webpack Development Server, the next step involves registering the application with the Outreach platform."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigate to the Outreach extension dashboard."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Proceed to create a new extension. During this process, specify the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["extension.outreach-dev.com"]}," as the \"Hosting URL\". This will route requests from the Outreach extension to your local server."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information check out ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/client-extensions/your-first-outreach-extension"},"children":["Your first extension"]}]}]},"headings":[{"value":"Local development","id":"local-development","depth":1},{"value":"Prerequisites","id":"prerequisites","depth":2},{"value":"Installation","id":"installation","depth":2},{"value":"Setting up the application","id":"setting-up-the-application","depth":2},{"value":"Generate SSL Certificate for HTTPS","id":"generate-ssl-certificate-for-https","depth":2},{"value":"Update the hosts file","id":"update-the-hosts-file","depth":2},{"value":"Update Webpack configuration","id":"update-webpack-configuration","depth":2},{"value":"Run your Webpack Development Server","id":"run-your-webpack-development-server","depth":2},{"value":"Creating a test app","id":"creating-a-test-app","depth":2}],"frontmatter":{"seo":{"title":"Local Development - Development Portal | Outreach"}},"lastModified":"2026-04-29T11:57:31.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/client-extensions/local-development","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}