• Guides
• Vue Boilerplate

The Azion Vue Boilerplate provides an automation solution to build a Vue Single-Page Application (SPA) and run it directly on the edge of the network. It encapsulates and automates several steps, from repository management to edge deployment.

This template uses Vue version 3.3.4.

To start using the Vue Boilerplate, proceed as follows:

1. Access Real-Time Manager (RTM).

• If you don’t have an account yet, create a new one by visiting the sign-up page.

2. On the homepage, select the Start with a template option.
3. Find the Vue Boilerplate card and select it.
4. Click the Settings tab to open the configuration form.

In the configuration form, you must provide the information to configure your Vue application. Fill in the presented fields.

Fields identified with an asterisk are mandatory.

• Application Name *: the name of your edge application. It’s used to identify and manage your application within Azion’s platform.
  • Use a unique and easy-to-remember name. If the name has already been used, the platform returns an error message.
• GitHub Personal Token *: your GitHub personal token.

After completing all the information, click the Next button, located in the bottom-right corner. This will start the deployment process.

During the deployment, you’ll be able to follow the process through a window showing off the logs. When it’s complete, the deployment page appears, confirming the edge application has been successfully created.

This page shows you the following sections:

• Access your Edge Application section includes the link to visit and explore your edge application.
• Build Summary contains the application’s name and function.
• The Deployment details tab can be opened to access the logs related to the deployment.
• What do you want to do next? provides recommendations regarding advanced options to enhance your edge application: Customize Domain, Manage Edge Application, View Edge Application Metrics, View Edge Application Logs, and the Back to Home button.

The script creates a GitHub repository to manage the source code and then it installs all required dependencies. Besides that, the script deploys your application on the Azion Edge Platform and carries out multiple configurations, including setting up the edge application and its domain to host your Vue project and an edge function for custom logic.

The script also commits deployment details to the user’s GitHub repository to maintain a transparent and trackable deployment history, including information related to the version deployed and the timestamp of the deployment.

With the integration of the Vulcan framework adapter, the application undergoes an optimized build process, emphasizing optimal performance and efficiency.

If you want to know more on how to edit and customize your project’s settings, go to the Managing the template section.

Additionally, to guarantee the optimal performance of this template, it’s necessary to activate the following Azion product:

You must activate this product separately via RTM. To do so:

1. Access RTM.
2. On the upper-left corner, select the three horizontal lines to open the Products menu.
3. In the BUILD section, select Edge Application.
4. You’ll be redirected to the Edge Application page.

• It lists all the edge applications you’ve created.

5. Find the edge application related to your template and select it.
6. In the Main Settings tab, find the Edge Application Modules section and active the switch for the product you want to enable.

Considering that this initial setup may not be optimal for your specific edge application, all settings can be customized any time you need by using Azion Real-Time Manager (RTM).

To manage and edit your edge application’s settings, follow these steps:

1. Access RTM.
2. On the upper-left corner, select the three horizontal lines to open the Products menu.
3. In the BUILD section, select Edge Application.
4. You’ll be redirected to the Edge Application page.

• It lists all the edge applications you’ve created.

5. Find the edge application relate to the Vue Boilerplate and select it.

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

After selecting the edge application you’ll work on, you’ll be directed to a page containing all the settings you can configure.

Once the template is deployed, you can also edit and update your args and code, as well as implement a continuous deployment workflow. However, you’ll need first to declare secrets on your project’s GitHub repository to complete the second build with the changes. When the second build is completed, you’ll be able to manage your project with a continuous deployment workflow and edit the args as desired.

To do so, open your new Vue Boilerplate repository on GitHub. Then, go to Settings > Secrets and variables > Action to add your variables, following these instructions:

1. Add the Azion personal token to the secrets:

• Read how to generate an Azion personal token in the documentation.

    AZION_PERSONAL_TOKEN=<value>

2. Add the environments for use in the action workflow in the main.yml file, included in the .github/workflows folder of your repository:

  - name: edge-...
    id: azion_edge
    ...
    with:
        ....
        azionPersonalToken: ${{ secrets.AZION_PERSONAL_TOKEN }}
        ....

3. Open a pull request to merge the changes to the main branch and start the automatic deployment.

Now, your project is ready to work with a continuous deployment workflow, updating instantly any changes in the application or the repository.

The edge application created during the deployment has an assigned Azion 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 edge application through it.

Contributors