Skip to content

feat: callback added to demo, add a server, and remove vite dependency #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Apr 25, 2025
Merged

feat: callback added to demo, add a server, and remove vite dependency #11

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9434280
remove vite
girarda Apr 24, 2025
35b2465
Add the new files
girarda Apr 24, 2025
33c71c2
pull directly from npm
girarda Apr 24, 2025
4cb22d6
remove some prints
girarda Apr 24, 2025
880f2d6
Merge branch 'main' into alex/viteless_demo
teallarson Apr 24, 2025
0554f82
fix
girarda Apr 24, 2025
bb65f32
merge
girarda Apr 24, 2025
11d555a
update
girarda Apr 24, 2025
f267a78
do the thing
teallarson Apr 24, 2025
234745a
cleanup
teallarson Apr 24, 2025
59e7cfa
moving things, documenting things
teallarson Apr 24, 2025
275a7d3
add dependencies back to package.json
teallarson Apr 25, 2025
6ab8819
remove `dev` script from main demo, fix tests, respond to review asks
teallarson Apr 25, 2025
ab41e77
Merge branch 'main' into teal/callback-in-demo
teallarson Apr 25, 2025
1a8eb04
bump version
teallarson Apr 25, 2025
1bde788
change license type back
teallarson Apr 25, 2025
4157c12
review response
teallarson Apr 25, 2025
b0ea435
fix return type in playwright tests
teallarson Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions demo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,34 @@ pnpm install
2. Create a `.env` file in this directory with the following:

```env
VITE_AB_API_CLIENT_ID=
VITE_AB_API_CLIENT_SECRET=
VITE_AB_ORGANIZATION_ID=
VITE_AB_WORKSPACE_ID=
VITE_AB_BASE_URL=
CLIENT_ID=
CLIENT_SECRET=
ORGANIZATION_ID=
WORKSPACE_ID=
B_BASE_URL=
```

## Development

Start the development server:
Start the backend server:

```bash
pnpm dev
env $(cat .env | xargs) node server.js
```

The server will start at `https://localhost:3000`. You may need to accept the self-signed certificate warning in your browser.
The server will start at `https://localhost:3001`.

To start the frontend serve:
```bash
npx serve .
```

You may need to accept the self-signed certificate warning in your browser.

## Project Structure

- `index.html` - Main HTML file with widget container
- `vite.config.ts` - Vite configuration with HTTPS setup
- `server.js` - Backend server requesting the embedded URL
- `.env` - Environment variables (not committed to git)

## Note
Expand Down
88 changes: 14 additions & 74 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,30 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Airbyte Widget Demo</title>
<style>
.loading {
display: none;
color: #fff;
margin-top: 1rem;
}
.error {
color: red;
margin-top: 1rem;
}
#app {
min-height: 200px;
}
</style>
<title>Airbyte Embedded Widget</title>
</head>
<body>
<h1>Airbyte Widget Demo</h1>
<div id="app">
<div id="loading" class="loading">Loading widget...</div>
<div id="error" class="error"></div>
</div>
<div id="widget-container"></div>

<script type="module">
import { EmbeddedWidget } from "@airbyte-embedded/airbyte-embedded-widget";
import { EmbeddedWidget } from "https://cdn.jsdelivr.net/npm/@airbyte-embedded/airbyte-embedded-widget@0.2.0/+esm";

const loadingEl = document.getElementById("loading");
const errorEl = document.getElementById("error");
window.addEventListener("load", async () => {

async function initializeWidget() {
try {
// Show loading state
loadingEl.style.display = "block";
errorEl.textContent = "";

console.log("Fetching token with credentials:", {
client_id: import.meta.env.VITE_AB_API_CLIENT_ID || "",
client_secret: import.meta.env.VITE_AB_API_CLIENT_SECRET || "",
});

// Note: This should be an API call to the customer's backend server, not Airbyte directly
const response = await fetch(`${import.meta.env.VITE_AB_BASE_URL}/api/v1/applications/token`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
client_id: import.meta.env.VITE_AB_API_CLIENT_ID,
client_secret: import.meta.env.VITE_AB_API_CLIENT_SECRET,
}),
});
const response = await fetch("http://localhost:3001/api/widget");
const data = await response.json();

if (!response.ok) {
const errorText = await response.text();
throw new Error(`Failed to fetch token: ${response.status} ${response.statusText}\n${errorText}`);
if (!data.token) {
throw new Error("Missing 'token' in response");
}

const { access_token } = await response.json();
console.log("Received token:", access_token);

new EmbeddedWidget({
workspaceId: import.meta.env.VITE_AB_WORKSPACE_ID,
organizationId: import.meta.env.VITE_AB_ORGANIZATION_ID,
token: access_token,
baseUrl: import.meta.env.VITE_AB_BASE_URL,
});

// Hide loading state on success
loadingEl.style.display = "none";
} catch (error) {
console.error("Error initializing widget:", error);
// Hide loading state and show error
loadingEl.style.display = "none";
errorEl.innerHTML = `
<p>Failed to initialize widget:</p>
<pre style="white-space: pre-wrap;">${error.message}</pre>
<p>Check console for more details.</p>
`;
const widget = new EmbeddedWidget({ token: data.token });
} catch (err) {
console.error("Failed to load widget:", err);
}
}

// Start initialization
initializeWidget();
});
</script>
</body>
</html>
Loading