Primate

Project structure

Primate is convention over configuration. This page lists common directories and files used in a Primate app.

Directories

Directory Purpose
build build artefacts — add to .gitignore
components frontend components
config configuration files
locales I18N locales
node_modules install artefacts — add to .gitignore
pages app and error HTML template pages
routes filesystem-based routes
static static assets — image, font, global JS and CSS files
stores data stores

Files

package.json dependency management
.gitignore add build, node_modules and any other transients
tsconfig.json extend primate/tsconfig
package-lock.json lock file if using npm
pnpm-lock.yaml lock file if using pnpm
bun.lockb lock file if using Bun
yarn.lock lock file if using Yarn

Config files

Reside inside config. May be authored in Javascript or TypeScript.
app.ts app options
session.ts session shape and options
i18n.ts i18n options
database/*.ts database options

Route files

Files inside the routes directory registered to a backend based on their extension. You may use different backends in your app for different routes, but every route must be uniquely handled by one backend.
index.ts matches /
user.ts matches /user
user/[name].ts matches /user/* — * is anything except a /
user/[[name]].ts matches /user and /user/* — * is anything except a /
user/[...name].ts matches /user/* — * is anything including a /
user/[[...name]].ts matches /user/* — * is anything including a /
+layout.ts route layouts for routes in same directory and below
+guard.ts route guard for routes in same directory and below
+error.ts route error file for routes in same directory

Component files

Files inside the components directory registered to a frontend based on their full extensions. You may use different frontends in your app for different components, but every component must be uniquely handled by one frontend.
*.jsx React, Solid or Voby components
*.tsx typed React, Solid or Voby components
*.svelte Svelte components
*.vue Vue components
*.component.ts Angular components
*.marko Marko components
*.eta Eta components
*.html HTML components
*.htmx HTMX components
*.hbs Handlebars components
*.webc Web components

Store files

Files inside the stores directory, representing data stores. May be authored in JavaScript or TypeScript.
User.ts — import using #store/User in routes
auth/User.ts — import using #store/auth/User in routes

Locale files

Files inside the locales directory, for I18N.
en-US.ts — locale for English (United States)
en-UK.ts — locale for English (United Kingdom)
de-DE.ts — locale for German (Germany)
Previous
Quickstart
Next
Configuration