Introducing Edgio Applications v7. Find out what's new.
Edgio
Edgio

Ionic Vue

This guide shows you how to deploy a Ionic Vue application to Edgio.

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @edgio/cli@latest

Create a new Ionic Vue app

If you don’t already have a Ionic Vue app, create one by running the following:
Bash
1npm install -g @ionic/cli
2ionic start myApp tabs --type vue
3cd myApp
You can verify your app works by running it locally with:
Bash
1npm run start

Configuring your Ionic Vue app for Edgio

Initialize your project

In the root directory of your project run edgio init:
Bash
1edgio init --edgioVersion latest
This will automatically update your package.json and add all of the required Edgio dependencies and files to your project. These include:
  • The @edgio/core package - Allows you to declare routes and deploy your application on Edgio
  • The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • edgio.config.js - A configuration file for Edgio
  • routes.js - A default routes file that sends all requests to Ionic Vue.

Configure the routes

Update routes.js at the root of your project to the following:
JavaScript
1// This file was added by edgio init.
2// You should commit this file to source control.
3

4import { Router } from "@edgio/core/router";
5

6export default new Router()
7  .match('/:path*', ({ serveStatic }) => {
8    serveStatic("dist/index.html")
9  })
10  // Create serveStatic route for each file in the folder dist with a cache-control header of 's-maxage=315360000'
11  .static('dist')
Refer to the CDN-as-code guide for the full syntax of the routes.js file and how to configure it for your use case.

Run the Ionic Vue app locally on Edgio

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Test your app with the Sites on your local machine by running the following command in your project’s root directory:
Bash
1edgio dev
Load the site http://127.0.0.1:3000

Deploying

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
1edgio deploy
Your initial CDN-as-code deployment will generate system-defined origin configurations along with those defined within your edgio.config.js. Learn more about system-defined origins.
Refer to the Deployments guide for more information on the deploy command and its options.