Remix
Learn how to integrate Dub with Remix.
1. Prerequisites
To follow this guide, you will need to:
2. Install and initialize the Dub TypeScript SDK
Install
Initialize
Then, initialize the Dub TypeScript SDK with your API key.
import { Dub } from "dub";
export const dub = new Dub({
token: process.env.DUB_API_KEY, // optional, defaults to DUB_API_KEY env variable
});
You can now use the dub
object to interact with the Dub API.
import { dub } from "./lib/dub";
3. Create link
Let’s create a short link using the Dub TypeScript SDK.
export const loader = async () => {
try {
const result = await dub.links.create({
url: "https://www.google.com",
});
return json(result, 200);
} catch (error: any) {
console.error(error);
return json(error, 400);
}
};
Optionally, you can also pass an externalId
field which is a unique identifier for the link in your own database to associate it with the link in Dub’s system.
export const loader = async () => {
try {
const result = await dub.links.create({
url: "https://www.google.com",
externalId: "12345",
});
return json(result, 200);
} catch (error: any) {
console.error(error);
return json(error, 400);
}
};
This will let you easily update the link or retrieve analytics for it later on using the externalId
instead of the Dub linkId
.
4. Upsert link
Dub TypeScript SDK provides a method to upsert a link – where an existing link is updated if it exists, or a new link is created if it doesn’t. so you don’t have to worry about checking if the link already exists.
export const loader = async () => {
try {
const result = await dub.links.upsert({
url: "https://www.google.com",
});
return json(result, 200);
} catch (error: any) {
console.error(error);
return json(error, 400);
}
};
This way, you won’t have to worry about checking if the link already exists when you’re creating it.
5. Update link
Let’s update an existing link using the Dub TypeScript SDK.
You can do that in two ways:
- Using the link’s
linkId
in Dub’s system. - Using the link’s
externalId
in your own database (prefixed withext_
).
export const loader = async () => {
try {
// Update a link by its linkId
const { shortLink } = await dub.links.update("clv3o9p9q000au1h0mc7r6l63", {
url: "https://www.google.uk", // new URL
});
// Update a link by its externalId
const { shortLink } = await dub.links.update("ext_12345", {
url: "https://www.google.uk", // new URL
});
return json({ shortLink }, 200);
} catch (error: any) {
console.error(error);
return json(error, 400);
}
};
6. Retrieve analytics for link
Dub allows you to retrieve analytics for a link using the Dub TypeScript SDK.
export const loader = async () => {
try {
// Retrieve the timeseries analytics for the last 7 days for a link
const result = await dub.analytics.retrieve({
linkId: "clv3o9p9q000au1h0mc7r6l63",
interval: "7d",
groupBy: "timeseries",
});
const timeseries = response as ClicksTimeseries[];
return json(timeseries, 200);
} catch (error: any) {
console.error(error);
return json(error, 400);
}
};
Simliarly, you can retrieve analytics for a link using the externalId
field.
// Retrieve the timeseries analytics for the last 7 days for a link
const response = await dub.analytics.retrieve({
externalId: "ext_12345",
interval: "7d",
groupBy: "timeseries",
});
const timeseries = response as ClicksTimeseries[];