How to start using Notion as CMS in 15 minutes?

Today, for the first time on this blog we will work with code. I have a lot of work ahead, so I start right away. I intend today to:

• create API based on notion-api-worker and deploy it on Cloudflare

• download sample posts from Notion using the created API

Notion workspace preparation

Of course, I need a free Notion account. After logging in, I create a page using the + Add a page button and choose from the displayed options table.

I can call this page as I like. It doesn't matter, because the most important thing is that the page is a table. Then I create two sample entries that will have values in the Title and Slug columns.

The last thing I need to do in Notion right now is to find and save the token that I will need in a moment to be able to execute the authorized requests to the API. While on Notion (in the browser - not in the native application), I have to open the development console by pressing either F12 or the right mouse button anywhere and select inspect from the drop-down menu. Then I need to find Application tab, Cookies from the left-hand side menu, and finally notion.com domain. I am interested in the specific cookie with the name token_v2 so after I localize it, I am copying the long string from the value field and keeping it in the clipboard for a while.

That' s all about Notion. I'm moving on to API development.

API for fetching data from Notion

First of all, I will download the repository to my computer from the notion-api-worker library.

git clone https://github.com/splitbee/notion-api-worker.git

Then I have to create a free account on Cloudflare. After logging in, I need to create API TOKEN that I will need to authenticate myself before deploying the worker. To get the token, I go to profile and then API Tokens tab. From the list, I choose Edit Cloudflare Workers and follow the prompted steps. Once I have the token created, I can move to my desktop.

According to the docs, I need to install the wrangler package first globally on my computer.

npm install -g @cloudflare/wrangler

Then I need to login to the wrangler using the Cloudflare Token I have created beforehand.

wrangler config

Awesome. Now I will move to the notion-api-worker directory and there should be wrangler.example.toml file which looks like this.

# wrangler.example.toml 

name = "notion-cloudflare-worker"
webpack_config = "webpack.config.js"
type = "webpack"
workers_dev = true

account_id = ""
zone_id = ""

route = "notion-api.splitbee.io/*"

I am going to open it with any text editor and make some changes there. First of all, I need to change the name to wrangler.toml. Then I can edit the name and need to fill up the account_id field. I can find it after logging on to the Cloudflare website. The route and zone_id are redundant in my case. One more thing I need to add here is the environment variable with the Notion Api Token (this one which I was grabbing from the cookie). So finally, the file looks like this.

# wrangler.toml 

name = "my-notion-api"
webpack_config = "webpack.config.js"
type = "webpack"
workers_dev = true

vars = { NOTION_TOKEN = "PASTE_YOUR_NOTION_TOKEN_FROM_THE_COOKIE_HERE" }

account_id = "PASTE_YOUR_CLOUDFLARE_ACCOUNT_ID_HERE"

Being in the notion-api-worker directory, from the command line I can publish the wrangler and after few seconds, I will be prompted with the URL, where my API is accessible.

wrangler publish


Warning: webpack's output filename is being renamed to 
worker.js because of requirements from the Workers runtime
✨  Built successfully, built project size is 21 KiB.
✨  Successfully published your script to
 https://my-notion-api.YOUR_ACCOUNT_NAME.workers.dev

Let's open it in the browser. So the good news is, that the deployment went well and our API is live. The bad news is, that it doesn't show me any data.

{"error":"Route not found!","routes":["/v1/page/:pageId","/v1/table/:pageId","/v1/user/:pageId"]}

Fortunately, the error says everything. I need to build the URL in the right way and for this, I need the pageId, which is the long number from the Notion URL. So I need to open the page I have created at the very beginning of this tutorial (table with posts). The URL looks like this.

https://www.notion.so/USERNAME/b514693e033f45ed9f71f1033613de93?v=afdd4c70800345059e686ddc7ef21f44

The pageId I need is the first long string after the username, so in this case, it is b514693e033f45ed9f71f1033613de93. So having this, let's create the endpoint for the API and paste it into the browser.

https://notion-api-worker.YOUR_ACCOUNT_NAME.workers.dev/v1/table/b514693e033f45ed9f71f1033613de93

And the response is like below.

[{"id":"5b381ba5-baab-4c86-97fa-0a414e5d78fd","Slug":"first-post","Title":"First Post"},{"id":"3bd33382-0e08-4234-aaca-6c03816afc06","Slug":"second-post","Title":"Second Post"}]

Perfect. This is exactly what I was expecting to get. It wasn't that hard, was it? After few minutes I was able to deploy the API in the cloud and fetch that data into the browser. Now I need to use this data in a more elegant way, and for this, I am going to build an extremely simple Next.js application.