{"id":15290894,"url":"https://github.com/azure/ng-deploy-azure","last_synced_at":"2025-04-06T19:11:40.949Z","repository":{"id":37743179,"uuid":"188103829","full_name":"Azure/ng-deploy-azure","owner":"Azure","description":"Deploy Angular apps to Azure using the Angular CLI","archived":false,"fork":false,"pushed_at":"2024-08-03T01:52:20.000Z","size":255,"stargazers_count":79,"open_issues_count":26,"forks_count":41,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-06T19:11:36.576Z","etag":null,"topics":["angular","azure","deploy","schematics"],"latest_commit_sha":null,"homepage":null,"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/Azure.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"License.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-22T19:49:01.000Z","updated_at":"2025-03-17T15:56:36.000Z","dependencies_parsed_at":"2024-10-22T21:32:32.437Z","dependency_job_id":null,"html_url":"https://github.com/Azure/ng-deploy-azure","commit_stats":{"total_commits":102,"total_committers":21,"mean_commits":4.857142857142857,"dds":0.7058823529411764,"last_synced_commit":"e68882ffd31f4c8af6173ff36e35bcc256aa8b36"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Fng-deploy-azure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Fng-deploy-azure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Fng-deploy-azure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Fng-deploy-azure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Azure","download_url":"https://codeload.github.com/Azure/ng-deploy-azure/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535517,"owners_count":20954576,"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":["angular","azure","deploy","schematics"],"created_at":"2024-09-30T16:09:58.446Z","updated_at":"2025-04-06T19:11:40.929Z","avatar_url":"https://github.com/Azure.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @azure/ng-deploy\n\n[![npm version](https://badge.fury.io/js/%40azure%2Fng-deploy.svg)](https://www.npmjs.com/package/@azure/ng-deploy)\n[![Build Status](https://dev.azure.com/devrel/chris-noring-test/_apis/build/status/Azure.ng-deploy-azure?branchName=master)](https://dev.azure.com/devrel/chris-noring-test/_build/latest?definitionId=19\u0026branchName=master)\n[![The MIT License](https://img.shields.io/badge/license-MIT-orange.svg?color=blue\u0026style=flat-square)](http://opensource.org/licenses/MIT)\n\n**Deploy Angular apps to Azure using the Angular CLI**\n\n`@azure/ng-deploy` helps you deploy your Angular app to Azure Static Hosting using the [Angular CLI](https://angular.io/cli).\n\n## Quick-start \u003ca name=\"quickstart\"\u003e\u003c/a\u003e\n\n1. Install the Angular CLI and create a new Angular project.\n\n   ```sh\n   npm install -g @angular/cli\n   ng new hello-world --defaults\n   cd hello-world\n   ```\n\n2. Add `ng-deploy` to your project and create your Azure blob storage resources.\n\n   ```sh\n   ng add @azure/ng-deploy\n   ```\n\n3. You may be prompted you to sign in to Azure, providing a link to open in your browser and a code to paste in the login page.\n\n4. Deploy your project to Azure.\n\n   ```sh\n   ng run hello-world:deploy\n   ```\n\n   The project will be built with the production configuration (like running `ng build -c=production`).\n\nYou will see output similar to the following. Browse to the link and view your site running in Azure blob storage!\n\n```sh\nsee your deployed site at https://helloworldstatic52.z22.web.core.windows.net/\n```\n\n## Requirements\n\nYou will need the Angular CLI, an Angular project, and an Azure Subscription to deploy to Azure. Details of these requirements are in this section.\n\n### Azure\n\nIf you don't have an Azure subscription, [create your Azure free account from this link](https://azure.microsoft.com/en-us/free/?WT.mc_id=ng_deploy_azure-github-cxa).\n\n### Angular CLI \u003ca name=\"angular-cli\"\u003e\u003c/a\u003e\n\n1. Install the Angular CLI.\n\n   ```sh\n   npm install -g @angular/cli\n   ```\n\n2. Run `ng --version`, make sure you have angular CLI version v14 or greater.\n\n3. If need instructions to update the CLI, [follow these upgrade instructions](https://www.npmjs.com/package/@angular/cli#updating-angular-cli).\n\n4. Update your project using the command:\n\n   ```sh\n   ng update @angular/cli @angular/core\n   ```\n\n### An Angular App Created by the Angular CLI\n\nYou will need an Angular app created and managed by the Angular CLI. For help getting started with a new Angular app, check out the [Angular CLI](https://cli.angular.io/).\n\nA simple app can be created with `ng new hello-world --defaults`\n\nVerify you have TypeScript version 3.4.5 or greater in your `package.json` file of your angular project\n\n## Details of ng-azure-deploy\n\n### How to add and configure @azure/ng-deploy \u003ca name=\"ng-add\"\u003e\u003c/a\u003e\n\nAdd _@azure/ng-deploy_ to your project by running:\n\n```sh\nng add @azure/ng-deploy\n```\n\nThis command will install the package to your project.\n\nOnce done, it will prompt you to sign in to Azure, providing a link to open in your browser and a code to paste in the login page.\n\nAfter you sign in, it will create the needed resources in your Azure account (resource group and storage account) and configure them for static hosting. To manually configure the resources that will be used, refer to [additional options](#additional options).\n\n_Note: If you have several Azure subscriptions you will be asked to choose one._\n\nThe command will create the file `azure.json` with the deployment configuration and modify `angular.json` with the deploy commands.\n\n_Note: at the moment, the command will fail if an `azure.json` file already exists. Please remove the file before running the command._\n\n### deploy \u003ca name=\"deploy\"\u003e\u003c/a\u003e\n\nYou can deploy your application to the selected storage account by running the following command.\n\n```sh\nng deploy\n```\n\nBy default, the project will be built with the production option (similar to running `ng build -c=production`).\nThe files will be taken from the path configured in the `build` command in `angular.json`.\n\nFollow [these instructions](#build-target) if you want to set up a different path and/or build target.\n\nYou may be asked to sign in to Azure again. Then, the project will be deployed to the storage account specified in `azure.json`. The link to the deployed app will be presented.\n\n### Logging out from Azure \u003ca name=\"logout\"\u003e\u003c/a\u003e\n\nTo clear the cached credentials run:\n\n```sh\nng run \u003cproject-name\u003e:azureLogout\n```\n\nThis command is available only after signing in to Azure.\n\n## Data/Telemetry \u003ca name=\"telemetry\"\u003e\u003c/a\u003e\n\nThis project collects usage data and sends it to Microsoft to help improve our products and services.\n\nRead Microsoft's [privacy statement](https://privacy.microsoft.com/en-gb/privacystatement/?WT.mc_id=ng_deploy_azure-github-cxa) to learn more.\n\nTo turn off telemetry, add the telemetry flag (`--telemetry` or `-t`) with the `false` value when running `ng add`, like this:\n\n```sh\nng add ng-deploy-azure --telemetry=false\n```\n\nor\n\n```sh\nng add ng-deploy-azure -t=false\n```\n\n### Additional options \u003ca name=\"options\"\u003e\u003c/a\u003e\n\n#### Manual configurations \u003ca name=\"manual\"\u003e\u003c/a\u003e\n\nTo manually select and/or create the resources needed for deployment,\nuse the `--manual` (or `-m`) option:\n\n```sh\nng add @azure/ng-deploy --manual\n```\n\nYou will be prompted to select or create the resource group and the storage account\nin which the app will be deployed. If you choose to create a resource group\nyou will be asked to select the geographical location.\n\n#### Passing configuration options \u003ca name=\"config\"\u003e\u003c/a\u003e\n\nYou can pass the names of the resources you'd like to use when running the command.\nResources that don't already exist will be created.\nIf using `--manual` you will be prompted to select the remaining configuration options.\nOtherwise, defaults will be used.\n\nThe available options are:\n\n- `--subscriptionId` (`-i`) - subscription ID under which to select and/or create new resources\n- `--subscriptionName` (`-n`) - subscription name under which to select and/or create new resources\n- `--resourceGroup` (`-g`) - name of the Azure Resource Group to deploy to\n- `--account` (`-a`) - name of the Azure Storage Account to deploy to\n- `--location` (`-l`) - location where to create storage account e.g. `\"West US\"` or `westus`\n- `--telemetry` (`-t`) - see [Data/Telemetry](#telemetry)\n\nExample:\n\n```sh\nng add @azure/ng-deploy -m -l=\"East US\" -a=myangularapp\n```\n\n#### Name validation \u003ca name=\"name-validation\"\u003e\u003c/a\u003e\n\nWhen creating a new storage account, the provided name will be validated.\n\nThe requirements for these names are:\n\n- between 3 and 24 characters\n- lower case letters and numbers only\n- unique across Azure\n\nIf the validation fails, the tool will suggest a valid name. You will be able to select it or try another one.\n\n#### Changing the build target \u003ca name=\"build-target\"\u003e\u003c/a\u003e\n\nBy default, the project is built using the `build` target with the `production` configuration,\nas configured in `angular.json`.\n\nYou can change this by editing the `target` and/or `configuration` in `azure.json` (after completing `@azure/ng-add`).\nChange it to a target that exists for the project in `angular.json` and optionally with one of its configurations.\nMake sure the target specifies an `outputPath`.\n\nFor example, if one of the targets under `projects.hello-world.architect` in `angular.json` is `special-build`\nwith an optional configuration named `staging`, you can specify it as the target this way:\n\n```json\n// azure.json\n{\n  \"hosting\": [\n    {\n      \"app\": {\n        \"project\": \"hello-world\",\n        \"target\": \"special-build\",\n        \"configuration\": \"staging\"\n      },\n      \"azureHosting\": {\n        ...\n      }\n    }\n  ]\n}\n```\n\nAnother option is to skip build, and deploy directly from a specific location.\nTo do this, delete the `target` and `configuration` from `azure.json`,\nand provide a `path` with a value relative to the root of the project.\n\nFor example, if the files you with to deploy exist in `public/static/hello-world`,\nchange the configuration this way:\n\n```json\n// azure.json\n{\n  \"hosting\": [\n    {\n      \"app\": {\n        \"project\": \"hello-world\",\n        \"path\": \"public/static/hello-world\"\n      },\n      \"azureHosting\": {\n        ...\n      }\n    }\n  ]\n}\n```\n\nIn the future we'll add an option to change this through the command line.\n\n## Continuous Integration Mode \u003ca name=\"ci\"\u003e\u003c/a\u003e\n\nWhen deploying from a CI environment, we switch to a non-interactive login process that requires\nyou to provide [Service Principal](https://docs.microsoft.com/en-us/azure/active-directory/develop/app-objects-and-service-principals?WT.mc_id=ng_deploy_azure-github-cxa) credentials as environment variables.\nA Service Principal is an application within [Azure Active Directory](https://docs.microsoft.com/en-us/azure/active-directory/fundamentals/active-directory-whatis?WT.mc_id=ng_deploy_azure-github-cxa)\nthat we can use to perform unattended resource and service level operations.\n\n### Creating a Service Principal \u003ca name=\"sp\"\u003e\u003c/a\u003e\n\nIn order to create and get the Service Principal application credentials, you can either use the\n[Azure Portal](https://docs.microsoft.com/en-us/azure/active-directory/develop/howto-create-service-principal-portal?WT.mc_id=ng_deploy_azure-github-cxa)\nor use the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest?WT.mc_id=ng_deploy_azure-github-cxa).\n\nWe recommend using the Azure CLI and running the following command:\n\n```sh\nAZURE_SUBSCRIPTION_ID=\"\u003ca valid subscription ID\u003e\"\nSP_NAME='\u003ca principal service name\u003e'\naz ad sp create-for-rbac --role=\"Contributor\" --scopes=\"/subscriptions/$AZURE_SUBSCRIPTION_ID\" --name=\"$SP_NAME\"\n```\n\nThis command will output the following values:\n\n```json\n{\n  \"appId\": \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\",\n  \"displayName\": \"\u003cthe principal service name\u003e\",\n  \"name\": \"http://\u003cthe principal service name\u003e\",\n  \"password\": \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\",\n  \"tenant\": \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\"\n}\n```\n\nYou can use the Azure CLI to test that these values work and you can log in:\n\n```sh\naz login --service-principal -u $CLIENT_ID -p $CLIENT_SECRET --tenant $TENANT_ID\n```\n\n### Configuring the environment variables\n\nWe will need to set the following environment variables BEFORE adding `@azure/ng-deploy` or running the deploy command:\n\n- `CI`: this must be set to `1`. This will enable the CI mode.\n- `CLIENT_ID`: is the `appId` created above.\n- `CLIENT_SECRET`: is the `password` created above.\n- `TENANT_ID`: is the `tenant` created above.\n- `AZURE_SUBSCRIPTION_ID`: is your valid subscription ID.\n\nHere is a simple shell example:\n\n```sh\nexport CI=1\nexport CLIENT_ID='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'\nexport CLIENT_SECRET='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'\nexport TENANT_ID='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'\nexport AZURE_SUBSCRIPTION_ID=\"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\"\nng run \u003cproject-name\u003e:deploy\n```\n\n\u003e For security reasons, we highly recommend to create and provide these environment variables through a different method,\n\u003e eg. [Github Secrets](https://help.github.com/en/articles/virtual-environments-for-github-actions#environment-variables)\n\u003e or [Azure DevOps Secrets](https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops\u0026tabs=yaml%2Cbatch#secret-variables?WT.mc_id=ng_deploy_azure-github-cxa).\n\n## Reporting Security Issues \u003ca name=\"issues\"\u003e\u003c/a\u003e\n\nSecurity issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at [secure@microsoft.com](mailto:secure@microsoft.com).\nYou should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message.\nFurther information, including the [MSRC PGP](https://technet.microsoft.com/en-us/security/dn606155/?WT.mc_id=ng_deploy_azure-github-cxa) key,\ncan be found in the [Security TechCenter](https://technet.microsoft.com/en-us/security/default/?WT.mc_id=ng_deploy_azure-github-cxa).\n\n## Contributing\n\nPlease refer to [CONTRIBUTING](CONTRIBUTING.md) for CLA guidance.\n\n## Thank You\n\n- [Minko Gechev](https://twitter.com/mgechev) for guiding us through the new Angular CLI Architect API, which enables adding commands.\n\n- [Brian Holt](https://twitter.com/holtbt) for creating [azez](https://github.com/btholt/azez), which provided us an (az)easy start.\n\n- [John Papa](https://twitter.com/john_papa) for guiding through and supporting the development, publish and release.\n\n## Related Resources\n\n- Learn more about Azure Static Hosting in this [blog post announcing Static websites on Azure Storage](https://azure.microsoft.com/en-us/blog/static-websites-on-azure-storage-now-generally-available/?WT.mc_id=ng_deploy_azure-github-cxa)\n- Install this [VS Code extension for Azure Storage](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage\u0026WT.mc_id=ng_deploy_azure-github-cxa)\n- Follow this tutorial to [deploy a static website to Azure](https://code.visualstudio.com/tutorials/static-website/getting-started?WT.mc_id=ng_deploy_azure-github-cxa)\n\n[azure-cli]: https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest?WT.mc_id=ng_deploy_azure-github-cxa\n[active-directory]: https://docs.microsoft.com/en-us/azure/active-directory/fundamentals/active-directory-whatis?WT.mc_id=ng_deploy_azure-github-cxa\n[principal-service]: https://docs.microsoft.com/en-us/azure/active-directory/develop/app-objects-and-service-principals?WT.mc_id=ng_deploy_azure-github-cxa\n[principal-service-portal]: https://docs.microsoft.com/en-us/azure/active-directory/develop/howto-create-service-principal-portal?WT.mc_id=ng_deploy_azure-github-cxa\n[azure-devops-secrets]: https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops\u0026tabs=yaml%2Cbatch#secret-variables?WT.mc_id=ng_deploy_azure-github-cxa\n[github-secrets]: https://help.github.com/en/articles/virtual-environments-for-github-actions#environment-variables\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure%2Fng-deploy-azure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazure%2Fng-deploy-azure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure%2Fng-deploy-azure/lists"}