File structure in Docmost, an open-source alternative to Confluence and Notion
In this article, we will review the Docmost client file structure. This project’s frontend is built using React + Vite and has a monorepo architecture setup using NX.
We will be focusing on the client:
client
client folder contains the frontend code for the Docmost. It uses Mantine components.
Let’s pick a route and study how the files are organized in order to render that page in react.
We will focus on:
-
Components structure
-
API Layer
Page.tsx
I picked page route, this is the page that renders the editor as shown in the below image. I logged in Docmost cloud version and was on free trial at the time of writing this article.
How to locate this page in the client? I would start at the URL — https://myworkspace-665.docmost.com/s/general/p/home-page-t7i4wXav8l and check the routes configured in the client.
I found this in App.tsx L54 — L68.
<Route path={"/p/:pageSlug"} element={<PageRedirect />} />
<Route element={<Layout />}>
<Route path={"/home"} element={<Home />} />
<Route path={"/s/:spaceSlug"} element={<SpaceHome />} />
<Route
path={"/s/:spaceSlug/p/:pageSlug"}
element={
<ErrorBoundary
fallback={<>{t("Failed to load page. An error occurred.")}</>}
>
<Page />
</ErrorBoundary>
}
/>
The route — /s/general/p/home-page-t7i4wXav8l this translates to s/:spaceSlug/p/:pageSlug.
I am suprised there is no lazy loading in App.tsx, I did create an issue suggesting this — Issue #1037
Page is imported from page/page.tsx.
Components structure
<div>
<Helmet>
<title>{`${page?.icon || ""} ${page?.title || t("untitled")}`}</title>
</Helmet>
<PageHeader
readOnly={spaceAbility.cannot(
SpaceCaslAction.Manage,
SpaceCaslSubject.Page,
)}
/>
<FullEditor
key={page.id}
pageId={page.id}
title={page.title}
content={page.content}
slugId={page.slugId}
spaceSlug={page?.space?.slug}
editable={spaceAbility.can(
SpaceCaslAction.Manage,
SpaceCaslSubject.Page,
)}
/>
<HistoryModal pageId={page.id} />
</div>
These are the components rendered in the page.tsx
Helmet
Helmet is imported as shown below:
import { Helmet } from "react-helmet-async"
PageHeader
PageHeader is imported as shown below:
import PageHeader from "@/features/page/components/header/page-header.tsx";
FullEditor
FullEditor is imported as shown below:
import { FullEditor } from "@/features/editor/full-editor";
HistoryModal
HistoryModal is imported as shown below:
import HistoryModal from "@/features/page-history/components/history-modal";
API Layer
In this page.tsx, the following code snippet is found at L17–28
const { t } = useTranslation();
const { pageSlug } = useParams();
const {
data: page,
isLoading,
isError,
error,
} = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
const spaceRules = space?.membership?.permissions;
const spaceAbility = useSpaceAbility(spaceRules);
usePageQuery
usePageQuery is imported as shown below:
import { usePageQuery } from "@/features/page/queries/page-query";
useGetSpaceBySlugQuery
useGetSpaceBySlugQuery is imported as shown below:
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@ramu-narasinga
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects