post-image

How to Self Host Splitbee Notion API Worker

October 7, 2021

Tutorial

Share on Twitter

Table of contents

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 into 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 requests per day.

I will not explain 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 log in to Cloudlfare worker site or register if you don't have an account yet.
  • Before going further, you can fork and clone the Notion API Worker.
  • After you cloned it, install the dependencies using yarn.
  • Rename the file named wrangler. for example.toml to wrangler.toml.
  • Edit wrangler.toml according to your preferences. Here's also an 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]/*"

toml

Wrangler Config

  • 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"
  },

json

  • To run it locally, you can run yarn dev and open the link.
    Alt Text
  • 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.
    Wrangler publish

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.

Back To Articles Page
Home
Projects
Articles
About Me