{"id":20471618,"url":"https://github.com/backbase/azure-angular-i18n","last_synced_at":"2026-06-04T12:31:08.848Z","repository":{"id":77366175,"uuid":"499664617","full_name":"Backbase/azure-angular-i18n","owner":"Backbase","description":"Multi locale Angular app provisioned on Azure Blob Storage and served using Azure CDN","archived":false,"fork":false,"pushed_at":"2022-06-07T20:51:33.000Z","size":125,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-20T20:02:49.910Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Backbase.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-03T22:11:19.000Z","updated_at":"2023-01-23T13:46:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"447b1446-4643-44c3-b652-64b9a35b2f4c","html_url":"https://github.com/Backbase/azure-angular-i18n","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Backbase/azure-angular-i18n","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Backbase%2Fazure-angular-i18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Backbase%2Fazure-angular-i18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Backbase%2Fazure-angular-i18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Backbase%2Fazure-angular-i18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Backbase","download_url":"https://codeload.github.com/Backbase/azure-angular-i18n/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Backbase%2Fazure-angular-i18n/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33905358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-04T02:00:06.755Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-15T14:16:47.003Z","updated_at":"2026-06-04T12:31:08.839Z","avatar_url":"https://github.com/Backbase.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Azure Angular i18n\n\nThis repository demonstrates how we can deploy a multi-language Angular app to Azure using services like Blob Storage and Azure CDN (from Microsoft). The project is similar to the one demonstrated [here](https://github.com/yash-kapila/angular-i18n-s3) using AWS services instead.\n\n## Table of Contents\n\n  - [Prerequisites](#prerequisites)\n  - [Static Apps Deployment Strategies](#static-apps-deployment-strategies)\n    * [Using a web server](#using-a-web-server)\n    * [Azure Blob Storage \u0026 Azure CDN](#azure-blob-storage--azure-cdn)\n      * [Azure Blob Storage](#azure-blob-storage)\n      * [Azure CDN](#azure-cdn)\n  - [Setup](#setup)\n    * [Project Setup](#project-setup)\n    * [Production builds per locale](#production-builds-per-locale)\n    * [Steps](#steps)\n    * [Locale Negotiation](#locale-negotiation)\n  - [Demo](#demo)\n  - [Azure Front Door](#azure-front-door)\n\n## Prerequisites\n\n1. Create a Microsoft Azure free-tire account following instructions [here](https://azure.microsoft.com/en-us/free/).\n\n2. Install [Azure CLI]((https://docs.microsoft.com/en-us/cli/azure/install-azure-cli)) to provision resources through command line.\n\n## Static Apps Deployment Strategies\n\n### Using a web server\n\nAngular docs only document deploying a multi-locale app on a web server such as Nginx or Apache. For more information refer [here](https://angular.io/guide/i18n-common-deploy).\n\nSince a web server is capable to handle incoming requests and prepare a response based on certain logic, it is easier to setup the configuration there to serve different languages.\n\nFor example, following logic inside Nginx would let it serve different Angular application based on the URL:\n\n```\nlocation ~ ^/(en|nl) {\n    try_files $uri /$1/index.html?$args;\n}\n```\n\n### Azure Blob Storage \u0026 Azure CDN\n\nRunning a web server is pretty straightforward and easy to configure. However, there are cheaper and more effective solutions also available to serve static web apps.\n\n#### Azure Blob Storage\n\nAzure Blob storage is Microsoft's object storage solution for the cloud. Blob storage is optimized for storing massive amounts of unstructured data. Unstructured data is data that doesn't adhere to a particular data model or definition, such as text or binary data.\n\nSome of the use cases for Azure Blob Storage are:\n\n- Serving images or static documents directly to a browser.\n- Storing files for distributed access.\n- Streaming video and audio.\n- Storing data for analysis by an on-premises or Azure-hosted service.\n\nRead [here](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blobs-introduction) for more information about the service.\n\n#### Azure CDN\n\nA content delivery network (CDN) is a distributed network of servers that can efficiently deliver web content to users. CDNs store cached content on edge servers in point-of-presence (POP) locations that are close to end users, to minimize latency.\n\nAzure Content Delivery Network (CDN) offers developers a global solution for rapidly delivering high-bandwidth content to users by caching their content at strategically placed physical nodes across the world.\n\nThe benefits of using Azure CDN to deliver web site assets include:\n\n- Better performance and improved user experience for end users, especially when using applications in which multiple round-trips are required to load content.\n- Large scaling to better handle instantaneous high loads, such as the start of a product launch event.\n- Distribution of user requests and serving of content directly from edge servers so that less traffic is sent to the origin server.\n\nRead [here](https://docs.microsoft.com/en-us/azure/cdn/cdn-overview) for more information about the service.\n\n## Setup\n\n### Project Setup\n\nFollowing instructions provided by [Angular docs](https://angular.io/guide/i18n-common-overview), the app is prepared for multiple languages, `en` and `nl`. The translation files can be found at `src/locale/`.\n\nAPI_ROOT for the app is uses `https://swapi.py4e.com` for local development while we make use of an Azure Function serving us **static** response regarding list and details of planets in a simulated production environment. Enabling CORS on the Azure Function is a pre-requisite to allow the Angular App to communicate with it.\n\n### Production builds per locale\n\nFollowing is how Angular CLI creates the distribution package for a multi-locale app. Each locale gets its own set of HTML, CSS \u0026 JS files ready to be deployed separately.\n\n```\n- dist\n  - azure-angular-i18n\n    - en\n      - index.html\n      - favicon.ico\n      - main.5f84b2e1a0ac5bcdcd0e.js\n      - ....\n    - nl\n      - index.html\n      - favicon.ico\n      - main.5f84b2e1a0ac5bcdcd0e.js\n      - ....\n```\n\n### Steps\n\n1. Prepare Angular production builds\n\n    ```bash\n    npm run build\n    ```\n\n2. Create a [Resource Group](https://docs.microsoft.com/en-us/azure/azure-resource-manager/management/manage-resource-groups-portal). This resource group will be used to club our services together.\n\n    ```bash\n    az group create --location westeurope --name azure-angular-i18n\n    ```\n\n3. Create a Storage Account and Blob Containers using the provided ARM template\n\n    ```bash\n    az deployment group create --resource-group azure-angular-i18n --template-file azure_arm_templates/storage-account/template.json\n    ```\n\n4. Create a Azure CDN Standard from Microsoft (classic)\n\n    ```bash\n    az deployment group create --resource-group azure-angular-i18n --template-file azure_arm_templates/cdn/template.json\n    ```\n\n5. Upload the distribution packages for `nl` and `en` locale in their respective containers.\n\n    ```bash\n    # Providing name of storage account as account name and -d flag for container name\n\n    # nl\n    az storage blob upload-batch --account-name angulardemoapps -d nl-locale -s dist/azure-angular-i18n/nl/ --overwrite\n\n    # en\n    az storage blob upload-batch --account-name angulardemoapps -d en-locale -s dist/azure-angular-i18n/en/ --overwrite\n    ```\n\n6. Set the `cache-control` property for the `index.html` file to `no-store` as we don't want our CDN to cache the HTML file. This is because the CDN would otherwise cache `en` **or** `nl` content either the path with context root set as `/` and would serve the html file incorrectly.\n\n    ```bash\n    # nl\n    az storage blob update --account-name angulardemoapps --container-name nl-locale --name index.html --content-cache \"no-store\"\n\n    # en\n    az storage blob update --account-name angulardemoapps --container-name en-locale --name index.html --content-cache \"no-store\"\n    ```\n\nThere seems to be an issue seeing the blobs inside a container in the Azure Portal when the resources are created using the CLI. You may encounter a `403 Forbidden` error while trying to access your blobs in the portal. In order to resolve it, simply logout and re-login.\n\n### Locale Negotiation\n\nLogic for locale negotiation in this project is based on:\n1. Request URL\n2. Value of a cookie named `locale`\n\nSince Azure Blob Storage is a simple container for static files, there isn't a possibility for us to do locale negotation there. Instead, we make use of the [Rules Engine](https://docs.microsoft.com/en-us/azure/cdn/cdn-standard-rules-engine-reference) provided by the Azure CDN. The Rule Engine evaluates the rules specified for all incoming requests to the CDN and based on criteria defined, decides which locale to serve.\n\nRules defined for this project can be seen in the resource template(`azure_arm_templates/cdn/template.json`) we used above to create the CDN or can be seen in the Azure Portal once the resource is created.\n\n## Demo\n\nThe app can be reached at https://angular-i18n-demo.azureedge.net. It has two Angular routes (`/list` and `/details`).\n\n## Azure Front Door\n\n[Azure Front Door](https://docs.microsoft.com/en-us/azure/frontdoor/front-door-overview) is Microsoft’s modern cloud Content Delivery Network (CDN) that provides fast, reliable, and secure access between your users and your applications’ static and dynamic web content across the globe. Azure Front Door delivers your content using the Microsoft’s global edge network with hundreds of global and local POPs distributed around the world close to both your enterprise and consumer end users.\n\nIt provides certain benefits over Azure CDN For Microsoft such as:\n- Free, autorotation managed SSL certificates\n- Layer 3-4 DDoS protection\n- Attached WAF policies\n\nCreating a Front Door resource is similar to creating a CDN resource. Execute below instead of step 4 above to create a Front Door profile.\n\n```bash\naz deployment group create --resource-group azure-angular-i18n --template-file azure_arm_templates/front-door/template.json\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbackbase%2Fazure-angular-i18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbackbase%2Fazure-angular-i18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbackbase%2Fazure-angular-i18n/lists"}