{"id":20268256,"url":"https://github.com/officedev/m365-extensibility-image-editor","last_synced_at":"2025-10-14T23:31:43.385Z","repository":{"id":39792932,"uuid":"489068410","full_name":"OfficeDev/m365-extensibility-image-editor","owner":"OfficeDev","description":"Image Editor reference app for Office 365 platform","archived":false,"fork":false,"pushed_at":"2023-10-06T19:40:29.000Z","size":3069,"stargazers_count":18,"open_issues_count":10,"forks_count":3,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-25T01:41:26.450Z","etag":null,"topics":["apps","m365","microsoft","office","outlook","teams"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OfficeDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null}},"created_at":"2022-05-05T17:33:47.000Z","updated_at":"2024-02-03T03:00:34.000Z","dependencies_parsed_at":"2023-02-08T07:01:06.724Z","dependency_job_id":null,"html_url":"https://github.com/OfficeDev/m365-extensibility-image-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OfficeDev%2Fm365-extensibility-image-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OfficeDev%2Fm365-extensibility-image-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OfficeDev%2Fm365-extensibility-image-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OfficeDev%2Fm365-extensibility-image-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OfficeDev","download_url":"https://codeload.github.com/OfficeDev/m365-extensibility-image-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248338980,"owners_count":21087210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apps","m365","microsoft","office","outlook","teams"],"created_at":"2024-11-14T12:17:17.557Z","updated_at":"2025-10-14T23:31:43.281Z","avatar_url":"https://github.com/OfficeDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Editor\n\n![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)\n[![ts](https://badgen.net/badge/-/TypeScript/blue?icon=typescript\u0026label)](https://github.com/microsoft/TypeScript)\n[![webpack](https://badges.aleen42.com/src/webpack.svg)](https://github.com/webpack/webpack)\n[![react](https://badges.aleen42.com/src/react.svg)](https://github.com/facebook/react)\n\nImage Editor is a web app that runs on the Office 365 platform on multiple host apps (Teams, Office, Outlook). The app allows users to edit, save, open, and save images, using Microsoft Graph API. \n\nUse this project as a template to create your own web app that can be used in all three Microsoft host apps.\n\n![Alt Text](./demo.gif)\n\n## Development\n\n### Clone repository\n\n`git clone https://github.com/OfficeDev/m365-extensibility-image-editor.git`\n\nRun all commands from the root of m365-extensibility-image-editor\n\n### Prerequisites\n\nNode.js\n\u003chttps://nodejs.org/en/\u003e\n\nYarn\n\u003chttps://yarnpkg.com/getting-started/install\u003e\n\n### Install\n\nrun `yarn install`\n\n### Build and run\n\nTo run on localhost using webpack devserver:\n\n`yarn start`\n\nDev server will run on \u003chttps://localhost:8080\u003e by default.\n  \nIgnore and skip unsafe localhost (no localhost cert) in the browser for development.\nAlternatively use your own cert and domain name.\n\n### Registering the app and setting up sign in\n\nIn order to get sign in with MSAL working for the Image Editor app (to get Microsoft Graph API functioning), you have to do these essential steps:\n  \n1. **Create test tenant**\nFor creating a test tenant see \u003chttps://docs.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program-get-started\u003e\n\n2. **Register the app as an enterprise application**\n\n    - Get credentials for the admin of your test tenant\n    - Go to \u003chttps://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade\u003e\n    - Click '+ New registration'.\n    - Enter a custom name for your App\n    - **Supported account types** - Accounts in any organizational directory (Any Azure AD directory - Multitenant)\n    - **Redirect URI** - Field1: \"Single-page application (SPA)\" Field2 (host src): \"https://localhost:8080/\"\n    - Click Register\n\n3. **Changing app configs**\n\n    - We need to set the new application id into the configs of the app code.\n    - If have not done so, clone this repository.\n    - Go to \u003chttps://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade\u003e to see all of your app registrations\n    - Click on the 'All applications'\n    - Click on the entry of your **App Registration** made in step 2.\n    - Take note of the application id from the overview tab of the app registration, this value should be a guid\n    - Go back to the root of the image editor repository\n    - in '.env.dev' file, change APP_ID field to the application id you obtained above.\n    - in '.env.prod' file, change APP_ID field to the application id you obtained above.\n\n4. **Applying admin approvals**\n    - We need to, as an admin, give consent to the app to access the tenant's resources and services.\n    - Go to the base of the repo and run `yarn start` to start the Image Editor app.\n    - Attempt to sign in with the admin credentials for the tenant you created.\n    - Permision Requested: As the admin, check the 'Consent on behalf of your organization' and click Accept. (another dialog to request the same consent may show up).\n    - Now on the App you should see an error: 'Loading error: Error in loadDataStore, innerError: Error in mountDefaultPod, innerError: Unable to retrieve user's OneDrive domain.' You have to grant permission to Onedrive (through the graph api). To do this...\n    - Go to \u003chttps://portal.azure.com/#blade/Microsoft_AAD_IAM/StartboardApplicationsMenuBlade/Overview\u003e and see that there is a new entry for the Image Editor App.\n    - Click on 'All Applications' on the side bar.\n    - In the list, Click on the Image Editor app with the name you've assigned it.\n    - Click on Permissions.\n    - Click on 'Grant Admin Consent'\n    - **Permissions requested Review for your organization** : Click accept. (The dialog might be frozen on 'redirect', just exit it).\n    - Refresh the previous page, you should see an entry for 'Graph API' that was granted.\n    - Go back to the 'Image Editor App', refresh, and try to login again.\n    - A few more consents may be needed to be granted. As the admin, check the 'Consent on behalf of your organization' and click Accept for all of them.\n    - You may need to refresh and login again to find it has succeeded.\n    - Now you can sign in to the Image Editor app.\n\n### Running across Microsoft 365 (Office.com, Outlook, and Teams)\n\nWithin Microsoft Teams, a user can upload a 'manifest file' (json config file) that is then read by the other Microsoft host apps (Outlook, Office), to host the Image Editor app within their experiences - giving the user access to the app in all three locations. This manifest will have information on your registered app id, website url, and more. The following instructions is for a dev testing, localhost, manifest.\n  \n1. run `yarn start`, ensure app is running on localhost:8080\n2. edit manifest file **configs\\hosts\\manifest.json** so the id property value matches the app registration you set up above.\n3. Set a list of valid domains under 'validDomains', which accepts an array with type string\n4. zip all files in the **configs\\hosts** folder (do not zip the folder itself, just the contents)\n5. go to \u003chttps://dev.teams.microsoft.com/apps\u003e and click **Import App** to upload the .zip file.\n6. go to the new app's entry, click **preview app**, and \nteams has loaded, click add.\n  \n\u003cimg src=\"https://user-images.githubusercontent.com/14112046/165679846-b9460945-e084-4673-80de-9a844ab8a4d3.png\" alt=\"drawing\" width=\"800\"/\u003e\n  \nBy default the app will only show up in your teams application. To enable a multi-hub experience, you will need to meet certain prerequisites as described in this article: \u003chttps://docs.microsoft.com/en-us/microsoftteams/platform/m365-apps/prerequisites\u003e\n  \nPlease note that after enrolling your developer tenant for Office 365 Targeted releases, it may take upwards of 5 days for your tenant to be part of the release. After that, you will be able to see your app in outlook and office.\n  \n**Access app on Teams**  \n\u003chttps://www.teams.com\u003e  \n\u003cimg src=\"https://user-images.githubusercontent.com/14112046/165680264-a4230731-48ca-4208-8647-511893507750.png\" alt=\"drawing\" width=\"800\"/\u003e\n  \n**Access app on Office**  \n\u003chttps://www.office.com/\u003e  \n\u003cimg src=\"https://user-images.githubusercontent.com/14112046/169156017-7f40ba34-74db-4004-8bd7-ebf4565b7a48.png\" alt=\"drawing\" width=\"600\"/\u003e\n  \n**Access app on Outlook**  \n\u003chttps://www.outlook.com/\u003e  \n\u003cimg src=\"https://user-images.githubusercontent.com/14112046/165680783-343d7408-88dc-4705-b085-0f6ec79c41ac.png\" alt=\"drawing\" width=\"800\"/\u003e\n\nFor more information on extending your app across Microsoft 365:  \n\u003chttps://docs.microsoft.com/en-us/microsoftteams/platform/m365-apps/overview\u003e\n  \nFor more information on the app manifest:  \n\u003chttps://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema-dev-preview\u003e\n  \nFor more information on the app SDK:  \n\u003chttps://docs.microsoft.com/en-us/javascript/api/overview/msteams-client?view=msteams-client-js-latest\u003e\n  \n### Build production\n\nBuilding minified production files  \n`yarn build:prod`  \nminified files placed in dist folder\n\n### Tests\n\nTo run jest tests  \n`yarn test`\n\n### Linting\n\nTo run linting  \n`yarn lint`  \nTo run linting and automatically fix issues  \n`yarn lint:fix`\n\n## Contributing\n\nThis project welcomes contributions and suggestions. Most contributions require you to agree to a\nContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\nthe rights to use your contribution. For details, visit \u003chttps://cla.opensource.microsoft.com\u003e.\n\nWhen you submit a pull request, a CLA bot will automatically determine whether you need to provide\na CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions\nprovided by the bot. You will only need to do this once across all repos using our CLA.\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n## Trademarks\n\nThis project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft\ntrademarks or logos is subject to and must follow\n[Microsoft's Trademark \u0026 Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).\nUse of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.\nAny use of third-party trademarks or logos are subject to those third-party's policies.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fofficedev%2Fm365-extensibility-image-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fofficedev%2Fm365-extensibility-image-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fofficedev%2Fm365-extensibility-image-editor/lists"}