To CDN or Not to CDN? | Hosting your own code on CDN

Hey there,

Today, let's dive into the realm of Content Delivery Networks (CDNs) and explore why they play a crucial role in web development.

If you've ever wondered about those mysterious links hosting code for your website, you're in the right place.

What exactly is a CDN?

CDN stands for Content Delivery Network. In simpler terms, it's like a supercharged, globally distributed set of servers that work together to deliver web content—such as images, scripts, stylesheets, and more. These servers are strategically placed worldwide to reduce delay and speed up the delivery of your website's assets.

The Dilemma of Code Hosting

Have you ever seen those lines of code that begin with <script src="https://some-cdn-link"></script> in your HTML files?

That's the magic of CDNs at play. When we include these links, we're essentially importing external code into our project.

But the question arises: Is it always better to use CDN links, or is there a normal way that might be more suitable?

The Battle: CDN Links vs Normal Way

Let's break it down, especially when it comes to incorporating libraries like React and ReactDOM into our projects.

CDN Links: The Temptation

At first glance, using CDN links might seem like a quick and convenient way to get up and running with a library. Just copy a link, paste it in your HTML, and voila! The code is available for use. However, when it comes to React and ReactDOM, the story takes a turn.

The Pitfalls of CDN for libraries like React

1. Network Costs: Every time your webpage loads, it has to fetch the React library from the CDN. This could lead to additional network costs, especially if your project scales, as the browser has to make a separate request for each library.

2. Maintainability Woes: Have you noticed the version number mentioned in those CDN URLs? It might look something like react@16.13.1. While it's convenient to grab the latest version, it might not be the best practice for maintainability. What if a new version introduces breaking changes, and your application relies on specific features of an older version? Managing versions through CDN links becomes a challenge.

The Normal Way: A Considered Approach

Contrary to the seemingly effortless CDN method, the "normal" way involves installing libraries directly into your project using package managers like npm or yarn. This not only provides more control over the library versions but also mitigates some of the drawbacks associated with CDNs.

Benefits of the Normal Way

1. Reduced Network Load: By bundling your dependencies with your project, you eliminate the need for the browser to make separate requests for each library. This can lead to faster page loads, especially for return visitors who might have the libraries cached.

2. Version Control: With package managers, you have the power to specify exact library versions in your project. This ensures that your codebase remains stable, and updates can be carefully tested before implementation.

Hosting Your Code on jsDelivr

How to host your own JavaScript, CSS, and even React code on the open-source CDN, jsDelivr?

1. Prepare Your Code

First things first, you need to prepare the code you want to host. This could be JavaScript files, CSS stylesheets, or even entire React applications bundled for production.

2. Create a GitHub Repository

To host your code on jsDelivr, you'll need to have your codebase hosted on GitHub. If you haven't already, create a new repository for your project and push your code to it.

3. Release Your Code

To make your code accessible via jsDelivr, you'll need to create a release in your GitHub repository. This involves tagging a specific commit in your repository as a release version.

1. Go to your repository on GitHub.

2. Click on the "Releases" tab.

3. Click on "Draft a new release."

4. Choose a version tag (e.g., v1.0.0).

5. Specify a release title and description.

6. Publish your release.

4. Link Your Code with jsDelivr

Now comes the exciting part - linking your code with jsDelivr's CDN. jsDelivr follows a specific URL pattern to access files from GitHub repositories.

For example, to access a file named script.js from a GitHub repository username/repository at version v1.0.0, the URL would be:

https://cdn.jsdelivr.net/gh/username/repository@v1.0.0/script.js

Simply replace username/repository, v1.0.0, and script.js with your GitHub username and repository name, the release version, and the file path, respectively.

5. Use in Your Projects

Once your code is hosted on jsDelivr, you can start using it in your web projects by including the CDN link in your HTML files.

For example:

<script src="https://cdn.jsdelivr.net/gh/username/repository@v1.0.0/script.js"></script>

Replace username/repository, v1.0.0, and script.js with your GitHub username and repository name, the release version, and the file path, respectively.

Conclusion: Striking the Right Balance

While CDNs offer a quick start, they might not be the best fit for every scenario, especially when dealing with complex libraries like React. The normal way, involving package managers, provides more control, reduces network load, and enhances version maintainability.

In the end, it's about finding the right balance for your project. Consider the size, scale, and requirements of your application. Sometimes the convenience of CDNs is unbeatable, while other times the meticulous control offered by the normal way is a developer's dream.

Thank you. See you soon!