How to Self Host Notion API Worker (from Splitbee)

Introduction

Lately, I'm learning React and its frameworks (like Next.js) and libraries. I even remake my personal site as my first portfolio in React. Just made it using Next.js and Chakra UI and integrated it to my Notion workspace.

To connect my web to my Notion workspace I used React Notion from Splitbee. You can check it for a while.

So, React Notion use Notion API Worker to handle its requests. It can be also self-hosted using Cloudflare. Cloudflare offers a generous free plan with up to 100,000 request per day.

I will not explain about React Notion details, you can check it alone by yourself. I'll write about how to self-host the Notion API Worker using Cloudflare.

How to Self Host it?

• You can login to Cloudlfare worker site or register if you don't have an account yet.
• Before go further, you can fork and clone the Notion API Worker.
• After you cloned it, install the dependencies using yarn.
• Rename the file named wrangler.example.toml to wrangler.toml.
• Edit wrangler.toml according to your preferences. Here's also example of mine.

name = [Your worker url]
webpack_config = "webpack.config.js"
type = "webpack"
workers_dev = true
compatibility_date = "2021-10-07"

account_id = [Your Cloudflare account ID]
zone_id = [Your Cloudflare zone_id]

route = "[Your domain]/*"

• Make sure you have installed wrangler. You can see how to install it here.
• You can edit the scripts in package.json if you want so you can run it with your custom command.

  "scripts": {
    "build": "webpack",
    "dev": "wrangler dev",
    "preview": "wrangler preview",
    "deploy": "wrangler publish"
  },

• To run it locally, you can run yarn dev and open the link.
• To see the preview you can run yarn preview.
• The last thing, you can deploy it to Cloudflare server using yarn deploy or wrangler publish. Then open the link in your browser.

Tadaaaaa, it's done. You can check your API worker in your Cloudflare dashboard. This is my first english article, LOL. I hope it can help and inspire you.

Reference: https://github.com/splitbee/notion-api-worker/issues/32#issuecomment-773613634