Deploy the Vue Boilerplate
Deploy a Vue single-page application to Azion from Azion Console, with a GitHub repository and a GitHub Action that deploys every push.
You can deploy a Vue single-page application (SPA) to Azion from Azion Console with the Vue Boilerplate template. The template creates a GitHub repository for your code. It deploys the project as an application that runs a function for custom logic. The boilerplate uses Vue 3.3.4.
Prerequisites
- A GitHub account. The template connects to it and creates the repository there.
- Access to Azion Console. To sign in, refer to Access Azion Console.
Deploy the template
The Vue Boilerplate deploys from a form in Azion Console, and the form marks each mandatory field with an asterisk. The application it creates uses Functions, which can generate usage-related costs. For the rates, refer to Pricing.
Open the template’s form in Azion Console:
DeployTo deploy the template from the form:
A new window asks you to confirm the installation of the Azion GitHub App. The app connects your GitHub account to Azion’s platform.
In that window, set the permissions and choose the repositories the Azion GitHub App can access.
On the form, select the Git scope the template works with.
Enter a unique name for the application. The function and the storage bucket take the same name. A name already in use returns an error message.
Submit the form. A window shows the deployment logs while the deployment runs.
When the deployment finishes, the page shows the application’s information and the options to continue. The deployment leaves you with:
- A GitHub repository created from the Vue Boilerplate sample, with its dependencies installed.
- A GitHub Action in that repository that deploys every push, so the application follows your code.
- A commit in the repository that records the deployed version and the deployment timestamp.
- An application on Azion Platform, with a function for custom logic and a domain that serves the Vue project.
The template builds the project with the Azion Bundler framework adapter. The application answers on a workload domain in the format xxxxxxxxxx.map.azionedge.net. The configuration takes a few minutes to propagate across Azion’s distributed infrastructure. Until then, the link can fail to show the page, so wait a few minutes and open it again.
Open the application in Azion Console
Every setting the Vue Boilerplate configured stays editable after the deployment, on the application’s page in Azion Console.
To open the application:
Access Azion Console > Applications. The page lists every application in the account in alphabetical order.
Enter the name you gave the application. The search filters the list by application name only.
The application’s page opens with the settings the template configured, and you can change any of them. For the fields of those settings, refer to Main Settings and Rules Engine for Applications.