Dmitry VerkhoturovandGitHub
23be25d84a
* Drop the frontend workspace root and re-resolve the lockfile
`frontend/` carried a `package.json`, a `pnpm-workspace.yaml` and the lockfile
for a workspace of exactly one package. Two manifests meant two places to
declare a version, and the app pin was the one that did not win: `preact` and
`@babel/core` were each written twice, and a bump to the app manifest alone
would have been a silent no-op, since `pnpm.overrides` decides and it lived at
the root.
Everything pnpm reads now lives in `frontend/apps/remark42`: dependencies,
`packageManager`, `engines` and the overrides. `frontend/` keeps `.nvmrc`,
`.husky` and `CLAUDE.md`, none of which pnpm reads. The directory nesting
stays: every path in the repository points at `frontend/apps/remark42`,
including the published contributing docs, so moving the package up would have
rewritten 14 files to no benefit.
Moving the manifest kept the old resolutions verbatim, which left optional peer
subtrees the tree no longer reaches: `ts-node` under jest, `@swc/core` under
webpack, `vitest` under `@testing-library/jest-dom`, `tslib` under
`webpack-dev-server`. None is referenced by any config or source file here.
Re-resolving drops 137 packages and moves 59 to versions already permitted by
the ranges in the manifest, 1446 to 1308, with no direct dependency changing
version: the five that look changed differ only in their peer suffix. Every
file `pnpm build` produces is identical in size before and after.
The frontend-deps stage of the Dockerfile sets `CI=true` so the `prepare`
script skips husky, which has no git repository to install hooks into there.
* Stop markdown-only changes triggering heavy workflows, and check the documented versions
`ci-backend.yml`, `ci-build.yml` and `ci-frontend.yml` all end their path
filters with `!**.md`. The e2e workflow did not, so a change to any markdown
file under `frontend/` or `backend/` matched its `frontend/**` and `backend/**`
entries and started a docker build and the whole browser suite. The release
filter had the same hole and two of its own: it names `README.md` and `LICENSE`
on purpose, since `.goreleaser.yml` packages both, so it now excludes markdown
under `backend/` and `frontend/` only. `CLAUDE.md` and the installation page
were listed as well, and neither is packaged.
`ci-site.yml` goes on matching markdown, which is right, since the site is
built from it. It excludes `CLAUDE.md`, so a future `site/CLAUDE.md` cannot
start a site build, and `site/README.md`, which documents how to build the site
rather than being part of it.
The installation page tells a reader that a source build needs Go 1.25, Node
24+ and PNPM 10. Nothing kept those in step with `backend/go.mod`,
`engines.node`, `packageManager` and `.nvmrc`, and the drift is silent: a wrong
version in the docs builds and tests exactly as well as a right one. `.nvmrc`
is the pin with form here, having sat at 16 through the whole node 20 migration
because nothing red ever pointed at it. The check compares each stated version
against its source and holds `.nvmrc` to `engines.node`, and it fails when the
page states no version at all, so removing the claims cannot turn it into a
check that passes by comparing nothing.
Its own workflow rather than a step in an existing one, since the inputs span
the backend module, the frontend manifest and the site.
* Fix the cookie fallback page, asset path, message senders, auth teardown and cookies
Two defects with the same origin: 5825a55b, the January 2021 frontend
rewrite, first released in v1.7.0.
It removed the build entry for comments.html while leaving both the
template and the link to it in place, so the page the auth panel offers
when third-party cookies are blocked has been a 404 ever since, for
exactly the reader who has no other way in. The template needed no
changes; it is built again, and an e2e case now opens it on a thread
carrying a comment and waits for that comment, so the page being served,
its inline script running and it asking for the thread named in its own
query string are all covered. Against an image built without the plugin
entry that case fails on the 404, which is the regression it exists for.
It also fixed the public path to the domain root, so an instance mounted
under a prefix, which manuals/separate-domain documents, asked for
/web/google.svg when its own icons live under that prefix. Fifteen
provider icons in remark.mjs and one in last-comments.mjs. The path is
now derived from the url the bundle was loaded from, which is correct for
both arrangements, and the file loader no longer overrides it.
The host page also accepted postMessage from any window: every frame on a
page can reach window.parent, and the handler resizes the widget, scrolls
the page and opens the profile overlay. It now ignores anything that did
not come from a frame this module created.
A fourth, in the same family: the OAuth flow never tore its polling down.
`subscribed` was declared, checked and cleared but never set, so the guard
against a second subscription was dead code and every provider click
attached another listener pair. The five minute deadline then rejected
without unsubscribing, leaving those listeners and a retry that
reschedules itself for as long as getUser returns null. Cross-domain is
where getUser never stops returning null, so a reader on the arrangement
manuals/separate-domain documents was left polling /auth/user once a
minute for the life of the page, against a route capped at 2 req/s. It
also rejected with no argument, and the caller stores that as the error
state, so the interface had undefined to render. The deadline now tears
the subscription down and rejects with an error.
The message check had a second half. Hardening the parent left the widget
document trusting any sender, and it acts on signout and theme, so
anything holding a reference to the frame could sign a reader out.
`auth.hooks` already checked `event.source !== window.parent`; that check
is now a shared `isFromParent` and the three listeners that lacked it use
it too. The origin cannot stand in for it, since the host page is
whatever site embeds the widget and `ALLOWED_HOSTS` is enforced server
side through `frame-ancestors`.
And createInstance stacked its listeners. It reuses the marked iframe
instead of building one, but installed three listeners plus a title
observer on every call, while destroy could only reach the newest
closure, so a second call without a destroy stranded a set for good. The
listeners of the current instance are now detached before the next set
goes on. Reuse and the ignored config are unchanged: that contract is
open in the backlog note and not settled here.
The auth cookies the embedded case needs were not being delivered, in
both halves of the client's own writer. The name was decorated:
setAuthCookie prefixed with __Host- whenever the page was https, so a
real deployment wrote __Host-JWT and __Host-XSRF-TOKEN while the backend
looks for JWT and the fetcher reads XSRF-TOKEN, and nothing anywhere
reads a prefixed name. Nothing caught it because the prefix is applied
from the page protocol and every test and the dev server run on http;
there is now a second suite pinned to an https page, which is the only
condition that shows it. And the attributes could not be delivered: both
were SameSite=Strict, judged against the top-level site and not the
request's own origin, so a Strict cookie is never sent from a
third-party frame, which is the entire configuration this code exists
for. They now follow the embedding, Strict while the widget shares its
page origin and None with Secure and Partitioned once it does not, since
that is the only third-party form browsers still accept. Over http in a
third-party frame no combination works, and the strict form is written
instead of one the browser would reject outright.
That leaves the client half of #1877 working, whose reporter wanted
AUTH_SEND_JWT_HEADER for exactly this arrangement, and whose first half
merged as #1929. The server's own cookies still carry no Partitioned;
that is upstream work in go-pkgz/auth.
Two plan changes. A review pass corrected its central Path B premise,
which said the first document render is anonymous permanently, in every
configuration: it is anonymous in the configuration remark42 ships,
go-pkgz/auth exposing XSRFIgnoreMethods and remark42 leaving it unset.
The door is not shut, it is closed by a setting, and opening it is
scoped security work and not a flag flip, because GET /deleteme
deletes every comment a user has written and is a GET so the emailed
link works. And the separate-domain arrangement is promoted from a
constraint bullet to a named requirement with acceptance criteria, since
a test that signs in and posts without reloading passes while
persistence is entirely broken.
Review found a seventh, and it was reachable only because of the first:
comments.ejs built its title with innerHTML from the url query
parameter, so restoring the build entry made a reflected XSS live on the
instance origin, where the page is a top-level document, frame-ancestors
does not apply and the /web CSP allows unsafe-inline. The anchor is now
built through the DOM with textContent, and only http and https reach
href, since escaping alone leaves a javascript: url working. Two e2e
subtests pin both halves, and mutation testing separates them: restoring
innerHTML fails four assertions, while keeping the escaping and dropping
only the scheme guard fails the href one alone.
Review also found the poll teardown test did not exercise the poll.
handleWindowVisibilityChange is reachable only from the two listeners
and from the retry it schedules itself, and the test dispatched neither,
so no request was ever made and the assertion compared zero to zero; it
passed with the teardown reverted. It now dispatches focus, asserts
requests are being made and keep coming, and only then that they stop.
And the teardown could not cancel an in-flight getUser: a null resolving
after the deadline ran the code past the await and scheduled a fresh
retry with nothing left to clear it. A closure-local flag checked after
the await stops that, chosen over a second guard at the top of the
handler because only one of the two is detectable by mutation and this
is the one that prevents the stray timer rather than neutering it.
The inline handler in the iframe template accepted messages from any
window while acting on them through location.replace and document.title.
It now takes only the parent, the same check the host page side makes.
8.2 KiB
title
| title |
|---|
| Frontend Development Guidelines |
Prerequisites
Frontend for Remark42 is built with Preact and Redux.
{{< note "💡" >}}
We highly recommend checking out Preact documentation.
React libraries are not usable here: the store bindings and the i18n helpers are small local
modules under app/.
{{< /note >}}
In order to inject Remark42 widgets into websites we use iframe and postMessage for communication between a site and the widget.
Simple widgets like counter widget can be injected as a script because it doesn't have its own interface.
While developing, we set up environment which imitates real world example. We serve the page which uses Remark42 config and inject all the widgets on it. You can check it on our demo site. After successful installation you should have the same page running locally.
Installation
You must have at least 2GB RAM or swap enabled for building.
- install Node.js 24 or higher (we recommend using NVM for node version autoswitch)
- install PNPM 10
- run
pnpm iinside./frontend/apps/remark42
Running pnpm i will set up pre-commit hooks into your git repository. They are used to reformat your frontend code using prettier and lint with eslint and stylelint before every commit.
{{< note "🚨" >}}
Please use 127.0.0.1 and not localhost to access the server; otherwise, CORS will prevent your browser from authentication to work correctly. You could alter the address for dev auth with the REMARK_URL environment variable.
{{< /note >}}
Development
Run frontend with remote backend
You can run frontend against demo instance of Remark42. This method of running Remark42 frontend code is preferred when you make a translation or visual adjustments that are easy to see without extensive testing. For this method we use our demo instance of Remark42 served on https://demo.remark42.com
For local development mode with Hot Reloading, use pnpm dev. In this case, webpack will serve files using webpack-dev-server on 127.0.0.1:9000. By visiting http://127.0.0.1:9000/web/, you will get a page with the main comments' widget communicating with a demo server backend running on https://demo.remark42.com. But you will not be able to log in with any OAuth providers due to security reasons.
You can attach the frontend to the locally running backend from frontend/apps/remark42 folder and providing the REMARK_URL environment variable.
npx cross-env REMARK_URL=http://127.0.0.1:8080 pnpm dev:custom
{{< note "ℹ️" >}}
If you want to redefine env variables such as PORT on your local instance, you can add the .env file to the ./frontend folder and rewrite variables as you wish. For such functional, we use dotenv.
{{< /note >}}
Run frontend with backend locally
This option of running Remark42 frontend code is preferred when you need extensive testing of your code changes, as you'll have your backend and configure it as you want, for example, enable any auth and notifications method you need to test. You can use that set up to develop and test both frontend and backend.
To bring the backend up, run:
cp compose-dev-frontend.yml compose-private.yml
# now, edit / debug `compose-private.yml` to your heart's content
# build and run
docker compose -f compose-private.yml up --build
Then in the new terminal tab or window, run the following to start the frontend with Hot Reloading:
cd frontend/apps/remark42
pnpm dev
Developer build running by webpack-dev-server supports devtools for React and Redux.
It starts Remark42 backend on 127.0.0.1:8080 and adds local OAuth2 provider "Dev". To access the frontend running by Node, go to http://127.0.0.1:9000/web/. By default, you would be logged in as dev_user, defined as admin. You can tweak any of the supported parameters in corresponded yml file.
Manual testing after changes
Frontend Docker Compose config (compose-dev-frontend.yml) by default skips running backend related tests.
{{< note "🚨" >}}
Before submitting your changes as a Pull Request, run the backend using the docker compose -f compose-dev-frontend.yml build --build-arg SKIP_FRONTEND_BUILD=""; docker compose -f compose-private.yml up command and test your changes against http://127.0.0.1:8080/web/, frontend, built statically (unlike frontend on port 9000, which runs dynamically). That is how Remark42 authors will test your changes once you submit them.
{{< /note >}}
Static build
Remark42 frontend can be built statically, and that's how the production version works: frontend is built and then resulting files embedded into the backend, which serves them as-is. Node is not running when a user starts Remark42, only the backend written in Go programming language, which also serves pre-built frontend HTML and JS and CSS files.
Run pnpm build inside ./frontend/apps/remark42, and result files will be saved in ./frontend/apps/remark42/public.
/web is served from two sources. This build output comes first; anything it does not emit is
served from backend/app/webassets/assets, embedded in the backend binary, which is where
privacy.html, markdown-help.html and 400x400.jpeg live. A plain page or image the bundler
does not process belongs there rather than here. Those files sit outside the frontend toolchain,
so prettier, stylelint and pnpm lint do not see them.
Code Style
- The project uses TypeScript to analyze code statically
- The project uses Eslint and Stylelint to check the frontend code. You can manually run via
pnpm lint - Git Hooks (via husky) installed automatically on
pnpm i. They check and try to fix code style if possible, otherwise commit will be rejected - If you want IDE integration, you need Eslint and Stylelint plugins to be installed. Eslint reads
eslint.config.mjsfrom the directory it is run in, so point your editor at the app directory: for VSCode,"eslint.workingDirectories": ["frontend/apps/remark42"]
CSS Styles
- Now we are migrating to CSS Modules, which is a recommended way of stylization. A file with styles should be named like
component.module.css - Old component styles use BEM notation (at least it should):
block__element_modifier. Also, there aremixclasses:block_modifier - The new way to name CSS selectors is camel-case like
blockElemenModifierand useclsxto combine it - Component base style resides in the component's root directory with a name of component converted to kebab-case. For example,
ListCommentsstyle is located in./app/components/list-comments/list-component.tsx - Any other files should also be named in kebab-case. For example,
./app/utils/get-param.ts
Imports
- Imports for TypeScript, JavaScript files should be without extension:
./index, not./index.ts - If the file resides in the same directory or subdirectory, the import should be relative:
./types/something - Otherwise, it should be imported by absolute path relative to
srcfolder likecommon/storewhich mapped to./app/common/store.tsin webpack, tsconfig, and Jest
Testing
- Project uses Jest as test framework
- Testing Library is used for UI tests
- Jest checks files that match regex
\.(test|spec)\.ts(x?)$, i.e.,comment.test.tsx,comment.spec.ts - Tests are running on push attempt
- Example tests can be found in
./app/components/auth/auth.spec.tsx,./app/store/user/reducers.test.ts
Notes
Frontend part being bundled on docker env gets placed on /src/web and is available via http://{host}/web. For example, embed.mjs entry point will be available at http://{host}/web/embed.mjs