How to setup the Full Access CDN

Introduction

Using a CDN (Content Delivery Network) for your resources significantly enhances the performance and reliability of your website. By leveraging distributed servers across various locations, the CDN ensures that your users can access resources from the closest server, improving loading speeds and reducing latency. This guide will walk you through the process of setting up your CDN access step-by-step, from domain registration to implementing the necessary code for seamless integration.

How to Register Your Domain

Before accessing CDN resources, you need to register your domain to link it to your subscription. This ensures that only the specified domain has access to the CDN’s assets. Follow these steps to register your domain:

  1. Log in to your account using your credentials.
  2. Navigate to the Dashboard section and click on the Set Domain button of your new subscription.
  3. Enter the domain name for which you want to enable CDN access. Ensure you provide the full domain e.g., www.example.com (subdomains will be automatically detected).
  4. Once saved, CDN access will be enabled for your registered domain.

How to Set Up the Code

After registering your domain, you’ll need to integrate the CDN into your website by updating your code to use the CDN URLs for your resources. Here’s how you can do it:

Get the Client Key

Click on the "Get Client Key" button to get the CDN base URL. Here's an example:

https://cdn.felixg.io/[YOUR_CLIENT_KEY]

Update your website’s code

Update your website’s code to reference the CDN for all plugins assets. For example, instead of using:

<script src="path/folder/datedropper-javascript.js"></script>

Change it to:

<script src="https://cdn.felixg.io/[YOUR_CLIENT_KEY]/datedropper-javascript"></script>

Clear cache and test

Clear your website’s cache to ensure that the new CDN links are loaded.

Test your website thoroughly to ensure that all resources are being served from the CDN and loading correctly.

By following these steps, your website will be fully integrated with the CDN, ensuring faster load times and improved performance for your visitors.

How to Customize CDN Request

To fully customize how you request resources from the CDN, you can modify the URL structure of your request. The following example demonstrates the base format of a CDN request:

<script src="https://cdn.felixg.io/[YOUR_CLIENT_KEY]/[PLUGIN_SLUG]/[VERSION]"></script>

Here’s an explanation of the values inside the square brackets:

[YOUR_CLIENT_KEY]

This is a unique identifier for your account. It is provided to you upon registration and ensures that the resources are correctly attributed to your account. Replace this placeholder with your specific client key.

[PLUGIN_SLUG]

The "slug" is a shorthand identifier for the specific plugin or resource you want to access from the CDN. It corresponds to the unique name of the plugin or resource. Replace this with the correct plugin slug that you want to include in your project.

[VERSION]

This represents the version number of the resource you are accessing. It's essential to specify the version to ensure compatibility and avoid issues caused by updates. Replace this placeholder with the desired version (e.g., "1.0.0"). If you don’t specify a version, the CDN will serve the latest version of the resource by default.

For example, if you have a plugin with the slug "example-plugin", using client key "abcd1234", and you want to use version "1.2.3", the URL would look like this:

<script src="https://cdn.felixg.io/abcd1234/example-plugin/1.2.3"></script>

By customizing these values, you can easily tailor the CDN request to load the correct resource, version, and ensure proper attribution to your account.

Plugins Slugs

The slug is a unique identifier used to reference each plugin or resource within the CDN system. It is important to use the correct slug to ensure you are accessing the desired resource. Below is a list of common plugins and their corresponding slugs:

Datedropper Javascriptdatedropper-javascript
Datedropper jQuerydatedropper-jquery
Timedropper Javascripttimedropper-javascript
Timedropper jQuerytimedropper-jquery
Inline text editorinline
Add to calendaradd-to-calendar

Make sure to use the correct slug in your CDN request to ensure the right version of the plugin is loaded. If you’re unsure which slug to use, consult the plugin’s documentation or the list provided above.