A detailed example of Prismic CMS integration in ReactJS and TypeScript.
The solution is a fully working example of headless Prismic CMS (https://prismic.io/) integration with a bespoke NodeJS/React application with TypeScript.
- Separated and fully tested Prismic module that you can plug to your application
- Smart React application where Prismic content is provided to components as a
prop
There are many different ways to integrate Prismic CMS with your NodeJS project. Prismic endpoints are relatively fast in providing the response, although I felt like I prefer to checkout whole the content upon loading the project first time, then cache it on my end and process accordingly as per React App route settings. It allows to avoid a constant spinner and helps in prerending in-flight. The working, commercial example you can see on my website: https://www.bazazeglarska.pl
In order to correctly address the issue we need to create some assumtions on web application side and on Prismic side.
In regard with the Prismic repository
- keep the Prismic repository reasonabily simple so that users (other department team members and content editors) can understand it and intuitively start working on it without a fear of change
- make Prismic responsible only for content delivery
- split the content on Prismic side into two categories:
- dynamic data (i.e. list of podcasts, posts, articles, news, images etc.)
- text within a layout
- each page can have a different layout
- each page can have dynamic content assigned or linked as the same slug
- support many languages
- Keep it simple for junior/mid devs on React side
- There needs to be a logical bridge and consistency between Prismic naming and application naming
- Keep TypeScript simple