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 @@ -60,7 +60,7 @@ Azion deploys a Hugo template as a ready project. The Console route starts from
| Influencer Hugo | Product showcase |
| Vex Hugo | Product landing page |

The Hugo Boilerplate has a guide of its own, linked in the table. Influencer Hugo and Vex Hugo share one guide: [Deploy an E-commerce with Hugo Templates](/en/documentation/guides/application-development/frameworks/hugo-ecommerce-collection/). For more information on templates, refer to [Azion Marketplace](/en/documentation/platform/marketplace/).
The Hugo Boilerplate has a guide of its own, linked in the table. Influencer Hugo and Vex Hugo share one guide: [Deploy a Hugo e-commerce template](/en/documentation/guides/application-development/frameworks/hugo-ecommerce-collection/). For more information on templates, refer to [Azion Marketplace](/en/documentation/platform/marketplace/).

---

Expand Down
Original file line number Diff line number Diff line change
@@ -1,137 +1,120 @@
---
title: "Deploy an E-commerce with Astro Templates"
title: Deploy an Astro e-commerce template
description: >-
This guide contains instructions to create an e-commerce application using templates based on Astro.
meta_tags: >-
Astro, e-commerce, templates, guides, Azion Marketplace, deployment, online store
Deploy an e-commerce application to Azion from one of the Astro E-commerce
Templates. Each template creates a GitHub repository, an application, and a
domain.
meta_tags: 'Astro, e-commerce, templates, guides, Azion Marketplace, deployment, online store, Astro E-commerce Templates, Astro Audiophile, Astro Ecommerce, Astro Quickstore'
namespace: docs_guides_astro_ecommerce_templates_collection
permalink: /documentation/guides/application-development/frameworks/astro-ecommerce-collection/
---

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

The **Astro E-commerce Templates** collection offers configurations for building e-commerce applications using templates. These templates are all based on the **Astro** framework.
You can deploy an e-commerce application to Azion from one of the Astro E-commerce Templates in Azion Console. To create an application without a template, refer to [Applications quickstart](/en/documentation/platform/applications/quickstart/).

The available templates are:
The Astro E-commerce Templates collection holds three templates, all based on the Astro framework:

- **Astro Audiophile**: create a stylish e-commerce based on Astro. It uses version `3.1.2` of Astro.
- **Astro Ecommerce**: deploy a complete e-commerce. It uses version `2.0.1` of Astro.
- **Astro Quickstore**: create your online store with Astro and Tailwind CSS. It uses versions `2.0.1` of Astro and `4.0.0-alpha.23` of Tailwind CSS.
- **Astro Audiophile**: a stylish e-commerce based on Astro. It uses version `3.1.2` of Astro.
- **Astro Ecommerce**: a complete e-commerce. It uses version `2.0.1` of Astro.
- **Astro Quickstore**: an online store built with Astro and Tailwind CSS. It uses versions `2.0.1` of Astro and `4.0.0-alpha.23` of Tailwind CSS.

The deployment process for each of these templates creates a GitHub repository for your project, along with an application and a domain. This setup enables easy access and management of your e-commerce application through the Azion Web Platform.
Each template's deployment creates a GitHub repository for your project, an [application](/en/documentation/platform/applications/) that serves it, and a domain to reach it. The templates use [Application Accelerator](/en/documentation/platform/applications/application-accelerator/), [Functions](/en/documentation/platform/functions/), and [Cache](/en/documentation/platform/applications/cache/), and their usage can generate costs. For more information, refer to [Pricing](/en/documentation/fundamentals/pricing/).

---

## Requirements
## Prerequisites

- 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.
- These templates use [Application Accelerator](/en/documentation/platform/applications/application-accelerator/), [Functions](/en/documentation/platform/functions/), and [Cache](/en/documentation/platform/applications/cache/), and it may generate usage-related costs. Check the [pricing page](https://www.azion.com/en/pricing/) for more information.
- 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.

---

## Deploying the template

You can obtain and configure your templates through the Azion Console. To easily deploy any of them on Azion, select the respective button below.

<DocButton
label="Deploy Astro Audiophile"
href="https://console.azion.com/create/azion-community/astro--audiophile"
icon="ai ai-azion"
size="medium"
/>
<DocButton
label="Deploy Astro Ecommerce"
href="https://console.azion.com/create/azion-community/astro--ecommerce"
icon="ai ai-azion"
size="medium"
/>
<DocButton
label="Deploy Astro Quickstore"
href="https://console.azion.com/create/azion-community/astro--quickstore"
icon="ai ai-azion"
size="medium"
/>
## Deploy a template

---
Each template in the collection opens as a configuration form in Azion Console, and an asterisk marks each mandatory field.

## Setting up the template
To deploy a template:

In the configuration form, you must provide the information to configure your application. Fill in the presented fields.
<DocSteps>
<DocStep title="Open the template">

Fields identified with an asterisk are mandatory.
Go to the template you want to deploy in Azion Console:

<DocSteps>
<DocStep title="Connect Azion with your GitHub account">
- [Astro Audiophile](https://console.azion.com/create/azion-community/astro--audiophile)
- [Astro Ecommerce](https://console.azion.com/create/azion-community/astro--ecommerce)
- [Astro Quickstore](https://console.azion.com/create/azion-community/astro--quickstore)

- 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.
The configuration form opens.

</DocStep>
<DocStep title="Select the Git Scope">
<DocStep title="Connect Azion with your GitHub account">

Select the **Git Scope** to work with.
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="Define a name for your application">
<DocStep title="Select the Git scope to work with" />
<DocStep title="Name the application">

- 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.
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="Select Deploy">
<DocStep title="Start the deployment">

Select the **Deploy** button to start the deployment process.
Select **Deploy**.

</DocStep>
</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.
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.

:::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.
:::
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.

---

## 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 template 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 template applies may not fit your application. You can change any of them at any time from Azion Console.

To open the application's settings:

On the upper-left corner, select **Products menu**, the icon with three horizontal lines, > **Applications**.
<DocSteps>
<DocStep title="Open the applications list">

- You'll be redirected to the **Applications** page. It lists all the applications you've created.
Access [Azion Console](https://console.azion.com/) > **Applications**. The list shows every application you created, in alphabetical order.

</DocStep>
<DocStep title="Select your application">

Find the application related to your template and select it.
<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.
:::
---

## Add a custom domain

### Adding a custom domain
The 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/).

---

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.
## Next steps

For more information, refer to [Add a custom domain to a workload](/en/documentation/guides/platform/migration/configure-a-domain/).
<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