How to Self Host Notion API Worker (from Splitbee)

This content originally appeared on DEV Community and was authored by Yehezkiel Gunawan

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.

This content originally appeared on DEV Community and was authored by Yehezkiel Gunawan

Print Share Comment Cite Upload Translate Updates

APA

Yehezkiel Gunawan | Sciencx (2021-10-07T06:28:32+00:00) How to Self Host Notion API Worker (from Splitbee). Retrieved from https://www.scien.cx/2021/10/07/how-to-self-host-notion-api-worker-from-splitbee/

MLA

" » How to Self Host Notion API Worker (from Splitbee)." Yehezkiel Gunawan | Sciencx - Thursday October 7, 2021, https://www.scien.cx/2021/10/07/how-to-self-host-notion-api-worker-from-splitbee/

HARVARD

Yehezkiel Gunawan | Sciencx Thursday October 7, 2021 » How to Self Host Notion API Worker (from Splitbee)., viewed ,<https://www.scien.cx/2021/10/07/how-to-self-host-notion-api-worker-from-splitbee/>

VANCOUVER

Yehezkiel Gunawan | Sciencx - » How to Self Host Notion API Worker (from Splitbee). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/07/how-to-self-host-notion-api-worker-from-splitbee/

CHICAGO

" » How to Self Host Notion API Worker (from Splitbee)." Yehezkiel Gunawan | Sciencx - Accessed . https://www.scien.cx/2021/10/07/how-to-self-host-notion-api-worker-from-splitbee/

IEEE

" » How to Self Host Notion API Worker (from Splitbee)." Yehezkiel Gunawan | Sciencx [Online]. Available: https://www.scien.cx/2021/10/07/how-to-self-host-notion-api-worker-from-splitbee/. [Accessed: ]

rf:citation

» How to Self Host Notion API Worker (from Splitbee) | Yehezkiel Gunawan | Sciencx | https://www.scien.cx/2021/10/07/how-to-self-host-notion-api-worker-from-splitbee/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Introduction

How to Self Host it?

Related Posts