Primodium Client Templates

Primodium Client Templates (opens in a new tab) provide scaffolding for custom Primodium clients built with the Primodium Core TypeScript API. Visit the demo site here (opens in a new tab).

Getting Started

Compatibility Note: Primodium requires Node.js (opens in a new tab) version 18+, 20+. However, some templates require a higher Node.js version to work. Please upgrade if your package manager warns about it.

With npm:

npm create primodium@latest

With yarn:

yarn create primodium

With pnpm:

pnpm create primodium

With bun:

bun create primodium

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options:

# npm 7+, extra double-dash is needed:
npm create primodium@latest my-primodium-app --template react-client
 
# yarn
yarn create primodium my-primodium-app --template react-client
 
# pnpm
pnpm create primodium my-primodium-app --template react-client
 
# Bun
bun create primodium my-primodium-app --template react-client

Currently supported template presets include:

• react-client: for building custom clients with the Primodium Core Library
• react-client-lite: for building read-only dashboards with the Primodium GraphQL Endpoint

You can use . for the project name to scaffold in the current directory.

Production ESLint Config

If you are developing a production application, we recommend updating the default eslintrc.cjs config to enable type aware lint rules:

• Add the following parserOptions property to the the top-level configuration:

module.exports = {
  // ...other rules
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended with plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked.
• Optionally, add plugin:@typescript-eslint/stylistic-type-checked.
• Install eslint-plugin-react (opens in a new tab) and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list.

The final .eslintrc.cjs will look like this:

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended-type-checked", // or plugin:@typescript-eslint/strict-type-checked
    "plugin:@typescript-eslint/stylistic-type-checked", // optional
    "plugin:react-hooks/recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh"],
 
  // Add parserOptions
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};