This guide shows you how to deploy a Ionic Vue application to Edgio.
Example
Prerequisites
Setup requires:
- An Edgio account. Sign up for free.
- An Edgio property. Learn how to create a property.
- Node.js. View supported versions and installation steps.
- Edgio CLI.
Install the Edgio CLI
If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @layer0/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/cli2ionic start myApp tabs --type vue3cd 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
0 init
:Bash
10 init
This will automatically update your
package.json
and add all of the required Edgio dependencies and files to your project. These include:- The
@layer0/core
package - Allows you to declare routes and deploy your application on Edgio - The
@layer0/prefetch
package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed layer0.config.js
- A configuration file for Edgioroutes.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 layer0 init.2// You should commit this file to source control.34import { Router } from "@layer0/core/router";56export default new Router()7 // Prevent search engine bot(s) from indexing8 // Read more on: https://docs.layer0.co/applications/cookbook#blocking-search-engine-crawlers9 .noIndexPermalink()10 .static("dist", ({ cache }) => {11 cache({12 edge: {13 maxAgeSeconds: 60 * 60 * 60 * 365,14 forcePrivateCaching: true,15 },16 browser: {17 maxAgeSeconds: 0,18 serviceWorkerSeconds: 60 * 60 * 24,19 },20 });21 })22 .fallback(({ appShell }) => {23 appShell("dist/index.html");24 });
Refer to the Routing 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
10 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
10 deploy
Refer to the Deploying guide for more information on the
deploy
command and its options.