{"id":15602427,"url":"https://github.com/fiveisprime/apm","last_synced_at":"2025-10-03T14:25:18.365Z","repository":{"id":38770986,"uuid":"180885119","full_name":"fiveisprime/apm","owner":"fiveisprime","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-07T04:37:24.000Z","size":1778,"stargazers_count":16,"open_issues_count":26,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T08:07:43.667Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://maherna-apm-api.azurewebsites.net/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fiveisprime.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-11T22:06:31.000Z","updated_at":"2024-05-25T11:21:54.000Z","dependencies_parsed_at":"2022-09-17T15:11:32.962Z","dependency_job_id":null,"html_url":"https://github.com/fiveisprime/apm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveisprime%2Fapm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveisprime%2Fapm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveisprime%2Fapm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiveisprime%2Fapm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fiveisprime","download_url":"https://codeload.github.com/fiveisprime/apm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250581381,"owners_count":21453656,"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":[],"created_at":"2024-10-03T02:41:29.275Z","updated_at":"2025-10-03T14:25:13.313Z","avatar_url":"https://github.com/fiveisprime.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://dev.azure.com/maherna/APM/_apis/build/status/APM-CI?branchName=master)](https://dev.azure.com/maherna/APM/_build/latest?definitionId=11\u0026branchName=master)\r\n\r\nThis app is built using Angular on the front end and Azure Functions on the back end with data coming from Azure Cosmos DB.\r\n\r\n# Getting Started\r\n\r\nYou'll need the following installed to run this application locally.\r\n\r\n1. Node.js and npm\r\n1. Azure Functions Core Tools\r\n\r\n# How it Works\r\n\r\nThis app uses both Angular and Azure Functions and some configuration is\r\nrequired to connect the two together when running locally.\r\n\r\n![Application Architecture](./app-diagram.png)\r\n\r\n# Running This Example\r\n\r\nOnce cloned, run `npm install` then open in VS Code and install the recommended\r\nextensions. Rename `functions/example.local.settings.json` to\r\n`functions/local.settings.json` and update the database connection settings with\r\nthe endpoint and master key from your Cosmos DB database (using the native SQL API).\r\n\r\nOpen the app in VS Code and hit `F5` (from the menu: Debug \u003e Start Debugging).\r\n\r\nWhen running the app locally, the Angular app runs using the development server\r\nlike you're used to (live reload continues to work). An Angular Proxy routes\r\nrequests to `localhost:4200/api` to the Azure Function app that's running\r\nlocally.\r\n\r\nThe Azure Functions runtime is installed as part of the Azure Functions Core\r\nTools and hosts the Serverless Functions locally on your machine to simulate\r\nexactly how the app will run when deployed.\r\n\r\n**The compound launch configuration makes it possible to hit breakpoints for\r\nboth the Angular app and the Azure Functions app.**\r\n\r\n## Configuration\r\n\r\nThis example requires a Cosmos DB SQL database. To connect to the database, use\r\n`functions/local.settings.json` to configure the connection to the database.\r\n\r\nYou also need to enable CORS for local development, which is also done in local\r\nsettings as seen below.\r\n\r\n```json\r\n{\r\n  \"IsEncrypted\": false,\r\n  \"Values\": {\r\n    \"FUNCTIONS_WORKER_RUNTIME\": \"node\",\r\n    \"AZURE_COSMOS_ENDPOINT\": \"https://\u003cdatabasename\u003e.documents.azure.com:443/\",\r\n    \"AZURE_COSMOS_MASTER_KEY\": \"\u003cmasterkey\u003e\",\r\n    \"AZURE_COSMOS_DATABASE_ID\": \"Product\"\r\n  },\r\n  \"Host\": {\r\n    \"CORS\": \"*\"\r\n  }\r\n}\r\n```\r\n\r\nYou'll need to populate the database with the JSON found in\r\n`src/api/products/products.json`.\r\n\r\nYou'll also need to update the following files once you have you Function App\r\nand Azure Storage account created.\r\n\r\n[`functions/proxies.json`](https://github.com/fiveisprime/apm/blob/master/functions/proxies.json#L8)\r\nUpdate the `backendUri` value with the URL copied from the Storage Account you\r\ncreated to deploy the client code.\r\n\r\n[`src/environments/environment.prod.ts`](https://github.com/fiveisprime/apm/blob/master/src/environments/environment.prod.ts#L3)\r\nUpdate `productUrl` value with the URL copied from the Azure Function you\r\ndeployed from the `functions` directory.\r\n\r\n# Deploying to Azure\r\n\r\nThe client and server code are deployed to different Azure services. The client\r\ncode is deployed to Azure Storage with static website hosting enabled to serve\r\nthe content. The backend code is deployed to Azure Functions, which is also used\r\nas the entry point to the application (requests are proxied to the correct\r\nlocation).\r\n\r\n## Deploy the Function App\r\n\r\nFirst, install the Azure Functions extension for VS Code and sign into your\r\nAzure account. Click on the Azure Icon on the left (in the Activity Bar) then\r\nclick the deploy button in the Azure Functions explorer (the blue up arrow) and\r\nfollow the prompts.\r\n\r\n1. Select the Azure Subscription to create the Function App under\r\n1. Choose **Create New Function App in Azure**\r\n1. Give the app a unique name\r\n\r\nThis will create everything you need on Azure then deploy the app. Once the\r\ndeployment is complete, click the **Upload Settings** in the notification\r\n\r\nIn the Azure Functions explorer, expand your app then expand the **Functions**\r\nnode. Right click on the function that you just deployed and choose\r\n**Copy function URL**. You'll need that in the next step. :)\r\n\r\n## Deploy the Angular App\r\n\r\nBefore deploying, you need to update `./src/environments/environment.prod.json`\r\nand paste the URL from your Function app that's deployed to Azure.\r\n\r\nFirst, install the Azure Storage extension for VS Code and sign into your Azure\r\naccount. Click on the Azure Icon on the left (in the Activity Bar) then click\r\nthe deploy button in the Azure Storage explorer (the blue up arrow) and follow\r\nthe prompts.\r\n\r\n1. Select the Azure Subscription to create the Storage Account under\r\n1. Choose **Create new Storage Account** and give it a unique name\r\n1. Choose **Create new resource group**, accept the name and choose a location\r\n\r\nAt this point the storage account will be created in the background. This will\r\ntake a minute or so. When prompted choose \"Enable static website hosting\" and\r\nenter `index.html` for both the **index document** and the\r\n**404 error document path**.\r\n\r\nOnce created and configured, you're prompted to choose the directory to deploy.\r\nChoose the `./dist` directory from the list and you're all will be built (in\r\nproduction mode) then deployed to storage.\r\n\r\n# Resources\r\n\r\n- [Static Site Tutorial](https://aka.ms/build-storetut)\r\n- [Serverless Tutorial](https://aka.ms/build-functut)\r\n- [VS Code Extensions](https://aka.ms/build-azext)\r\n- [Try the code](https://aka.ms/apm)\r\n- [Azure Dev Ops](https://aka.ms/build-azdo)\r\n\r\n# Credits\r\n\r\nCollaboration on this project is between Matt Hernandez and John Papa.\r\n\r\nShout out to [Deborah Kurata](https://github.com/deborahk/) who wrote the\r\noriginal APM app that this example is built on.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiveisprime%2Fapm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiveisprime%2Fapm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiveisprime%2Fapm/lists"}