Using an Ionic CDN Setup

Updated on October 4, 2018

What is Ionic?

Ionic is a mobile-optimized framework used for the development of native and progressive web apps. It offers a library of HTML, CSS, and JS components and tools built with Sass and optimized for Angular. This method of mobile app development is quite useful as it allows developers to use what they already know (HTML, CSS, and JS) to create powerful applications.

The Ionic framework is easy to use and runs inside Phonegap or Cordova for deployment purposes. This guide will demonstrate how you can take advantage of using an Ionic CDN setup to further accelerate the Ionic library.

How to use an Ionic CDN combination

There are a couple of ways to accelerate the Ionic library as well as the static assets used in your app with a CDN. If you already have an existing CDN account you can easily reference the files using your CDN Zone URL or Zone Alias. The other option is to use a third party CDN service that is already hosting the Ionic library files across a network of POPs. Both options are discussed in the following section.

Option 1 - Using your own CDN account

The first option is to use your own CDN account to accelerate the Ionic library. If you're a KeyCDN user, this will likely require the use of a Push Zone. Using a Push Zone, you can simply FTP the Ionic library as well as any other static assets directly to the KeyCDN storage cluster. With this method, ensure that you are uploading the latest version of Ionic and reference it directly in your project using your CDN Zone URL or Zone Alias. The following example shows how a URL of one of your Ionic assets may look when using the CDN's Zone Alias.

https://cdn.yourappname.com/ajax/libs/ionic/1.3.1/css/ionic.css

Option 2 - Using an open source CDN

If you don't have an existing CDN account, another option for implementing an Ionic CDN setup is to reference the library files using an open source CDN service such as cdnjs.com. The cdnjs Ionic files can be referenced using the following snippet for example (ensure that you first check for the latest version x.y.z).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/css/ionic.css">

Copy and reference all Ionic assets which are required for the particular application you're building.

It should also be noted that an Ionic CDN combination should be primarily used for development, example, demo purposes, etc. Using local ionic files are still preferred when building a Phonegap / Cordova app as this can cause problems if the phone is offline or loses Internet connection.

Benefits of an Ionic CDN setup

Using an Ionic CDN setup will allow you to take advantage of the performance improvements realized from delivering static assets via a network of POPs. However, depending upon the application being developed, it may be better advised to use local copies of the library in the production environment.

If the application already heavily relies on an Internet connection or is being used in a development environment, a CDN can be quite useful for JS libraries, CSS frameworks, and other static assets to only increase their delivery speed but also help improve redundancy, enhance security, etc. Additionally, there also exist many other benefits for users who accelerate their static content with KeyCDN such as:

Complete access to our growing global network of POPs
HTTP/2 supported edge servers
Low pricing which decreases upon volume usage
Free SSL certificates via Let's Encrypt integration