DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Originally published at thinkthroo.com

File structure in Docmost, an open-source alternative to Confluence and Notion

#opensource #react #docmost #filestructure

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>
    }
  />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

These are the components rendered in the page.tsx

Helmet

Helmet is imported as shown below:

import { Helmet } from "react-helmet-async"
Enter fullscreen mode Exit fullscreen mode

PageHeader

PageHeader is imported as shown below:

import PageHeader from "@/features/page/components/header/page-header.tsx";
Enter fullscreen mode Exit fullscreen mode

FullEditor

FullEditor is imported as shown below:

import { FullEditor } from "@/features/editor/full-editor";
Enter fullscreen mode Exit fullscreen mode

HistoryModal

HistoryModal is imported as shown below:

import HistoryModal from "@/features/page-history/components/history-modal";
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

usePageQuery

usePageQuery is imported as shown below:

import { usePageQuery } from "@/features/page/queries/page-query";
Enter fullscreen mode Exit fullscreen mode

useGetSpaceBySlugQuery

useGetSpaceBySlugQuery is imported as shown below:

import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
Enter fullscreen mode Exit fullscreen mode

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

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/

Top comments (0)