Skip to main content

Vanilla JavaScript ESM CDN Simple App

This is a minimal Vanilla JavaScript example demonstrating how to use the lunex-http library by importing it directly from an ESM CDN (esm.sh). It runs in modern browsers without bundlers or build tools.

How to run this example​

  • Simply open the index.html file in a modern browser that supports ES modules.
Note

For full functionality (e.g., making API calls to your backend), serve the app over HTTP using a local server (e.g., Apache, http-server, or python -m http.server) to avoid CORS and module loading restrictions.

What this example shows​

  • How to import LunexClient from the ESM CDN in a vanilla JS module.
  • How to instantiate LunexClient pointing to an API endpoint.
  • How to make an asynchronous GET request using getAsync.

Notes​

  • This example requires a modern browser with ES module support.
  • For local API requests, ensure CORS is properly configured on the backend or run your frontend from a local server.
  • No build tools or package installation needed, since the library is loaded via CDN.

Source Code​

index.html​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>LunexClient ESM CDN Demo</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>LunexClient ESM CDN Demo</h1>
  <div id="output">Loading...</div>
  <script type="module" src="main.js"></script>
</body>
</html>

main.js​

import LunexClient from 'https://esm.sh/lunex-http';

const output = document.getElementById('output');

const client = new LunexClient('https://jsonplaceholder.typicode.com');

async function fetchUsers() {
  try {
    const users = await client.getAsync('users');
    output.innerHTML = `<pre>${JSON.stringify(users, null, 2)}</pre>`;
  } catch (error) {
    output.textContent = 'Error fetching users: ' + error.message;
  }
}

fetchUsers();

style.css​

body {
  font-family: Arial, sans-serif;
  padding: 1rem;
  background: #f0f0f0;
}

#output {
  background: white;
  border: 1px solid #ccc;
  padding: 1rem;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}