Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ A deployment of this design uses [Application Accelerator](/en/documentation/pla
## Implementation

- [Build and run customer support AI assistants](/en/documentation/use-cases/build-and-run-ai-workloads/build-and-run-customer-support-ai-assistants/) - builds the same assistant with the model on AI Inference, and compares it with this design.
- [How to deploy the LangGraph AI Agent Boilerplate](/en/documentation/guides/application-development/frameworks/langgraph-ai-agent-boilerplate/) - creates the frontend, the function, and the database this page describes, and carries the document loader that fills them.
- [Deploy the LangGraph AI Agent Boilerplate](/en/documentation/guides/application-development/frameworks/langgraph-ai-agent-boilerplate/) - creates the frontend, the function, and the database this page describes, and carries the document loader that fills them.
- [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/) - connects the repository that deployment pushes to, which the guide requires before it starts.

---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ Every response returns through the application, which delivers it to the user. T
- [Purge cached content](/en/documentation/guides/application-performance/cache-and-purge/purge-cached-content/) - sends cache key purges to the Tiered Cache layer and to Cache, and confirms them.
- [Check the cache status of a response](/en/documentation/guides/application-performance/cache-and-purge/check-page-cache-time/) - reads the `x-cache` and `x-cache-key` headers of a response.
- [Measure cache offload for a domain](/en/documentation/guides/platform/observability/measure-cache-offload/) - reads the requests and the data answered from cache, and the misses that reached the origin.
- [Deploy the File Optimization Template](/en/documentation/guides/application-development/frameworks/dynamic-and-static-file-optimization-template/) - creates an application with standard cache policies by file extension, in front of the origin you name.
- [Deploy the Dynamic and Static File Optimization template](/en/documentation/guides/application-development/frameworks/dynamic-and-static-file-optimization-template/) - creates an application with standard cache policies by file extension, in front of the origin you name.

## Related resources

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ permalink: /documentation/guides/application-development/integrations/publish-a-
import DocCardGroup from '@aziontech/webkit/doc-card-group'
import DocCard from '@aziontech/webkit/doc-card'

You publish a message to Upstash QStash from a function, with the QStash token that the function reads from an environment variable, and QStash takes the message for the destination domain you name. To deploy the template that receives scheduled messages from QStash, refer to [Use the QStash Function Scheduler](/en/documentation/guides/application-development/frameworks/qstash-function-scheduler/).
You publish a message to Upstash QStash from a function, with the QStash token that the function reads from an environment variable, and QStash takes the message for the destination domain you name. To deploy the template that receives scheduled messages from QStash, refer to [Deploy the QStash Function Scheduler template](/en/documentation/guides/application-development/frameworks/qstash-function-scheduler/).

QStash is a message queue and task scheduler for serverless runtimes. A function that hands work to it answers its caller without waiting for that work, and it answers only after QStash accepts the message, so a failed publish is never reported as a success.

Expand Down Expand Up @@ -138,7 +138,7 @@ QStash runs the message on the schedule you set, and the schedule is visible in
## Next steps

<DocCardGroup cols={2}>
<DocCard title="Use the QStash Function Scheduler" href="/en/documentation/guides/application-development/frameworks/qstash-function-scheduler/" label="Deploy a function that receives scheduled messages from QStash, with the signing keys it needs." />
<DocCard title="Deploy the QStash Function Scheduler template" href="/en/documentation/guides/application-development/frameworks/qstash-function-scheduler/" label="Deploy a function that receives scheduled messages from QStash, with the signing keys it needs." />
<DocCard title="fetch" href="/en/documentation/devtools/runtime/api-reference/fetch/" label="The request options fetch accepts, the timeout signal, and the errors it rejects with." />
<DocCard title="Build event-driven APIs" href="/en/documentation/use-cases/build-and-run-applications/build-event-driven-apis/" label="A webhook producer that publishes every event to QStash before it answers the provider." />
<DocCard title="Deduplicate webhook deliveries with KV Store" href="/en/documentation/guides/application-development/data/deduplicate-webhook-deliveries-with-kv-store/" label="Skip the publish for an event a webhook provider delivers twice." />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,134 +1,117 @@
---
title: "Deploy Apps with the Angular Boilerplate"
title: Deploy the Angular Boilerplate
description: >-
The Angular Boilerplate provides an automation solution to build an Angular
application on Azion.
meta_tags: 'templates, guides, Azion Marketplace'
Deploy an Angular single-page application to Azion from the Angular
Boilerplate template, which creates a GitHub repository, an application, and
a function.
meta_tags: 'templates, guides, Azion Marketplace, Angular, Angular Boilerplate'
namespace: docs_guides_angular_boilerplate
permalink: /documentation/guides/application-development/frameworks/angular-boilerplate/
---

import DocSteps from '@aziontech/webkit/doc-steps'
import DocStep from '@aziontech/webkit/doc-step'
import DocButton from '~/components/webkit/DocButton.vue';

The Azion **Angular Boilerplate** provides an automation solution to build an **Angular Single-Page Application (SPA)** and run it directly on Azion's distributed infrastructure, encapsulating several steps, from repository management to deployment.

This template uses Angular version `19.2.1`.

---
import DocCardGroup from '@aziontech/webkit/doc-card-group'
import DocCard from '@aziontech/webkit/doc-card'

## Requirements
You can deploy an Angular single-page application (SPA) to Azion from the Angular Boilerplate template in Azion Console. To create an application without a template, refer to [Applications quickstart](/en/documentation/platform/applications/quickstart/).

- A [GitHub account](https://github.com/signup) to connect with Azion and create your new repository.
- Every push will be deployed automatically to this repository to keep your project updated.
The template automates the steps from repository management to deployment, and the application runs on Azion's distributed infrastructure. The template uses Angular `19.2.1`.

- This template uses [Functions](/en/documentation/platform/functions/) and it may generate usage-related costs. Check the [pricing page](https://www.azion.com/en/pricing/) for more information.
The deployment creates a GitHub repository for your project, an [application](/en/documentation/platform/applications/) that serves it, a function for custom logic, and a domain to reach it. The template uses [Functions](/en/documentation/platform/functions/), and its usage can generate costs. For more information, refer to [Pricing](/en/documentation/fundamentals/pricing/).

---

## Deploying the template
## Prerequisites

You can obtain and configure your template through the Azion Console. To easily deploy it on Azion, select the button below.

<DocButton
label="Deploy"
href="https://console.azion.com/create/angular/angular-boilerplate"
icon="ai ai-azion"
size="medium"
/>
- An Azion account. To create one, refer to [Create an account](/en/documentation/fundamentals/creating-account/).
- Access to Azion Console. To sign in, refer to [Access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/).
- A [GitHub account](https://github.com/signup). Azion connects to it and creates the project's repository there.

---

## Setting up the template
## Deploy the template

In the configuration form, you must provide the information to configure your Angular application. Fill in the presented fields.
The Angular Boilerplate opens as a configuration form in Azion Console, and an asterisk marks each mandatory field.

Fields identified with an asterisk are mandatory.
To deploy the template:

<DocSteps>
<DocStep title="Connect Azion with your GitHub account">

- A pop-up window will open to confirm the installation of the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/), a tool that connects your GitHub account with Azion's platform.
- Define your permissions and repository access as desired.

</DocStep>
<DocStep title="Select the Git Scope">
<DocStep title="Open the template">

Select the **Git Scope** to work with.
Go to [Angular Boilerplate](https://console.azion.com/create/angular/angular-boilerplate) in Azion Console. The configuration form opens.

</DocStep>
<DocStep title="Define a name for your application">
<DocStep title="Connect Azion with your GitHub account">

- The bucket for storage and the function will use the same name.
- Use a unique and easy-to-remember name. If the name has already been used, the platform returns an error message.
A window opens to confirm the installation of the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/), which connects your GitHub account with Azion. In that window, define the app's permissions and repository access.

</DocStep>
<DocStep title="Select Deploy">
<DocStep title="Select the Git scope to work with" />
<DocStep title="Name the application">

Select the **Deploy** button to start the deployment process.
Enter a unique name that you can remember. The storage bucket and the function that the template creates take the same name. If the name is already in use, the platform returns an error message.

</DocStep>
<DocStep title="Start the deployment" />
</DocSteps>

During the deployment, you'll be able to follow the process through a window showing the logs. When it's complete, the page shows information about the application and some options to continue your journey.

:::note
The link to the application allows you to see it on the browser. However, it takes a certain time to propagate and configure the application on Azion's distributed infrastructure. It may be necessary to wait a few minutes for the URL to be activated and for the application page to be effectively displayed in the browser.
:::
A window shows the deployment logs while it runs. When the deployment completes, the page shows the application's details, a browser link to it, and options to continue. The deployment leaves you with:

### Key configurations
- A GitHub repository created from the [Angular Boilerplate sample](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-boilerplate), with its dependencies installed.
- A GitHub Action in that repository for continuous deployment.
- A commit in the repository that records the deployed version and the deployment timestamp, so the deployment history stays traceable.
- An application on Azion Platform, with a domain that serves the Angular project and a function for custom logic.

The script creates a [GitHub repository](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-boilerplate) to manage the source code and then it installs all required dependencies. The template also includes a GitHub Action to enable continuous deployment.
The template builds the project with the [Azion Bundler framework adapter](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/).

With the integration of the [Azion Bundler framework adapter](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/), the application undergoes an optimized build process, emphasizing optimal performance and efficiency.
The link can take a few minutes to start serving the application, while its configuration propagates across Azion's distributed infrastructure. If the page does not load, wait a few minutes and open the link again.

Besides that, the script deploys your application on the Azion Web Platform and carries out multiple configurations, including setting up the application and its domain to host your Angular.js project and a function for custom logic.
This video, from Azion's YouTube channel, walks through the deployment of the Angular Boilerplate:

To maintain a transparent and trackable deployment history, the script commits deployment details to the user's GitHub repository, including information related to the version deployed and the timestamp of the deployment.
<Video src="https://www.youtube.com/embed/rD4K39a70Xk?si=NCq7BvqJXTUU2ERQ" title="Deploy Apps with the Angular Boilerplate" description="The Angular Boilerplate provides an automation solution to build an Angular application on Azion." uploadDate="2023-09-28" />

---

## Managing the template
## Update the project

Considering that this initial setup may not be optimal for your specific application, all settings can be customized any time you need by using Azion's platform.
Every push to the GitHub repository that the Angular Boilerplate creates deploys automatically.

To manage and edit your application's settings, follow these steps:
To update the deployed project, push your changes to that repository. Azion deploys them, and the application serves the new version.

<DocSteps>
<DocStep title="Access Azion Console">
---

[Access Azion Console](https://console.azion.com).
## Manage the application

</DocStep>
<DocStep title="Select Applications">
The settings that the Angular Boilerplate applies may not fit your application. You can change any of them at any time from Azion Console.

On the upper-left corner, select **Products menu** > **Applications**.
To open the application's settings:

- You'll be redirected to the **Applications** page. It lists all the applications you've created.
<DocSteps>
<DocStep title="Open the applications list">

</DocStep>
<DocStep title="Select your application">
Access [Azion Console](https://console.azion.com/) > **Applications**. The list shows every application you created, in alphabetical order.

Find the application related to your template and select it.
</DocStep>
<DocStep title="Select the application that the template created">

- The list is organized alphabetically. You can also use the **search bar** located in the upper-left corner of the list; currently, it filters only by **Application Name**.
To find it in a long list, search by its name. The search filters the list by application name only.

</DocStep>
</DocSteps>

After selecting the application you'll work on, you'll be directed to a page containing all the settings you can configure.
The application opens on a page that holds every setting you can configure. For more information, refer to [Main Settings](/en/documentation/platform/applications/main-settings/), [Rules Engine for Applications](/en/documentation/platform/applications/rules-engine/), and [Device Groups](/en/documentation/platform/applications/device-groups/).

:::tip
Read the documentation about [managing applications](/en/documentation/platform/applications/quickstart/) for more details.
:::
---

### Adding a custom domain
## Add a custom domain

The application created during the deployment has an assigned Azion Workload domain to make it accessible through the browser. The domain has the following format: `xxxxxxxxxx.map.azionedge.net/`. However, you can add a custom domain for users to access your application through it.
The Angular Boilerplate deployment assigns the application a [workload](/en/documentation/platform/workloads/) domain in the format `xxxxxxxxxx.map.azionedge.net`, which a browser can open. To serve the application from a domain you own, add a custom domain. To add one, refer to [Add a custom domain to a workload](/en/documentation/guides/platform/migration/configure-a-domain/). For more information, refer to [Domains](/en/documentation/platform/workloads/domains/).

For more information, refer to [Add a custom domain to a workload](/en/documentation/guides/platform/migration/configure-a-domain/).
---

Watch a video on how to deploy applications using the Angular Boilerplate on Azion's YouTube channel.
## Next steps

<Video src="https://www.youtube.com/embed/rD4K39a70Xk?si=NCq7BvqJXTUU2ERQ" title="Deploy Apps with the Angular Boilerplate" description="The Angular Boilerplate provides an automation solution to build an Angular application on Azion." uploadDate="2023-09-28" />
<DocCardGroup cols={2}>
<DocCard title="Rules Engine for Applications" href="/en/documentation/platform/applications/rules-engine/" label="Every criterion and behavior a rule accepts, to change how the application handles requests." />
<DocCard title="Functions" href="/en/documentation/platform/functions/" label="How functions run on Azion, including the function that the template creates." />
</DocCardGroup>
Loading
Loading