🛡️CDNs

To avoid broken ops due to failing external CDNs, all linked scripts have to be stored on our own Blob storage, protected by an Azure Front Door (CDN).

Blob: https://stgluckycycleprod.blob.core.windows.net/public/scripts/

CDN: https://statics.lucky-cycle.com/public/scripts/

Any project should obviously use the CDN link in production (and if possible, a minified version), but direct links can be used in dev mode to avoid cache.

<% if (dev) { %>
  <script type="text/javascript" src="https://stgluckycycleprod.blob.core.windows.net/public/scripts/my-script.js"></script>
<% } else { %>
  <script type="text/javascript" src="https://statics.lucky-cycle.com/public/scripts/my-script.js"></script>
<% } %>

It is also possible to use an un-minified version for developing (for example, minified Vue.js removes logs which isn't too convenient while working on a project), but the minified one in production.

Both files should then be added to the scripts folder:

.../scripts/
[...]
my-script-1-0-0.js (dev)
my-script-1-0-0.min.js (prod)
[...]
<% if (dev) { %>
  <script type="text/javascript" src="https://stgluckycycleprod.blob.core.windows.net/public/scripts/my-script-1-0-0.js"></script>
<% } else { %>
  <script type="text/javascript" src="https://statics.lucky-cycle.com/public/scripts/my-script-1-0-0.min.js"></script>
<% } %>

---

Syntax

To avoid unclarity in the folder, files should be named as such:

[project name]-[version with dashes between numbers]-[file name][.min if minified].[extension]

Here are a few examples:

// Vue, version 2.6.14, index.js, minified
vue-2-6-14-index.min.js

// Funnel Graph, version 1.3.9, main.css & theme.css, both minified
funnel-graph-1-3-9-main.min.css
funnel-graph-1-3-9-theme.min.css

// Vue (dev), version 2.7.10, index.js, un-minified
vue-dev-2-7-10-index.js

---

Updating

To avoid current and previous operations to break, any new version of a script must be added to the folder, without replacing or erasing the previous one(s).

It is possible, and wished, to have multiples versions of a same script.

.../scripts/
[...]
my-script-1-0-0.js
my-script-1-0-5.js
my-script-2-0-1.js
another-script-1-1-2.js
[...]

---

Flushing cache

[URL to the prod ressource on Azure]

  1. Click on Purge cache.

  2. In the menu, select the endpoint (only one single Blob ressource linked per CDN).

  3. Then select your domain(s) (the one(s) where you want to invalidate your file(s) - in most cases, statics(.staging).lucky-cycle.com should be enough as we don't use the default Azure domain).

  4. Select the path(s) you wish to flush (starting from the slug, so /files/etam/jcXxFNbz_4opXw.js for https://statics.lucky-cycle.com/files/etam/jcXxFNbz_4opXw.js for instance).

  5. Click on Purge (an invalidation request takes around 30s, and you should have a notification on the page once it's done).

While it is also possible to Purge all assets for the selected domains, this should be avoided as it takes much more time.

Cache purging (web portal)
{
  "contentPaths": [
    "/files/etam/jcXxFNbz_4opXw.js"
  ],
  "domains": [
    "statics.lucky-cycle.com"
  ]
}

Last updated