Create Your Own CDN and Try Your Web Components Online
Introduction
In this post, I’ll show you how to create your own Content Delivery Network (CDN) and use it to test your web components online.
By leveraging GitHub Pages, you can set up a personal CDN to host your web components. In my case, I created a GitHub repository that serves as my personal CDN, which you can find https://github.com/Qleoz12/static Let’s call it “static” for now.
Setting Up Your CDN
- Create a GitHub Repository: Start by creating a simple repository on GitHub.
- Enable GitHub Pages: Go to the repository settings and enable GitHub Pages to make your content available online.
- Upload Your Content: Add your web components, images, or any other content you want to share online to the repository.
- Test Your Links: Make sure the links to your content are working correctly and are accessible online.
Creating Web Components
Once your CDN is set up, you can create and upload web components. For example, I created a web component for a business card to display my contact information online. You can check out the code
https://github.com/Qleoz12/svelte-web-components-template/blob/master/packages/lib/src/profile-card.wc.svelte
not forget give star a my repo ⭐
Upload the web component to your CDN and test the link to ensure it is available online. In my case, the library is deployed at this
https://github.com/Qleoz12/static/tree/main/js/webcomponents
Try the webcomponent online
I used my personal portfolio and a React project to test the integration of webcomponent and it works perfectly.
just add the library reference and use the webcomponent in your project.
<script src="https://qleoz12.github.io/static/js/webcomponents/profile-card.wc.js"></script>
<profile-card></profile-card>
check the pages:
-
Jekyll Blog Integration: Check out how I integrated a web component into my blog on the About - Dann Brown Adventures ->about qleoz12.github.io
-
React App Integration: See the integration with a React app using Vite + React + TS qleoz12.github.io
Explanation:
Below is an image illustrating the flow of creating your own CDN and trying out your web components online. It also helps you understand how the repositories are connected.
also check my youtube video
Conclusion:
with this discover now your able to expose trought internet new creation, update content for your clients, and share your work with the world. working one time