Search for a command to run...
I was looking for a way to make my site content dynamic by using the Notion as a CMS (Content Management System), and I finally found one.
Full-stack Engineer specializing in Node.js, Nest.js, MERN. Expert in building scalable APIs & real-time apps. Focus on clean code, Security, and performance.
i guess it doesnot support notion databases, checkbox & tabe of contents. Can't believe i had to leave my job as a professional punani inspector @ fbi(fake boobs inspector) to correct this.
Thanks for your feedback. I really appreciate it.
Wow, this is so cool! Using Notion as the CMS backend makes it just way easier!
Thanks for your feedback. I really appreciate it.
Wow, this is really interesting. I'll try it out, I just started using Notion for keep track of stuff.
Thanks for sharing!
I came up with this File/Folder structure for React & Redux projects after trying multiple ways.
Let's summarize multiple ways of using React useState hook in our projects.
Are you bored waiting CRA to create your project and development server to start spinning? Let's see what Vite can do for us.
This is my first article, and I just wanted to share my story about how and why I started to learn to program.
I was working on a web project where most contents were static and were given to me by my client. Some pages were pretty plain and simple that could be written using markdown. But the problem was, my client frequently asked me to change those static content and could be updated shortly again. So, I had to change those hard-coded contents frequently from React app, which was a bit boring.
I have been using Notion to keep my notes and documents for a long time. I wanted to use this tool like a CMS (Content Management System) to write those contents on the Notion, fetch contents using Notion API, and render them in my React app. By doing that, I could be free to frequently update my React code and push my code to GitHub.
I could hand over that Notion page, and they would have to write those contents themselves and change it whenever they want. Every time they change those contents, it would reflect in React app.
The Notion is an application that provides components such as notes, databases, kanban boards, wikis, calendars, and reminders. Users can connect these components to create their systems for knowledge management, note-taking, data management, project management, among others. It's the all-in-one workspace for you and your team.
So I started reading the Notion API documentation, and I tried using it. But the problem is, the API is in the Beta version, and the CORS (Cross Origin Resource Sharing) wasn't enabled either.
I started looking for alternate solutions, and I finally found one. I wasn't expecting this solution to be like this. But in the end, it worked, and my problem got solved.
I have used Vite to create my React project instead of CRA (Create React App). Learn more about Vite.
react-notion npm packagenpm install react-notion
A React renderer for Notion pages. We can use the Notion as a CMS (Content Management System) for our blog, documentation or personal site.
After you signup on the Notion, create a New page from the bottom-left of your screen and add title whatever you want.
It is an important step for fetching page content from our React app.
Add anything you want like paragraphs, images, lists, etc. We will fetch those content and render in our React app.
It is required while making GET request for our page content. It should be at the end of your page URL.
App.jsx codeimport { useState, useEffect } from 'react';
// We installed earlier. This will render content data fetched from the Notion.
import { NotionRenderer } from 'react-notion';
// For styling markdown content
import 'react-notion/src/styles.css';
import './App.css';
function App() {
const [data, setData] = useState({});
useEffect(() => {
// notion-api-worker
fetch(
'https://notion-api.splitbee.io/v1/page/<your page UUID>'
)
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return (
<div className="App">
<h1>
How to render Notion pages in React apps | Make your site content
dynamic
</h1>
{/* Mount NotionRenderer and pass in data to render */}
<NotionRenderer blockMap={data} />
</div>
);
}
export default App;
We have used notion-api-worker that has CORS (Cross Origin Resource Sharing) enabled to fetch the Notion page content. And react-notion npm package to render those fetched data into our React app.
notion-api-worker is a serverless wrapper for the private Notion API. It provides fast and easy access to your Notion content. Ideal to make Notion your CMS.
App.css codeJust for basic styling.
.App {
width: 100%;
max-width: 700px;
margin: auto;
padding: 1.5rem;
}
h1 {
margin: 2rem 0;
}
// if you used CRA
npm start
// if you used Vite
npm run dev
You should have a page running that looks like this,
Try updating your Notion page content, save it, and refresh your browser tab once or twice. You should have updated content on your React app.
So, now we have the Notion as our CMS (Content Management System). And our content is rendering on our React app dynamically. Let me know if I missed something.
Thank you for reading my blog/article. ❤️❤️