DEV Community

Cover image for TypeScript SDK Development: A 5-year-old could follow this step-by-step ~ Part 5, CDN for Browsers
Syed Muhammad Yaseen
Syed Muhammad Yaseen

Posted on β€’ Edited on

TypeScript SDK Development: A 5-year-old could follow this step-by-step ~ Part 5, CDN for Browsers

Helloooooooo!

Hope you're doing great! This is SMY! πŸ‘‹ Let's Jump right in πŸš€

Part 1: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-1-our-first-mvp-1cif

Part 2: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-2-folder-structure-integrating-api-3p2e

Part 3: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-3-making-test-apps-4n3c

Part 4: https://dev.to/smy/typescript-sdk-development-a-5-year-old-could-follow-this-step-by-step-part-4-publishing-to-npm-48o6

This is Part 5 of our SDK development series where we get a CDN of our SDK

Contents:

  • ⚑ Getting CDN

  • ⚑ Integrating CDN and testing SDK

Step 1: Get a CDN

Head over to https://www.jsdelivr.com/ and search for your NPM package.

Choose the default version, and copy the link.

Head over to the Test Browser app, and integrate the CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/ts-lib-template-starter@1.0.0/dist/index.global.min.js"></script>
  </head>
  <body>
    This is a Test HTML

    <script>
      sdk.fetchUsers().then((users) => console.log(users));
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Open the file, and see the result:

Image description

Step 2: Getting the latest CDN version always

Put @latest instead of the version to always fetch the latest CDN version

https://cdn.jsdelivr.net/npm/ts-lib-template-starter@latest/dist/index.global.min.js

Sometimes, when a new version of SDK is published, jsDeliver few minutes to a few days to point @latest version to the updated version.

To fix this, when you publish a new version, head over to https://www.jsdelivr.com/tools/purge and enter the link of the CDN like:

Image description

This will purge the cache and point @latest version to the updated version.

Wrapping Up:

We Just completed the steps to get a CDN of our SDK.

Stay tuned for further parts to dive deep into SDK development and explore features like Web Push Notifications, Service Workers etc. πŸš€

.....

Now you're equipped with the knowledge to publish your own SDK. Happy coding! πŸš€

That's it, folks! hope it was a good read for you. Thank you! ✨

πŸ‘‰ Follow me

GitHub

LinkedIn

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay