Bento.me is a platform that enables users to create a single page that consolidates multiple links. However, the platform currently does not support the Custom Domain feature. This guide will show you how to set up your preferred custom domain using a Cloudflare Worker, at no additional cost.
- Bento account
- Registered domain name
- Cloudflare account
Create a Hello World Cloudflare Worker:
npm create cloudflare@latest
Follow the instruction prompts:
- In which directory do you want to create your application? Enter a directory name
- What type of application do you want to create? "Hello World" Worker
- Do you want to use TypeScript? --> No (your choice)
- Do you want to use git for version control? Yes
- Do you want to deploy your application? Yes
For production, edit wrangler.toml:
[vars]
BENTO_USERNAME = "parsafatehi" #your Bento username
BASE_URL = "https://parsafatehi.ir" #your cutsom domain
The CF Worker in the index.js:
/**
* Welcome to Cloudflare Workers! This is your first worker.
*
* - Run `npm run dev` in your terminal to start a development server
* - Open a browser tab at http://localhost:8787/ to see your worker in action
* - Run `npm run deploy` to publish your worker
*
* Learn more at https://developers.cloudflare.com/workers/
*/
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function parseResponseByContentType(response, contentType) {
if (!contentType) return await response.text();
switch (true) {
case contentType.includes('application/json'):
return JSON.stringify(await response.json());
case contentType.includes('text/html'):
const transformedResponse = new HTMLRewriter()
.on('body', {
element(element) {
element.append(
`
<style>
// Custom CSS you can add to
// modify the styling of your page
</style>
`,
{ html: true },
);
element.append(
`
<script>
// Custom JS you can add to
// modify something on your page
</script>
`,
{ html: true },
);
},
})
.transform(response);
return await transformedResponse.text();
case contentType.includes('font'):
return await response.arrayBuffer();
case contentType.includes('image'):
return await response.arrayBuffer()
default:
return await response.text();
}
}
async function handleRequest(request) {
const path = new URL(request.url).pathname;
let url = 'https://bento.me' + path;
if (path.includes('v1')) {
url = 'https://api.bento.me' + path;
}
if (url === 'https://bento.me/') {
url = 'https://bento.me/' + BENTO_USERNAME;
}
let headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
};
const response = await fetch(url, { headers });
const contentType = response.headers.get('content-type');
let results = await parseResponseByContentType(response, contentType);
if (!(results instanceof ArrayBuffer)) {
results = results.replaceAll('https://api.bento.me', BASE_URL);
}
headers['content-type'] = contentType;
return new Response(results, { headers });
}
npm run dev
npm run deploy
After adding the custom domain and see your DNS as Active on Cloudflare go to the Workers & Pages in the main dashboard page.
- In Overview dashboard, select your Worker that you deployed in previous setps.
- Go to Settings tab and then Triggers
- In Custom Domains sections, click the Add Custom Domain button.
- Enter your custom domain for your Worker.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent