Before starting development, take a look to the official docs of the NotionFlow.

Navigation

Setup

📌 Clone the repo

Clone the repo from the link provided in the payment, by clicking the first button and opening the GitFront page.

the Gumroad content after payment

Click Clone button at the top-right.

the GitFront page of the NotionFlow standard version code repository

Copy the url of the repo.

Repo URL

In your terminal type the command:

git clone <repo link>

Instead of <repo link> paste the copied value from the previous step.

Example: git clone <https://gitfront.io>….-Standard/

Then change directory to the project:

cd NotionFlow-Standard

Install needed dependencies: yarn

📌 Duplicate the template

Assuming that you have an account in Notion, click the below link

Click Here

NotionFlow CMS Template

And then duplicate the template, by clicking the presented below icon:

📌 Notion Integration

Create the new Notion integration from the link provided below, so that you can add Notion Token to your App envs and make API calls.

Create Integration

Set a type to internal, add a name and upload a logo if you want.

Then set capabilities like in the second screen:

Finally, you can copy the secret key and paste it in the .env file in your app as a NOTION_TOKEN.

.env.example file in NotionFlow repo

Remember, in cloned repo you have .env.example file, to make it working, you have to create another .env.local file and paste there your keys. Do not share them publicly.

📌 ENV variables

Let’s present the way of receiving the needed databases IDs. The template consists five databases:

• pages,
• brand,
• logo,
• social media,
• contact.

Each database has a unique id which is needed to make API calls for fetching the content. Getting ID of the database is proceeded the same way for each one, even the custom databases you will create. Below will be presented the way of extracting ID from pages database.

Go to your duplicated template, navigate to the dropdown on the sidebar, under NotionFlow. Then you can see the databases included in the project. Select the Pages database to get the NOTION_PAGES_DATABASE_ID variable.

Go to Share button at the top and publish a site.

Then Click the three dots at the top, go down to the connections, select add connection and pick an integration which you have created at the first step (the one which secret token was created and pasted in .env.local file).

Now click again Share button at the top and copy the link of a database.

The link should look similar to:

https://www.notion.so/d3e2ec432cf74cc4a3651bccc89079e0?v=ee890a2421534138b6fae0c309923ad3&pvs=4

copy the part after notion.so/ and before ?v=

in this case it is: d3e2ec432cf74cc4a3651bccc89079e0

Then paste it to .env.local file as NOTION_PAGES_DATABASE_ID=d3e2ec432cf74cc4a3651bccc89079e0

Now do the same for the rest of the databases and paste the ids in .env.local file as:

.env.local file created in the directory of the project

📌 Start app

The app is ready to be started with the command: yarn dev

Contact

Do you have questions? Contact me directly by mail:

💌 [email protected]