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:

1. Components structure




2. 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 [email protected]

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

References:

1. https://github.com/docmost/docmost/tree/de57d051998d39780b0cb8e1a755d7c8b256549e/apps/client/src




2. https://github.com/docmost/docmost/tree/de57d051998d39780b0cb8e1a755d7c8b256549e/apps/client/src/features




3. https://github.com/docmost/docmost/tree/de57d051998d39780b0cb8e1a755d7c8b256549e/apps/client/src/features/page




4. https://nx.dev/




5. https://ui.mantine.dev/