shared code
code both sides import
Constants, validation or formatting that the backend and the page both use go in a shared/ folder beside the backend's folder. Both sides import it by the same relative path, in tinyjs dev and in a build.
myapp/
src/
backend/main.js
frontend/app.js
shared/settings.js// src/shared/settings.js
export const MAX_TITLE = 80;
export const validTitle = (t) => t.length > 0 && t.length <= MAX_TITLE;// src/backend/main.js and src/frontend/app.js alike
import { validTitle } from '../shared/settings.js';The folder goes next to the backend's: src/shared/ beside src/backend/, or shared/ at the project root in the Vite templates, whose backend is backend/. A plain page loads it with <script type="module">; a bundled frontend (Vite) pulls it into its own bundle.
rules
- Plain
.jsmodules (ES modules,export/import). - Nothing secret. The folder ships as plain files next to the page, so the page — and anyone who opens the app's files — can read it.
- No
tjs:*imports. The page doesn't have txiki.js; anything that touches files, processes or the network belongs in the backend.
In tinyjs dev, editing a shared file restarts the app, since the backend uses it too.
Projects from before 0.52 (src/main.js, with the frontend inside src/) can't use src/shared/ — tinyjs dev says so. Move src/main.js and the files it imports into src/backend/ first.